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

div styles not expressed

 12:27 pm on Jul 23, 2010 (gmt 0)

Hello, i must apologise first of all for having very little experience with coding of any kind. I've been using the design view in dreamweaver cs3.

I add a div tag, create new css style, such as background color, size etc. Now, for some reason the div will not always express the style that has been set for it. In the screen grab i have included i got to "and more" div, applied a background colour change and nothing happened! This has been happening time and again, but seemingly for no logical reason (that i can determine).

Will be most grateful for any advice on this issue. Link to image below...




 1:12 pm on Jul 23, 2010 (gmt 0)

Sounds like a Dreamweaver problem in the way you are applying the properties for CSS to elements. I don't use DW at all as it writes very bad code compared to what the validators expect to be written.

Make sure that DW is setting up and linking to a CSS file for the page you are making. You actually would be better off coding in Code Source view for both the HTML and CSS file.

I do know that DW requires a Projects folder be made so it will warn you of all files needed when you Publish or when you have used a file outside the Projects folder.



 1:33 pm on Jul 23, 2010 (gmt 0)

I know it writes bad code, but i'm forced to use it because of the graphical interface. I don't have the time to learn coding!

The best compromise i can make it working with the split view so that i am gradually becoming aware of how DW is coding as i'm going.

I use one folder to source all files.


 7:02 pm on Jul 23, 2010 (gmt 0)

If you would post your code I would be glad to help


 7:14 pm on Jul 23, 2010 (gmt 0)

OK. I can't help you with DW except by looking at the code which is not the problem you are having. The problem is DW is not styling properly in Visual Mode. Would these be of any help:

Designing with CSS – Part 2: Defining style properties and working with floats [adobe.com]

Designing with CSS – Part 2: Defining style properties and working with floats [adobe.com]

Possibly it is a step you are missing when you set the CSS property for the div. I do remember that DW had a LOT of Options that could be set and the wrong settings really could mess you up.


 7:38 pm on Jul 23, 2010 (gmt 0)

Thanks for the replies...

Will post the code html and the css. All i'm doing is creating a series of div's then attempting to assign each one a very simple style by applying different background colours. In this example i managed to affect the first two div's, then the third does nothing, (although in the all rules window the appropriate style is in the list and says changes have been made). Likewise the css code is all in place...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///I|/Documents and Settings/John Chapman/Desktop/next website test/for next test.css" rel="stylesheet" type="text/css" />

<div id="container">Content for id "container" Goes Here</div>
<div id="header">Content for id "header" Goes Here</div>
<div id="main body">Content for id "main body" Goes Here</div>
<div id="side bar">Content for id "side bar" Goes Here</div>
<div id="sub container">Content for id "sub container" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>

@charset "utf-8";
#container {
background-color: #009999;
#header {
background-color: #00CC33;
#main body {
background-color: #ECE9D8;


 7:47 pm on Jul 23, 2010 (gmt 0)

@jamespowers welcome!

DW brings with it a two-fold problem, not your fault but it would help to learn if you understand this..

DW is NOT a browser therefore there is no substitute for testing as "localhost" in all your preferred browsers, it just might surprise you that WYSInotWYG, DW, although not perfect, is the best at this WYsIWYG stuff though so don't let it put you off, just remember not to rely on its preview

secondly there is no substitute, and no WYSIWYG that I know of, which is able to do this "auto preview" thing without using too many ID's, none of them "get" how specificity works in CSS.

