homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
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...

 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...


what does the HTML look like?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">



 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!


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


 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?


 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)


 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)


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


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

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