homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Syntax to apply the same styles to each id?
...a simple but fundamental question...
myrrh

5+ Year Member



 
Msg#: 4421854 posted 4:40 am on Feb 26, 2012 (gmt 0)

(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">

 

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4421854 posted 5:16 am on Feb 26, 2012 (gmt 0)

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!

lucy24

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



 
Msg#: 4421854 posted 8:04 am on Feb 26, 2012 (gmt 0)

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'"

myrrh

5+ Year Member



 
Msg#: 4421854 posted 2:04 pm on Feb 26, 2012 (gmt 0)

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?

myrrh

5+ Year Member



 
Msg#: 4421854 posted 3:12 pm on Feb 26, 2012 (gmt 0)

Would it be something like this?:

<div id="nav_column">
<p class="shadow">
(nav menu content)
</p>
</div>

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4421854 posted 4:33 pm on Feb 26, 2012 (gmt 0)

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>

lucy24

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



 
Msg#: 4421854 posted 1:01 am on Feb 27, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved