Posts Tagged ‘id’

CSS divs and IDs

Monday, September 14th, 2009

Div tags are the basic page layout element we are going to use to design our Web site. Each div can be given a unique identifying code, so that it can easily be controlled by a CSS rule. When using ID to control divs, you should remember that only one div with a given ID should appear on each page. If you already have a div “#container” on a page, do not add another div with the same ID.

Selectors for divs with an ID are written beginning with a pound sign: #

#container

Once a div has a rule defining it’s size, placement, color, etc, additional layout elements can be placed inside the div – much like a picture or text box in InDesign.

A good rule of thumb when using divs is to minimize the number of divs used on the page. Order the divs in a logical manner (such as header, then navigation, then content, then footer) and then use CSS rules to control their placement and appearance.

CSS Review

Tuesday, October 14th, 2008

By way of review for everyone, here is a quick post going over the basics. These are the things you need to know when using style sheets.

1: Use an external style sheet. This file is going to be named just like any other web file, but with a .css extension. In theory, you will only need one .css file per Web site.

2: Minimize the number of divs you use. We all know the pain that is the Creighton CSS assignment. Break down your layout into a minimal number of divs, with a minimal amount of nesting. Create the divs to follow the flow of the page (container, navigation, sidebar, content, footer, etc). I recommend almost always using a #container div to surround your layout.

3. Give your divs IDs, not classes. Format your divs using IDs. Remember, classes are for small, nitpicky changes that can happen to any element on a page. Divs with IDs are all unique elements, and need their own rules.

4. IDs always start with “#” in your style sheet. A pound sign tells the browser that the rule is to be applied to the element with that ID. No pound sign, no formatting.

5. Classes always start with “.” in your style sheet. Again, the leading dot tells the browser the following is a class. Classes should be rare.

6. Redefined tags don’t have any leading character at all. You will need to redefine at least a few HTML tags in any site, specifically the body, a (including the pseudo-classes), and likely many p and heading (h1, h2, etc) tags.

7. If you want divs to be “side by side,” they will need to float. If you want two columns, both divs will likely need to be floated.

8. Spaces mean something. Don’t use spaces in the names of IDs or classes. 

#content p

In the above example, the space tells the browser that the rule will format any paragraph inside of the #content div.

9. Less is more. Try to work with a minimal set of divs and classes. This does not mean, however, that you will only have a few rules. Within those divs create as many text styles as you need by redefining paragraphs, headings and unordered lists (ul and li tags). This entire blog really only uses five divs.

10. Test your site in all browsers. Make sure you check your site in Safari, Firefox and Internet Explorer 6. IE6 is famous for breaking sites, and still, sadly, quite popular. This will require finding a Windows computer with that browser installed. One day, if all the planets align, I might be able to get a copy of Windows with IE6 in the Murphy lab.

Good luck. Be patient. This is not rocket science.