Designing With CSS

Introduction to Cascading Style Sheets (CSS)

What is CSS?

CSS is a structure developed by the World Wide Web Consortium to style Web documents.

Why Use CSS?

There are a number of good reasons to use CSS with your HTML documents:

  • Separates form from content, making it easier to apply different styles to content. This means that the design is not a part of the actual information of the page, ultimately meaning less production time for you
  • Consolidates code - The style for a Web site can be controlled by one style sheet rather than throughout the site. This takes up less server space and means less maintenance.
  • Manage design for different platforms - different style sheets can be applied for screen, print, handhelds, etc.

Great, So Why Doesn't Everyone Use It?

CSS has been around since 1995, but browsers have been slow to implement CSS properly. Fortunately, almost all modern browsers now interpret CSS.

XHTML

Introduction

Before we delve into CSS, we need to review proper XHTML markup. XHTML stands for Xtensible Hypertext Markup Language and is basically the reformulation of HTML into XML.

Like any language, HTML has been evolving, Originally a simple markup language in the early 1990s, the introduction of Mosaic, the first browser to show graphics, forced HTML to evolve. Soon, everyone had a Web site, and before long, a battle between Netscape Navigator and Internet Explorer evolved. During the "browser wars," these different browsers begin supporting different HTML code to win over users. This, in turn, forced a lot of designers to bog down HTML pages with dual code in order to support both browsers.

In 1998, the Web Standards Project encouraged major browser manufacturers to agree to an HTML standard. That standard began as HTML 3.02. Soon came HTML 4.01. Today, HTML has officially been retired and XHTML 1.0 and 1.1 are the current versions (with 2.0 down the road).

What's this have to do with CSS? Well, you need to accurately write clean HTML to assure that your CSS works properly.

XHTML DOCTYPE

To start an XHTML document, you begin with an accurate DOCTYPE. The DOCTYPE is a "document type declaration" that comes at the top of your HTML page and declares what version of HTML you are writing to the browser. If an HTML page doesn't have a DOCTYPE, the page will still render, but the browser will go into what's called "Quirks" mode, where it tries to support whatever is thrown at it.

For the sake of these exercises, we'll be using an XHTML 1.0 Transitional DOCTYPE (Transitional meaning a more flexible version of HTML that will accept some HTML. There's also Strict and Frameset DOCTYPES.). Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If you're interested in learning more on DOCTYPES, visit this page on A List Apart.