E.g. If that last div has a class name, but is nested inside a div with an ID there could very well be a specificity conflict whereby the div is inheriting its color from an ancestor element. IF the ancestor has an ID and the child (the element you are working on) only has a class, the ID will overrule a CLASS any day (but only for inheritable properties at that, color and background are inheritable but you see how this can quickly get confusing .. the unfortunate solution that a lot of DW users make is to make every element have an ID (a unique one!) - which of course can make the stylesheet real big and confusing.. it works for some as long you understand that that is what is happening

You should feel free to post the actual code rather that a jpg which doesn't really tell us anything..



 7:53 pm on Jul 23, 2010 (gmt 0)

x-posted! sorry

thanks for the code..

your problem is spaces in the ID name, try main-body or even just mainbody as the ID name

the code you have is saying to target the element body as child of an element with the ID main, which of course will never be true

spaces in class or ID names are a no-no and hyphens are recommended over underscores or you could use CamelCase if you prefer "mainBody" whichever will be fine.. no spaces as they have their own rules in more complex CSS

so this will apply to "side bar" and "sub container" too make them one word somehow!


 8:08 pm on Jul 23, 2010 (gmt 0)

Hi SuzyUk,

Thanks, this seems to have been the problem! Gosh i'm a bigtime noob, but i guess we all have to start somewhere!

I've been following some youtube tutorials, but obviously not following quite well enough! I've had some experience with DW but that was some time ago when they were called layers and not Div's. Basically, i hardly knew anything then either!

Just wondering, i was following a tutorial that was creating the div's by assigning ID's, and another tutorial assigning classes. May i ask what is the difference between the two?


 8:15 pm on Jul 23, 2010 (gmt 0)

Also, I'm using the div's to structure a simple page, with a container div with everything inside, and also a subcontainer to hold a navigation bar and the main content. I'm currently inserting the div's inside the others by manipulating the code:

<div class="container">
<div class="header">Content for class "header" Goes Here</div>
<div class="next">Content for class "next" Goes Here</div>

I cut the code for the divs i want inserted into the container div. I've seen it in this form before whereby the inserted code has been tabbed once to the right, is this just to make it clearer from the code which div's are inside which?


 8:44 pm on Jul 23, 2010 (gmt 0)

Need to correct this when you put it online:

<link href="file:///I|/Documents and Settings/John Chapman/Desktop/next website test/for next test.css" rel="stylesheet" type="text/css" />

Compound names should never be used for folder/file/ids/classes. Spaces should be deleted.


 9:20 pm on Jul 23, 2010 (gmt 0)

may i ask, what are compound names?


 9:27 pm on Jul 23, 2010 (gmt 0)

Names with spaces like what you used here: id="main body" "main body" is a compound name as it has a space. The space is considered whitespace. Probably should have said compound words [grammar.ccc.commnet.edu].

Better to use something like these:





 9:46 pm on Jul 23, 2010 (gmt 0)

ah i see, thank you for that, indeed, it has solved my previous problem


 9:49 pm on Jul 23, 2010 (gmt 0)

Oh, by the way, major_payne, should i be using classes or ID's when making these div's?


 3:51 am on Jul 24, 2010 (gmt 0)

Use "id"s for those that are used only ONCE per page. Class-es can be used as many times per page as you wish.

Some people overdo class-es when just one "id: on a page will do. Same "id" can be used on another page by itself if need be.


 8:30 am on Jul 24, 2010 (gmt 0)

So ID's are best to be used for the basic build of a page, header, mainbody, footer etc. Can you give me an example of how classes would be incorporated into a page constructed from div's using ID's?


 8:56 am on Jul 24, 2010 (gmt 0)

Hi all,

ID's are unique, class's are not; therefore assign them to things like:-

#wrapper - keep page center/left/right

#header - Header style
-->style the date shown (css instruction would be #header .dateFormat{/*things*/})

#content - main content style
-->style the left column (css instruction would be #content .leftcolumn{/*thnngs*/})

#midsection - adverts/affiliates/etc
-->style the centerSection (css instruction would be #minsection .centerSection{/*things*/})

#footer - Sign off/info/designedby/copywright etc

Use id references for things that are unique, then childs of that div have their own class's BUT inherit bgcolour etc from the parent - but you can overrule that, but as SuzyUk states, that's where it can get complex & confusing.

General rule of thumb is id's for construction/containers (only to be reference once) and classes are repeated - that's my understanding of it anyway.

And on a preference note, I dumped DW about 6-7 years back and just use a basic text editor to hand code everything, that way you code how you want to not how DW thinks you should, that and the fact that DW is soo memory intensive (and its preview browser isn't a browser it just pretends it is) and my little 4MB text editor is a drop in the ocean in comparison, but at the end of the day, your preferences your code your decision.

I hope I have understood you correctly there anyway ;)



 9:26 am on Jul 24, 2010 (gmt 0)

Thanks for that Matthew, a very comprehensive explanation! That has clarified things for me.

When i have the time i would love to start learning the coding, i know how inefficient DW is for creating sites, but for the time being its a means to an end for getting a simple site up.

Thanks again!


 10:46 am on Jul 25, 2010 (gmt 0)

glad it worked out, great advice here

Just wondering, i was following a tutorial that was creating the div's by assigning ID's, and another tutorial assigning classes. May i ask what is the difference between the two?

Can you give me an example of how classes would be incorporated into a page constructed from div's using ID's?

The advice, you have been given about using ID's only once per page and as a main structural element is spot on, but see the "back to basics" reason below for more if it helps.

A small example of how and when to use and reuse classes.

<div id=header">
<li class="first">First Item</li>
<li>Second Item</li>
<li class="last">Last Item</li>
<div id="maincontent">Main content</div>
<div id="footer">
<li class="first">First Item</li>
<li>Second Item</li>
<li class="last">Last Item</li>

pseudo example of two menus one in the header and the other in the footer, both to be style very differently, say the first is nice rollover effect one, but the one in the footer is to be simple inline list, a very common scenario.

In either case it's often best to know which is the first and last link in a list so that borders or padding or something can be set slightly different on either or both to make the list even up..

so say for example your whole top navbar has rounded edges you might choose to apply the left corner graphic and a bit extra left padding to the "first" li and similarly the right side rounded edge to the "last" li you use the first and last class names by specifically targetting them using something like:

#header li.first {padding-left: 30px; background: url(..);}
#header li.last {padding-right: 30px; background: url(..);}

your footer nav list has no such fanciness but you would just like the listed items to have a vertical separator, which you do by applying a left border to all the li's except the first one to maintain the "separator effect" you can do this reusing the same classname and a bit of specificity:

#footer li {border-left: 1px solid #ccc;}
#footer li.first {border: 0;}

You have just reused the class name - by adding the ID in front of it you have simply targeted them separately via their previously identified area. Simply put both identified areas (header and footer) use the same classification (class name) for the list items inside them, - those list items ARE the first and last links in their <ul> that is what they are, that is what they are classified as! no need to go back to the HTML after the fact to dream up new/extra class names to get to them ;) - they can be specifically targeted and differently styled in the CSS via their ancestors already given ID this is what CSS specificity is about.

You don't actually need to know at the time of writing your page that what the actual styling is to be, or indeed if you'll need any, but you have classified those links.. just in case ;)

That is the simplest form of reusing classes just by making the CSS targeting more specific. Changes can be made sitewide via the CSS alone.

Chaining CSS Classes
The other way, is chaining classes together, this involves HTML work and knowledge but some people find this theory easier.. (and yes I know not to name class names this way, but this for illustration only!)

.redtext {color: #f00;}
.bold {font-weight: bold;}
.allcaps {font-variant: small-caps;}

<p>Some Plain Text</p>
<p class="redtext">Some Red Text</p>
<p class="redtext bold">Some Red Bold Text</p>
<p class="redtext bold allcaps">Some Red Bold Text in small caps</p>

Now you see what looks like spaces in the class names (as mentioned regards the original problem) but it isn't - it's actually chaining the various class names together so you use the properties of each.

While the second method can have it's advantages in some cases, it's only advisable in hand-coding or WYSIWYG editing if you are editing the HTML via a HTML template page, as in only one change required to affect all the pages that that particular bit of HTML resides in, otherwise it kind of defeats the purpose of CSS specificity (the first method) and you may as well just put the CSS code itself inline if you're going to do it that way. This method does have very legitimate uses though, the main one is probably in Javascript or AJAX whereby the script dynamically chains an additional class onto an element say in order to toggle the display value for example.

Back to Basics:
Lastly there is one more way to think about it, ID's should only be used once per page for a very valid reason, but it needn't always be just because the element is a main structural element or for a CSS reason, although it will help your CSS and Javascript hooks - if you have to use them. An element with an ID can also be linked to via Fragment Identifier:


that's a bookmark, anchor, or jump link, it will take you to the foo page and scroll you to the element that has the ID of "bar" - the bit after the hash is identifying a fragment on that page if you like.. so that's the real reason you can only use one ID per page, you can never take the user to more then one destination on the same page - just like a "you are here" map, you can't be two places at once! ;)

When to Use ID's or Classes in CSS
It's not all about CSS really ;) - I find it easier to think about the page in plain text format and how I might like a table of contents for that page to work if there was one, most times it's intuitive as to when to use an ID that way, for everything else use a class. In fact if you're visiting any pages that have a TOC at the top (list of links) and on clicking a link you are taken to a bit of content further down the page - if you view the source you will either find the "name" attribute has been attached to the element you've just jumped to, or it will have an ID (or both as "name" was the older attribute and it took browsers a while to all support the ID attribute properly for this purpose)

Obviously in this case you might land up with more ID's than you need for CSS purposes, but you don't have to use them in your CSS yet... though they might avoid you having to add a class in the future should you need to hook a style or script onto those elements

See: Edward's visual example [seoconsultants.com] for more on this, the h2's all have ID's on them for Fragment IDentification purposes but those same h2's are all styled the same by virtue of simply styling the h2 via the CSS, but say at some point in the future he wanted to add a different icon as a background image to each of those h2's or toggle the display of them on click, he would have no need to amend any HTML, it would be good to go..

many ways to achieve the same thing, but the last back to basics HTML method should provide a good place to start. And once the ID's are properly in place you might actually find you need very few classes, or at least it should be more obvious where you might need them


 11:06 am on Jul 25, 2010 (gmt 0)

Thanks alot for that Suzy, i just read through it quickly then, but will study it at greater length later.

I have begun working on a simple site and have used the ID's for all the main structural elements (header, footer etc). I haven't used any classes as yet, i'm simply inserting images into individual div's to create button links and image content.

For each new page i reuse the basic structure from a template CSS form i created and rename the form for that particular page. This is something i've just decided to do, is it common (or even correct practice) to have separate CSS style sheets for each page of your site (if pages are structured differently)?


 12:26 pm on Jul 25, 2010 (gmt 0)

You're Welcome James.. :)

is it common (or even correct practice) to have separate CSS style sheets for each page of your site (if pages are structured differently)?

I'd say no it's not very common to do it this way and it actually kind of defeats the purpose of using an external CSS file, you might be as well to embed the CSS in the actual <head> of the page itself if you're doing it that way as you can keep it to an absolute minimum and it will avoid the external HTTP request.. it might also be a good way for you if you are just learning though to help you "learn as you go" you can always transfer "common ta all pages" bits of CSS to an external file as/when you learn what is and what is not common to each page

there's no "correct" way, BUT it's usually assumed that one stylesheet per site is enough. especially in the beginning, different if you then start to work with modularised CSS but for now I'd concentrate on trying to learn how CSS should work at it's simplest.

If your pages are structured separately you have the power with CSS Specificity to be able to make two pages look completely different from within the same CSS file - it's an extension of what has been said above about identifying structural elements.. you would add a unique ID to the <body> or even the <html> element of your structurally different pages (usually body will do, but if your page already uses a body ID you can add one to the the HTML element)

basically you want to IDentify the highest element in the Document tree which can uniquely identify an entire page - hence the <html> or <body> element - then use the specificity of that ID to isolate bits of CSS which are not common to all your pages, e.g. you can still pull the common fonts and colors etc. without having duplicate information in different sheets but you could have e.g. different column widths or background images depending on what page of the site you're on - there's a lot more you can do with this, but for now a very quick example of this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">

#content {background: #000; color: #fff; width: 900px;} /* applies to all pages in site */
#pageone #content {background: #00f; width: 500px;} /* applies only to pages with the pageone body ID */
#pagetwo #content {background: #f00; width: 300px;} /* applies only to pages with the pagetwo body ID */

<body id="pagetwo">
<div id="content">any div will do</div>

Pretend that CSS is actually in an external CSS file ;).. but for testing copy and paste this and change the body id value to "pageone"

now imagine that you have 20 pages that you would like the blue background on, and a further 30 pages you would like the red background on, would you rather have 30 different stylesheets to update each time you want to change red to pink, or would you rather have one change to make in the single CSS file?

You really can do an awful lot of "exception" styling changes using CSS Specificity, you can even have two columns on one page and 3 columns on another using this method, that's just an example of it's power, but like I said there's no wrong way, and I'd suggest you start with CSS in the head of the document, you will very quickly start to see these are lot more elements common to your pages than are different and you will automatically start to realise that the common stuff should be the "rule" and can be pulled from one single external stylesheet.. the differences should be the "exceptions" and any time there is an "exception" - a "top of the tree" ID will be able to take care of it. You can put the "exception" CSS into the master CSS file using specificity to overrule the "common" elements or you could even just embed it directly into the <head> of the page it applies (without using this top of the tree ID method) because embedded CSS will overrule the external CSS as per the Cascade, which might be easier for you to manage for a start?

Anyway fwiw, I would not advise having multiple copies of a stylesheet with just a few different bits in each one, as your learning curve progresses, which it will :), it could quite quickly become unmanageable.. a small tip I can give you is to write yourself
/* lots of comments */ in your master stylesheet to remind you why you are doing things, they will be invaluable as and when you need to go back in and change bits of code as your knowledge progresses

Good Luck!


 2:29 pm on Jul 25, 2010 (gmt 0)

That makes a lot of sense. I guess the problem is i'm anxious to start making a site and therefore i'm plowing on ahead with the tiny bit of knowledge i have to get me through it! It is deceiving working in this way because you feel as though you are making progress as the site begins to take shape (however simple that site is!) whilst at the same time knowing there are lots of things that are being missed.

I will have to spend some more time getting the hang of what you are describing, to use only one CSS sheet would indeed make things easier for me, i'm already getting a little confused with the few i've already created!

That's good advice to make comments within the code, is there a specific format comments need to be in so that they are not read as code!?


 2:39 pm on Jul 25, 2010 (gmt 0)

is there a specific format comments need to be in so that they are not read as code!?

Yep.. just like I typed the comments in my code sample above

put your comments in here
they can be multi line

*****************-------....... long line ***************
div {color: red;}

/* one line */

div {color: red;} /* inline */

as long as you start it with /* and end it with */ you can make it as subtle or as stand out as you like..


 2:41 pm on Jul 25, 2010 (gmt 0)

Ah, i think i may understand it a little better now. The CSS style sheet represents a kind of generic backbone to the site in that it contains the basic structure of what most of the site will be structured like.

Then, if a particular page has some exceptions to these rules, they are coded within the CSS style sheet to refer to the page specifically? When you refer embedding such code in the head of the page, do you mean the html of the page or the CSS sheet itself?

I'm sorry!


 3:19 pm on Jul 25, 2010 (gmt 0)

Ok, after playing around with it for a bit i think i finally get it.

The problem i had was that i had not assigned any of my pages a bodyID. So, then the exceptions to the CSS style sheet can be stated at the top of the html for the page which will override the CSS style sheet.

Is that correct?


 7:05 pm on Jul 26, 2010 (gmt 0)

@SuzyUk - Much Kudos to you! Those post's have answered questions for me that I have pondered but never really actioned before, especially the chaining of classes, curious though, does that validate?

@jamespowers - From what I know (which is not a lot ;)) the css you place directly into tags over rules that of the css that is stipulated in the css file - and I think that it doesn't get validated if you run it through the css validator, though I could be wrong there PHP is my strong suite, but I like to think I know my way around a css file :)

