Design Primer 4: CSS

This is the last part in our journey through web design basics. Congratulations for making it this far! This part will draw heavily on the first three parts, so it's definitely advisable to have read them first.

History of CSS

Not too long ago, there was no way to control the look of an entire web site (multiple web pages) from on place. That meant that if you wanted to change the look of the web site, you had to make the change on each and every page. What a pain! From this, the idea of Cascading Style Sheets (CSS) was born.

What Does CSS Do?

CSS allows you to specify the look of several web pages from, most powerfully, one location (a separate file alongside the HTML files).

Types of CSS Styles

CSS styles - a style is what you write to control how something appears on the web page - can be in three locations:

• External: Styles are in a separate file. This file can be used by multiple web pages
• Embedded: Styles are in the head of the web page. These only affect the web page whose head the styles are in
• Inline: Styles are in the body (content) of the web page. These only affect the content they enclose

What Does "Cascading" Refer To?

The reason they're "Cascading" is that CSS allows you to specify a web page's style from the three locations listed above. They "Cascade" since inline styles override embedded styles, which themselves override external styles.

It's important to realize that this only happens if two styles try to do different things to the same part of the page (otherwise the earlier style continues to specify the style for a given part of a web page).

This is a lot to get you're head around, but don't worry, it will make more sense once we go through the examples.

CSS Syntax

Styles are added to a web page with the following syntax (don't worry about adding these to Notepad yet; we will get to that in a bit):

For example, if we wanted to make the contents of a paragraph (<p>…</p>) red, we could write:

To add multiple styles to an element (here, a paragraph again), we separate each property: value pair with a semi-colon:

The above makes the contents of a paragraph red, in 10pt Arial font.

We can also use the same style for multiple elements, by separating each element with a comma (here, a paragraph and three headers):

The above makes paragraphs, and headers 1-3 red, in 10pt Arial font.

CSS Classes

But what if you don't want all your paragraphs to be red? We can use classes to differentiate which elements we want a style to apply to:

The .important after the p is the class. We can name a class anything we want. Once a class is added, only the elements (e.g. paragraphs) belonging to that class will be affected:

As you can see, to add a class to an HTML element (in this case the paragraph), we use the class="className" attribute.

Finally, we can have classes that can be linked to any HTML element by just writing the class with a period ( . ) in front (no HTML element specified):

We can use this class on as many HTML elements as we want (as long the HTML element supports the style; font-size is meaningless to an image):

Note that when we write the class as an attribute, we don't have the period ( . ) before it.

Adding CSS to a Web Page

So you're saying, "it's wonderful I've learned all this, but how do I put styles on my web page??" Lets get to that now. It differs slightly for each type of style (inline, embedded and external), so we'll go through each one.

There are hundreds of styles that can be applied to almost any HTML (e.g. text, tables, images, divs, etc.) on your web page. For the sake of simplicity, we'll concentrate only on the styles listed below (a list of the most common styles can be found in the Cascading Style Sheet (CSS) Quick Reference). Also, since we'll need the head of the page for some of the examples, we'll show the entire HTML code.

Style	Description	Values	Example
color	Sets the color	Word colors (red, yellow, blue, black, etc), or hexadecimal color values (e.g. #ffff00 [= yellow])	color: red
font-size	Sets the size of the font	Word sizes (xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller), or numeric (e.g. 50%, 10pt, 15px, 20em)	font-size: 20pt
text-align	Sets the alignment of the text	left, center, right, and justify	text-align: justify
background-color	Sets the background color for an element	Word colors (red, yellow, blue, black, etc), or hexadecimal color values (e.g. #ffff00 [= yellow])	background-color: yellow

Inline Styles

Inline styles go directly into the content in the body. They can be applied to almost any HTML on the web page. To start with, we'll apply a style to some simple text using the <span>…</span> tags. Note that these styles are used a little differently than we discussed above because the style itself is an attribute of the span tag.

Does this look familiar? It's almost identical to our example for the span tag from Part 3. Note that only the text within the <span>…</span> tags are affected by the style. Inline styles are not often used, as embedded and external styles give you much more flexibility.

Embedded Styles

Embedded styles go in the head of the page within <style>…</style> tags. It is good form to tell Internet Explorer what type of styles are in the <style>…</style> tags, so we add the attribute type="text/css" (don't worry about why it's written this way; it's just the standard way):

Wow that's ugly! But there are some important things to see in this example:

• We used both element-level styles (for the h1 and p) and class-level styles (.emphasize and .unique)
• The <span>…</span> tags allow us to add styles to a subset of content within an HTML element (we didn't make all the text in the paragraph large, only the text within the <span>…</span> tags)
• The .emphasize class was used multiple times. The beauty of this is that changing the style at the top of the page applies the style to all the text affected by the .emphasize class (this can save hours of hunting through the HTML!). The next example will demonstrate this
• Even though text in the <span>…</span> tags was given the class large, it was still blue. This is cascading in action (also known as "inheritance"). Inheritance means that if a style is set for an HTML element, it will apply unless specifically overridden. The style "closest" to the element takes precedence (inline styles override embedded styles, which override external styles). You can test this yourself by adding the highlighted code:

Now the text within the <span>…</span> tags is green (versus blue). The style of the span tag (.emphasize) took precedence over the style for the paragraph (color: blue), since the <span class="emphasize">...</span> tag was "closer" to the affected text than the <p> tag.

Hopefully that makes some sense. Only external styles are left, so keep up the good work!

External Styles

External Styles are styles contained in a separate file. These are the most powerful styles of all, as the same style can be used for all of the web pages. This means if you want to change the way something looks on your web site, you only need to change a style in one place and, voila! The change is seen on all your pages. Sounds good, huh? Let's see how it's done, starting with the web page we created for embedded styles (the embedded style sheet was removed and the new HTML is highlighted):

If you view this page, there is no CSS styling, as we haven't yet made the external CSS file. To let the web page know we want to use an external file to specify the style, we place an @import url("styles.css"); style within <style type="text/css">...</style> tags on the page. Don't worry too much about why this looks different from other styles, just know that the "styles.css" attribute is where the style sheet's file name goes.

.css File

External CSS files use the extension .css. They can be made in Notepad in the same way we've been making our web pages. Let's make it now - select File > New in Notepad and enter the following:

Now call it styles.css and save it in the same folder (C:\website) as your web page (web1.html). If you refresh your web page now, you will see the styles have been applied to the web page.

Neat, huh? The real power, as mentioned, is that you could add this external CSS file to as many web pages as you wanted (by adding the @import url("..."); style to each web page) - and make changes to all your web pages simultaneously from one place!

Note that if you are using an old browser, the @import url("..."); style may not work. Working around this problem is beyond the scope of this tutorial. In the end it is best to upgrade to a modern CSS-compliant browser!

That's it for the basics! You can now confidently strike out and start building web pages. Part 5 is a bonus: remember divs? We'll have some fun with them there.