Another required item in the page is the XML prolog and the character encoding (this specifies what language you're using in the page).

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

XHTML Markup

  1. All tags must be lowercase. This means <body>, not <BODY>. JavaScript calls need to be lowercase too, so onmouseover not onMouseOver. Attributes can be uppercase (Example: <img src="Picture.JPG" alt="My Pic" />).
  2. All attributes must be in quotes with space between the attributes. This means <img src="Picture.JPG" alt="My Pic" /> and not <img srcPicture.JPG alt=My Pic />
  3. All attributes require values. This means <input type="checkbox" name="true" checked="checked" />
  4. All img tags require an alt attribute. This can be alt="" but it must be present in the tag.
  5. Encode < and & Characters. This means & should be &amp; and < is &lt;
  6. All tags must close. So, <p> needs <p></p>. If the tag doesn't have an end tag, then it must close itself, so <img src="picture.gif" /> and <br />.
  7. No double dashes in HTML comments. So, <!-- Not Acceptable--Comment--> and <!-- Acceptable Comment-->.

Deprecated HTML

These tags are either no longer used or are on the way out. CSS should be used instead.

  • <b>
  • <i>
  • <u>
  • <blockquote>
  • <blink>
  • <font>
  • <frameset>
  • <embed>
  • <center>

If you're wondering if your HTML or XHTML page is up-to-snuff, you can always validate it using the W3C Validator.

CSS Syntax, Selectors, and Properties

Placement of Your CSS

There are three places you to place your CSS to work with HTML.

CSS Syntax

Here's the basic structure for CSS. The selector defines what HTML element to apply the rule to. The declaration defines the property to change, and the value of that property. Multiple properties can be assigned to a single selector. Also, remember that the closest rule to the content overrides previous rules.

selector

There are three different ways to declare your selectors. #id and .class selectors can be named whatever you want, but should be treated as variable names. Furthermore, named selectors shouldn't be named based on their properties, as their properties may change with time. With HTML tag selectors, you use an existing HTML tag.

  • #id Selectors. These selectors can only be used once in a page and are unique. #id selectors are usually used for the Web site interface, as interface elements usually occur only once. View an Example of an #id selector.
  • .class Selectors. Unlike #id selectors, .class selectors are used multiple times in a page. View an Example of a .class selector.

    An alternate version of a class is a pseudo class. An example of a pseudo class is a:link{}, which deals with hyperlinks. View Example
  • HTML Tag Selectors. The advantage of using tag selectors is that you don't need to define a name for the #id or .class--it's already there. View an Example of an HTML tag selector.

Grouping Selectors

You can group Selectors to eliminate redundancy, so:

h1{color:#ff0;}
h2{color:#ff0;}

can be

h1, h2{color:#ff0;}

True Cascading

The beauty of CSS, and what gives it the name "cascading" is its ability to apply a heirarchy of rules to HTML documents. For instance, when a .class is defined, it can be defined to work with only a particular element. So, we could say, p.myClass{...}, which means that .myClass will only work with the paragraph tag. View Example.

This works with #id selectors as well, as we could say div#myId{...}. As it's defined here, div#myId will only work with a <div> and can only be applied to 1 div on the page. View Example.

So with this structure in mind, you could do something like:

#col2 div div.tech strong{...}

which means:

  1. in a unique element named col2,
  2. if there's a div,
  3. if there's a div in a div named tech,
  4. and there's a strong tag, do these rules)

Hopefully, this gives you an idea of how specific you can make your rules.

CSS Layout and the Box Model

In the past (and sometimes still today!), Web designers used tables to create Web site structures. Tables were created just for what they're named for, tabular data. From the beginning, divs (short for divisions), were to be used for layout. Unfortunately, many browsers couldn't agree on the support of divs (if you remember, Netscape called divs "layers"), so in order to create a consistent design for all users, designers relied on tables.

Divs are independent of one another, unlike table cells, and while tables can and should be used with CSS (View Example), they should not be relied upon for layout.

The Box Model

Below is an example of the CSS box model. This illustration represents many of the properties of a div. Note that the padding and margins are invisible, and that the background-color is visible behind the padding. More documentation regarding the box model can be found on the W3C's box model page. Here's an example of the box model in action.

Unfortunately, as stated earlier, many browsers at first could not agree with which properties to support and how to support them. Microsoft Internet Explorer 5-5.5 has difficulty interpreting the padding and margins properly. While I won't get into CSS hacks/workarounds in this presentation, you can search Google for "box model hack." Perhaps the most famous box model hack is on Tantek's site.

box model

Positioning

There are four primary types of layout, static, relative, absolute, and fixed positioning. These four types of positioning are controlled by the position property. A fifth value, inherit, means that the positioning is based on the element's parent.

Static Positioning is the default positioning of HTML in a page. Elements are rendered and displayed in the browser in the order they are written. You can modify the layout of a page using display:inline, display:block, and display:none. View an example with displays. You can also modify the layout by applying floats. View an example on floats.

Relative Positioning is similar to static, except that you offset an element's position based on top, right, bottom, and left properties. The element remains in the flow of the document and may overlap other elements. View an Example.

Absolute positioning is where you explicitly define the position of a div according to an inverse cartesian coordinate system. They system's axis is dependent on the element's parent (which in most cases is the HTML's body, meaning 0,0 is at the upper-left corner of the browser). View an example.

Fixed Positioning has only recently been supported by certain browsers. Fixed is similar to absolute, except that the containing block is really a viewport itself. This method is often used to replace framesets and create headers and footers. I am not going to cover this, however there's a really good tutorial on fixed positioning at Web Reference.

 

Shorthand CSS Properties

If you're going to minimize the code to your site, you might as well go all the way. Here are a few tips towards shortening your CSS properties.

  • Zero Values - when a property is set to zero, you don't need to set it (unless you're overwriting an existing value). Also, you don't need to set a property value when using 0, which means you can do margin:0; instead of margin:0px; or margin:0pt.
  • Using a Web-safe color? Even though you don't need to use the Web-safe palette these days, If you're using a Web safe color you can abbreviate the hexidecimal value to 3 characters instead of 6. This means #996633 can be #963. Just take out every other character (yes, this is legal CSS).
  • Abbreviate Margin and Padding. Rather than this:

    margin-top: 10px;
    margin-bottom:10px;
    margin-left:5px;
    margin-right: 5px;


    You can do this:

    margin: 10px 5px 10px 5px; /* top, right, bottom, left */

    or even this:

    margin:10px 5px; /* top and bottom, left and right */
  • Abbreviate borders and fonts. You can set multiple properties for fonts and borders with these shorthand commands:

    font:12px/18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; /*font-size/line-height font-family*/

    border:5px solid #000; /*border width style color*/

Additional Resources

  1. Dreamweaver Reference - check out the reference panel or use the design panel to get yourself acquainted with all of the different CSS properties.
  2. A List Apart - a great zine on CSS tips and tricks. Also check out the book "Designing With Web Standards" by Jeffrey Zeldman.
  3. CSS and Dreamweaver - a tutorial provided by Macromedia
  4. http://glish.com/css/ - a good site for CSS layout
  5. http://www.csszengarden.com/ - An online project where designers reinvent an existing page using CSS.
  6. Any Eric Meyer Books
  7. Firefox Web Developer Extension by Chris Pedrick - A must-have tool for anyone working with XHTML
 
Presented by