I kinda cheat with body attributes, I set them globally in the css so each page you see *automatically* has the desired style you want, though as it's global you can't change it - but for me, the fluidity/continuity of design is paramount.

Saying that though, I like the ability of a style changer within a website so that users can select a colour scheme of their choice (achieve this via cookie and setting that into a DB) and I think that this gives the personalization option for you when coding - but you need to keep an eye on who you name elements, but keep playing and see what you come up with. As SuzyUk states, this is achieved using multiple css files - depending on what scheme is selected for use by the user.



 7:51 pm on Jul 26, 2010 (gmt 0)

When you refer embedding such code in the head of the page, do you mean the html of the page or the CSS sheet itself?

So, then the exceptions to the CSS style sheet can be stated at the top of the html for the page which will override the CSS style sheet.

Yep, you got it :) There are 3 "natural" levels of CSS Specificity (The Cascade or the "C" in CSS if you like) which in themselves start to dictate which CSS rules will be more important, or which one wins..

This base level will trump even complex CSS selectors.. so for now the three levels that you really should know about are:
  • External stylesheet - will be read first
  • Embedded styles, those that are written within the <head><style> tags.. read second
  • Inline styles, those that are actually in the HTML attribute <p style="...">,p is the element, style is the attribute .. these are read last (these are the ones @MRb correctly points out will "trump" anything!)

the general rule of thumb is that the "nearer" the style is to the actual element it is affecting the more "in control" it is..
  • 1. the Inline style will always trump the other two
  • 2. the Embedded styles will trump the external sheet
  • 3. the External stylesheet will always come last and will usually run/cascade in the order it is written, but that's where specific selectors will start to become really important! - i.e. p {color: red;} will be overridden by #content p (color: blue;} no matter where the second appears in the external sheet .. but p {color: red;} will only be overridden by p {color:blue;} if the second appears later in the external stylesheet than the first does!

there is more but for now I think concentrating on the 3 levels and the order of the stylesheet is probably enough to be going on with.. and you've got it ;)

@MRb, glad it helped! though it sounds like you've got to grips with Cascade :)

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