Linda Baker's Web Design Tips & Tutorials

CSS: Cascading Style Sheets

Summary of Codes ~ More Info & Examples

CSS Basic Examples

Colors ~ Colors & Links ~ Background Image, Lists, Fonts ~ Format, Indent

Background Colors, Alignment ~ Image Float ~ 2 Image Float

Dallas without CSS ~ Dallas with CSS ~ Midcities

CSS Layout Examples

Web Design ~ Fantasia Farms ~ Fluid Centered ~ Horizontal Links ~ Column/Horizontal Links

Background ~ Background/Column ~ 2 Columns/Vertical Links ~ Nav Float Right

CSS is part of the "official standards" put out by the W3C. As the term Cascading Style Sheets implies, more than one style sheet can be used on the same document, with different levels of importance. If you define conflicting styles for the same HTML tag, the innermost definition--the one closest to the tag--wins.

CSS allows us to create a template for our page or site - saving hours of coding. For example, if you wish to change all your <h2>s to <h3>s, CSS allows you to change once (global change)... no hunting for all those <h2>s!

CSS goes beyond templates and also is used to create "footers" or "headers" for pages - sections that are consistent across your site. These are then linked to each page. Again, by making a change once in the master - all pages are updated globally.

Types of Style Sheets

Linked: The style sheet is created in a file by itself and is "linked" to each page. The extension given this style sheet is .css. Linksed style sheets allow you to perform global updates to your site.

Embedded: The style sheet is set up for a web page but doesn't go beyond that page.

Inline: The style sheet is contained within the web page itself, but refers to only a selected section of the page. For example - adding a different link color to one or a small number of links.

For each of these, you can create 3 different and distinct kinds of styles:

Custom Class (used many times on a page)
Redefined HTML tags
CSS selector styles (links and divisions - divisions only appear once on a page!)

Return to the Top

So how do style sheets work?

Say you want to create a page where each instance of <h3> text is green, italicized, and Arial. Without CSS, you have to write the following HTML every time you used <h3>:

**<h3> <em>This is a italic, arial H3 header.</em></h3>**

But CSS lets you specify this style for all <h3> tags in a single step by defining a selector:

h3 { font-family: arial; font-style: italic; }

The selector (in this case, the <h3> tag) is followed by the style definition, which outlines the style for that selector.

font-style: italic has the same effect as <em>

Once the style above is attached to the page, every <h3> tag will come out italic and Arial.

Back to the Top

How Does It Work - More Details...

There are four ways to combine styles with HTML. The two simplest ways are by defining styles in the head or the body of an HTML document. You can also create a separate style sheet and attach it to the HTML file in two different ways.

Defining Styles in the Head of the Document

**easiest for one page
**place the selectors and their style definitions inside comment tags nested within <STYLE> tags:

<head>
<style type="text/css">
     
</style>
</head>

<body>
   <h3>this is a italic, arial h3 header.</h3>
</body>

