Welcome to WebmasterWorld Guest from 54.205.209.95

Forum Moderators: not2easy

Message Too Old, No Replies

Syntax to apply the same styles to each id?

...a simple but fundamental question...

   
4:40 am on Feb 26, 2012 (gmt 0)

10+ Year Member



(I've spent more than too much time trying to figure this out for myself - time to ask for help.)

My layout is two-column - left column is the nav menu and the right is the main content. Each of those areas is to be its own isolated block with the background visible around the blocks (I've simplified for clarification - there will sometimes be more than one block in each column).

I have IDs for the nav menu and main content (as well as the header and footer) that all have their respective properties. The nav menu and main content blocks will have common styling for an inner shadow, outer shadow, etc.

How do I apply those common styles (which have quite a few properties to be compatible with different browsers) to each ID without repeating all the same properties in each ID...

and...

what does the HTML look like?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
5:16 am on Feb 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The best way to apply a set of CSS settings to different elements is by using a class name. It may feel odd to have both an id and a class attribute on an element, but it's the solution to the issue here. Good luck!
8:04 am on Feb 26, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



There are also comma-delimited groups.

div.toplevel, p.super, table.example {size: something; color: something; background-color: something-else; font-family: something;}

... et cetera. If assorted unrelated elements should always have certain things in common, style them together.

Don't forget the comma!

div.toplevel, p.super
means "div class = 'toplevel' or p class = 'super'"

div.toplevel p.super
means "p class = 'super' when it occurs inside of div class = 'toplevel'"
2:04 pm on Feb 26, 2012 (gmt 0)

10+ Year Member



Thank you both for your help.

That confirms what I've learned, but what I cannot find out how to do is write the HTML part of it. All the tutorials are either very specific (i.e. how to do the stuff you described) or too general, as I have found going through the w3schools tutorials.

So, how do I write the HTML associated with the CSS?
3:12 pm on Feb 26, 2012 (gmt 0)

10+ Year Member



Would it be something like this?:

<div id="nav_column">
<p class="shadow">
(nav menu content)
</p>
</div>
4:33 pm on Feb 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There's nothing explicitly wrong with your example, but what I had in mind was something like:

<div id="nav_column" class="shadow">
(nav menu content)
</div>
1:01 am on Feb 27, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



It depends on what the div and the p are doing. If you're creating an extra one just to carry the class or id, you don't need it. If a div might contain more than one paragraph, then you've got two approaches:

<div id = "stuff" class = "otherstuff">
<p>blahblah</p>
<p>blahblah</p>
</div>

or

<div id = "stuff">
<p class = "otherstuff">
blahblah</p>
<p class = "otherstuff">
blahblah</p>
</div>

For the first version, the css would say

div#stuff {your styles here}
div.otherstuff {more styles here}
and optionally also
div#stuff p {styles that should apply to any paragraph inside a div with this id}
div.otherstuff p {same}

For the second version, the css would say

div#stuff {your styles here}
p.otherstuff {more styles here}
and optionally also
div#stuff p {as above}

In the last case, div#stuff p will override p.otherstuff if there's a conflict-- for example, if they each set a top margin. Don't mess about with !important declarations. Instead, say

p.otherstuff, div#stuff p.otherstuff {styles here}

so the CSS has no doubt what you mean.