Cascading Style Sheets (CSS) Tutorial

Created by Judy Jacobs Miller
Comments to jumiller@nvcc.edu
Last updated January 19, 2010

1. Getting Started
2. Ways to apply styles
   • Inline styles
   • Embedded styles
   • External styles
3. Selectors
   • Tag selectors
   • Class selectors
   • Id selectors
   • Pseudo-class selectors
4. Summary

Getting Started

Before you start styling a website, you have to first have a website to style. You've made a website already, right? If not, see my XHTML tutorial about how to made a website using XHTML.

CSS stands for cascading style sheets. Style sheets add, well, style to a website. There are lots of different things you can do with styling, such as adding a background-color, changing the font color, making the font 18 pixels, putting a dotted border around a heading, you get the idea. There are literally hundreds of different things you can do with CSS. We're not going to talk about them all in this tutorial. Here's a reference, you can just look around for yourself: http://www.w3schools.com/css/css_reference.asp.

While there are lots of different styles you can do, there are three different ways you can apply those styles:

• inline
• embedded (also called internal)
• external

Inline Styles

Inline styling is placed directly in the XHTML document, and is used to style one particular tag, like this:

The above inline style gives the first level one heading a background color of pink. Try it. It looks weird, but you get the point. An inline style affects one, and only, one tag. The above code makes the first level one heading have a pink background, but the second level one heading does not.

What are those funny numbers that change the color? They're the hexadecimal representation of the amount of red, green and blue that make up the color. You can find a list at http://www.devguru.com/Technologies/html/quickref/color_chart.html or http://www.visibone.com/colorlab/.

You can take any tag and apply styling. If you want to make a paragraph have a red Arial font that is 18 pixels high, it's like this:

<p style="color: red; font-family: Arial; font-size: 18px">Hello</p>

If you want to make a level two heading have a red background, white font 24 pixels high, and be aligned to the center it's like this:

<h2 style="text-align: center; color: #FFFFFF; background-color: #FF0000; font-size: 24px">Awesome</h2>

Notice you can use the name of a color, like red or white, rather than the hexidecimal value, for the more common colors. But you'll have a greater selection of colors and more predictability by using hexidecimal values.

Do you like to style? You can find many more style properties and values at http://www.w3schools.com/css/css_reference.asp. Here are a few of the more common properties and values:

Embedded Styles

Embedded styling is a little different. Embedded styling is also done in the XTHML document, but is placed in the head of the document, rather than the body, like this:

The above code says make every level two heading in the document appear in red text, and make every paragraph on the page appear in blue text with a Verdana style font.

Embedded styles are convenient if you want several tags on your page to appear the same. If you use inline and embedded styles for the same tag, the inline style will take precedence. For example, you could use embedded CSS to make every paragraph appear blue (as we did above), then use an inline style to make just one paragraph appear green.

Here's another example of embedded styling. We style the table tag (which creates the table) and the td tag (which is used to create each cell). Each cell appears with a solid pink border, and each cell has 10 pixels of padding. (Cell padding is the space between the contents of the cell and the cell border.) This would take alot of code were we to do it using inline styling; we'd have to put the same code in every td tag. With embedded styling, we just specify the styling for the the td tag once, in the head of the document.

External Styles

External styling is by far the most powerful of the three types of CSS, and is also the easiest to use when you're styling a website with lots of pages. With external CSS, you don't put the CSS styling in the html document; you pull it out and put it in another document that has a .css extension. Each html page gets "linked" up to the external css page. This way, you can create one CSS document which styles hundreds of html pages. It's alot easier to code, and also alot easier to maintain. For example, if you decide to change the color of all level three headings in your site, you can do it with one new line of code.

Here's how to create an external style sheet. Let's call it crazy_styles.css. Notice there is no <style> tag. Each property is followed by a colon. Each value is followed by a semi-colon. A tag can have as many properties as you'd like.

Here's how you'd link up an html page to the external style sheet called crazy_styles.css. Notice the <link> tag goes in the head of the document, after the <title> tag. Let's call this html page birds.html.

In order for birds.html and crazy_styles.css to link up properly, they must be in the same directory. If they are in different directories, you will need to change the link coding to reflect the correct relative path to crazy_styles.css.

Here are a few examples of how birds.html changes its appearance with different style sheets attached. The html code for each of the below files is the same. The only thing that has changed is the style sheet it is linked up with.

• birds.html
• birds_2.html
• birds_3.html
• birds_4.html

These examples show just a few of the many different styles you can apply to a web page. When you link up an external style sheet to all of the pages in a website, it gives the site a uniform look and feel, while making the styling easier to update and maintain.

We've just learned three different ways to apply styles: inline, embedded and external. You've probably figured out I like using an external style sheet the best, for its power, its organization, its maintainability, and its tendancy to promote good web design. There are actually four different kinds of selectors you can style:

• tags
• classes
• ids
• pseudo-classes

Tag Selectors

The first type of selector is an html tag, like <p> or <body> or <h1> or whatever. This is easy, we've been doing it since the start of this CSS tutorial. You take an html tag and say how you want it to look. Review the stuff ew've just done, if needed, for a few examples. We have styled tags using the inline, embedded and external methods of application.

Class Selectors

Styling using classes is a little different than styling tags, but the same basic techniques apply. A class is a collection of styles that you want to apply together. For example, if you are creating a site about aliens, everytime the word "martian" or "kryptonian" appears, you want it to display in font that is 28px green italics. Here's how you'd create the class named alien:

The above code could be placed in either an external style sheet or embedded in the head of an html document. But you know me, I much prefer an external style sheet. That way you can use the class in any of your html pages. Put your classes in the same external style sheet as your other CSS code.

Once you've created a class, it doesn't do anything until you've applied it. You apply the class in the html page, like this:

The <span> tag is a special html tag used to apply styles to inline elements. Use the span tag to apply a style when there is no other tag that surrounds the text you want to apply the style to. You can apply a class to any tag, not just the <span> tag. So you could apply the alien class to a p tag, to make one particular paragraph appear in green italics. Like this: <p class="alien"> Of course, if you wanted all of the paragraphs in your site to be green italics, you would be better off styling the p tag.

Id Selectors

An id is sort of like a class, but it can only be applied only once to a particular html page. For example, if you plan to have a banner, a sidebar, a main content area, and a footer on every page, you might have ids called banner, sidebar, content, and footer. Here is how you might create an id named sidebar:

Ids are often applied to html code using the <div> tag. A div tag is a block level element, and is commonly used to divide your page into logical chunks for layout purposes. To create a div, you wrap the div around a chunk of code. For example, to give a portion of your code an id of "sidebar", you do this:

Ids are very useful for layout, because you can change the entire layout of your page simply by changing the css style sheet. Therefore, you can have different css layouts for different media: browser, print, handheld device, etc. We're not going to learn how to do layouts using ids and divs in this brief introductory css tutorial. But remember that ids can only be used once per html page, whereas classes can be used multiple times on the page.

Pseudo-Class Selectors

Pseudo-classes are used primarily for styling links. Here is an example of how you'd write CSS code for pseudo-classes:

The a:link code changes the properties of an unvisited link. The a:visited code changes the properties of a visited link. The a:hover code changes the properties of a link over which the user's mouse is hovering. Put the hover pseduo-class after the link and visited pseudo-classes, or it might not work. How long a link remains "visited" depends upon the user's browser history settings. (You can clear your browser history cache and refresh the page to make all of the links once again "unvisited.")

Summary

In this little CSS tutorial, we've learned four ways to create styles: tags, classes, ids and pseudo-selectors. We've also learned three ways to apply the styles we've created: inline, embedded and external.

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License.