The type attribute of the <style> tag defines the type of style sheet being used--in this case, CSS. (The only other possibility is "text/javascript" for Netscape's proprietary JavaScript style sheets. In the future, other style sheet languages may be added.)

The comment tags nested inside the <style> tags ensure that the styles won't cause errors in older browsers. Any browser that doesn't support the <style> tag will simply ignore the information inside.

Defining Styles In-line

**for one page

**you can also define styles in the body of the document by adding the style attribute to an HTML tag. For instance, the following HTML code makes the first <H3> text (the one with the style attribute) green, italic, and Arial, but not the second:

<h3 style="font-family: arial; font-style: italic; ">this is a italic, arial h3 header.</h3>
<h3>this is an h3 header, but it's not italic, or arial.</h3>

In most cases, this method defeats the purpose of using style sheets as global templates.

Linking to an External Style Sheet

**for a website

**create a file called basic.css that contains just this text:

h3 { font-family: Arial; font-style: italic; }

**Next, start a new HTML document (call it basic.html), and add a <LINK> tag that calls the style sheet in the document's head:

The <LINK> tag tells the browser to find an external style sheet, that the style sheet is a CSS file, and that the name of that file is "basic.css". The file basic.css defines the styles in basic.html, so every <H3> tag you use later in the HTML document will have the green, italic, Arial style defined in basic.css:

<body>
<h3>this is a italic, arial h3 header.</h3>
</body>

Back to the Top

Combining Styles

Often, a combination of methods is the best way to apply styles. For instance, a linked style sheet can help you maintain a consistent look and feel throughout your Web site. But if you want a certain page to have additional styles, you can also include styles in the head of that particular HTML document. Or if you want just one section of a page to look different, you might use in-line styles with a <DIV> tag.

Define Styles

Whichever styles you use, you define them similarly. Give each selector a style definition using the following format:

h3 { font-family: Arial }

h3 is the selector (HTML tag)
font-family: Arial is its defined style

The definition is a combination of a property and its value, separated by a colon. Properties are the characteristics an element can have--such as font type, font size, or color--while values are specific traits those properties can have--such as Arial or red.

To include multiple properties in the same definition, simply separate them with semicolons:

h3 { font-family: Arial; font-style: italic; }

To make a style easier to read, you can stack the properties:

h3 { font-family: Arial;
font-style: italic; }

And to define more than one value for a single property, just add them on, separated by commas:

h3 { font-family: Arial, Helvetica, sans-serif;
font-style: italic; }

The font-family property in the code above offers the browser several values to choose from; the browser will go down the line until it finds a font face it recognizes.

Any HTML tag can be a selector, but sometimes you want to be more specific in your style definitions. For example, suppose you have a table with many rows, and you want to format the rows four different ways. Using the <TR> tag as your selector limits you to one style definition, which would make all the rows look alike. This is where classes and IDs come in handy. Once you define a class or ID, you can attach it to any HTML tag within the document to apply style, without limiting the tag itself to a particular style.

Define a class by giving it a name (always preceded by a period)and adding the standard style definition of properties and values inside curly brackets:

.periwinkle { color: #6699ff; }

Once the style sheet containing the class is applied to the webpage, you can use the class within any HTML tag in the page:

<p class="periwinkle">this is periwinkle text</p>

This is much more versatile than using the <p> tag as the selector, which would make every instance of strong text periwinkle.

Back to the Top

Grouping Selectors

Group selectors that share styles to reduce the size and redundancy of a style sheet. Separate them with commas:

h1, strong em, td { font-family: Arial; color: blue; }

Now all the tags (<h1>, <em> text within a <strong> tag, and<td>) will use the same style of formatting (blue, Arial text). Of course, that's in addition to what they retain from their original HTML definition; for example, <h1> retains its size, and <strong> retains its boldness. And text that isn't surrounded by any of these tags is unaffected by the style.

If you want to give one of these selectors additional formatting, define it again:

h1, strong em, td { font-family: Arial; color: blue }
h1 { font-style: italic }

Here, all these tags will be in blue Arial text, but <H1> will also be italic.

Using <a> Pseudoclasses

Pseudoclasses can extend CSS to include properties of tags that aren't part of the HTML specification but that are supported by the browsers. For instance, the <a> tag does not have link, active, or visited attributes, but the browsers support different colors for links depending on their state.

Back to the Top

Fonts

Fonts can be fun but tricky. Not all computers have the same set of fonts installed on them! To confuse us even more, PC and Macs may use different names for the same font. Choose carefully and only use fonts that are in general use.

It is generally accepted today that CSS should be used instead of font codes which were common under previous HTML standards.

To create a look of harmony, don't use more than two different font faces on your page.

Do use contrasting font faces to call attention to or highlight text.

Not all computers come installed with the same fonts:

Commonly Installed Fonts on the PC

Times New Roman
Courier New
Arial
Comic Sans Ms
Verdana
Georgia
Trebuchet MS
Impact

Commonly Installed Fonts on the Mac

New York (Times)
Courier
Geneva (Helvetica)

Fonts without "tails" (sans serif) are easiest to read from a computer screen.

Sans serif - Aria, Verdana, Geneva
Serif - Times New Roman, New York, Georgia
Monospaced - Courier

Always mention both Arial & Geneva so the font code will work on both PCs and Macintosh.

NOTE: PC's and Macintosh's display type at different sizes. Mac sizes are generally smaller.

The font color default is black.

Use the font colors blue and magenta sparingly. It could confuse users into thinking they are looking at a hyperlink (which defaults to the color blue and magenta).

It is recommended that you use the hexidecimal colors rather than the color words - we'll talk about this a bit more when we cover COLOR.

Return to the Top

Additional Information:

CSS Examples:

Back to the Top