The CSS ID

Division tags rarely stand alone.  Contemporary HTML documents employ a series of divs that represent major areas of the page or template.  Generally, a well-designed but simple webpage will have between four to seven division tags and more complex sites employ dozens in a single page. 

The method used to create multiple box models (division tag designs) is using a CSS ID.  This, like a CSS class, allows the identification of an individual tag that can be assigned unique attributes.  Here are some common div IDs:

These names are not mandated by the W3C (the governing board of Web standards), these are simply commonly used ID names.  You can create your own reference names that do not replicate XHTML tags or have spaces.  Another important rule about IDs is that an individual ID may only be referred to once per page.

The following is the method for introducing an ID in CSS:

#header {
width: 770px;
height: 70px;
background-color: #666;
border: 1px #ff0 solid;
}

And, like a CSS class, we refer to the ID as an attribute in the HTML tag:

<div id=“header">
<img src=“sitelogo.png" />
</div>

For today, we will make three divs: a header (like above), a content div and a footer.  These three elements will stack atop each other and appear to be part of a uniform design, assuming our three divs are composed following these simple rules:

    1. All three must be the same width.
    2. If left or right padding or margins are used, it must be used consistently in all divisions.
    3. All three must have the same background color, border styles.
    4. While a height attribute is optional on the header and footer, it is totally unnecessary on the content div.
    5. All three must not float at all or all float in the same direction.

HTML

Starting at the body tag in this example, the CSS ID is indicated as an attribute within the applicable tag. We primarily use this for DIV elements. Use the HTML template, if desired.

<body>
<div id="header">
<img src="logo.gif" />
</div>
<div id="content">
<h1>My DIV page</h1>
<p>Insert lorem ipsum or story content here</p>
<p>More paragraph stuff here</p>
</div>
<div id="footer">
&copy; 2011 John Doe
</div>
</body>
</html>

CSS

IDs are indicated in CSS with a hashmark, followed by a single-word ID name that references its function. For example:

#header {
width: 900px;
border: #ccc solid 1px;
margin: 5px;
padding: 20px;
background-color: #eee;
}

#content {
width: 900px;
border: #ccc solid 1px;
margin: 5px;
padding: 20px;
background-color: #eee;
}

#footer {
width: 900px;
border: #ccc solid 1px;
margin: 5px;
padding: 20px;
background-color: #eee;
}

Additional comments

You will notice a "&copy;" in the footer.  This, as you likely surmised, is the HTML character code for the copyright sign (©). There is a list of these linked from week four of the online schedule.

jour 355

weekly schedule

  1. Internet & Web / HTML
    Readings: Get books
  2. Bits & bytes / HTML / Embedding / Code
    Readings: Briggs ch. 1
  3. Images / Exercise 2
    Readings: Briggs ch. 2
  4. Exam 1 / CSS Intro / Colors
    Readings: Briggs ch. 3
  5. Divisions / Web typography / Photoshop text
    Readings: Briggs ch. 4
  6. CSS ID / Project one guide
    Readings: Briggs ch. 5
  7. Exam 2 / Uploading / Backgrounds
    Readings: Briggs ch. 6
  8. Project one due / Evaluation guide
    Readings: Briggs ch. 7
  9. Spring Break
  10. Search / Project eval / Online advertising
    Readings: Briggs ch. 8
  11. Standards / Audio / Backgrounds
    Readings: Briggs ch. 9
  12. Exam 3
    Readings: Briggs ch. 10
  13. CSS3 / Usability / Lightbox
    Readings: Briggs ch. 11
  14. Project editing
    Readings: TBD
  15. Material review / Exam 4
  16. Final project
  17. Final project due

Matthew Blake    Department of Journalism    CSU-Chico   
mdblake@csuchico.edu    (530) 898-3608