Cascading Style Sheets: A Primer
Computing Resources >> Instruction >> Tutorials >> Web Development >> CSS 

What is CSS?

Style vs. Markup

Syntax & Rules

Writing a Style Sheet

Putting It All Together

CSS Resources

Evaluate this Tutorial

 

Methods of Incorporating Style Sheets

There are three ways to incorparate a style sheet into your HTML document: using inline style rules, using an embedded style sheet, or linking HTML document to an external style sheet. Let's take a look at how these different methods work.

Inline style rules

Using inline style rules is perhaps the easiest place to begin experimenting with CSS. Let's say that we want to change the color, size, styling (i.e. we want to underline a string of text) of a single paragraph using the <p> tag.

We write this HTML markup:
<p style="text: 20px; color: blue; text-decoration: underline;">
And it would render like this:
This is blue text at 20 pixels in height and it's underlined

So all we did there was put a few CSS style rules within a line of HTML markup. Remember what we said earlier about CSS declarations? You need to separate each one by a semi-colon, which we have done here. And, when using inline style rules, you must enclose the CSS rule within double quotes. In general, this undermines the real purpose of having a style sheet in the first place because this is not really any different from using HTML attributes to achieve the same result. But like I said before, it is a very good place to start and experiment with CSS properties.

Embedded Style Sheets

Another way to incorporate a CSS style sheet into your document is to embed it in the header portion of your HTML markup. Again, much like inline style rules, this doesn't really use CSS the way it was intended. For pedagogical purposes, though, it is also a great way to experiment. Let's take a look at how we do this.

You should already know that every HTML document should begin in a fashion similar to this:

<html>
      <head>
         <title>title goes here</title>
      </head>
             <body>
             Content of page goes here...blah, blah, blah.

 

To embed a style sheet, you must write your style rules within the head portion of the HTML document. Let's just do the same thing we did in the last example, but instead of using an inline style rule, we will embed the style within the head of the HTML file itself. Like so:

<html>
  <head>
     <title>title goes here</title>
  <style type="text/css">
  p {text: 20px; color: blue; text-decoration: underline;}
  </style>
  </head>
     <body> 
<p>And again, blue text, 20 pixels tall, underlined.</p>
    

In this case, we used the <p> tag as a CSS selector. This means that every <p> tag within this HTML document would render text in blue, 20 pixels high, and underline it. If that's what you want, then that's easy enough and you only have to write this one rule. That really saves time. But, if you only want one paragraph to render this way, that's not necessarily ideal, now is it? How would you fix that? You could use a class selector, perhaps one called .bluetext. Whenever you had a <p> tag and wanted the text blue, you'd encode it by writing (in the HTML code) <p> class="bluetext". It'll make more sense later. For now, we're still concerned with how to use the style sheet itself, not how to write specific rules.

You should pay attention to the syntax in this example. If you're going to embed your style sheet, you must begin the CSS portion of the head with <style type="text/css"> and close that <style> declaration as well. Within those tags, you write a CSS rule beginning with the selector (which, in this case was the <p> tag). Following the selector in curly braces is the actual declaration (block), where declarations are separated by semi-colons. If any part of the syntax is broken, just like anything else, it won't work. Watch for typos!

The third (and most common) method of incorporating a style sheet is to link the style sheet (which will be a separate file with a .css file extension) to the HTML doucment. This method utilizes CSS the way it was intended, by separating style from content. To do this, you can use any text editor, write your CSS rules, save it as a .css document, and link it to your HTML page. So how exactly does that work? Let's begin with how you link it. Then we'll look at how to write the CSS file itself.

Linked (external) style sheets

You'll remember that to embed a CSS style sheet into your HTML document, you write the CSS rules in the <head> tag of your document. Similarly, you will link your CSS file to your HTML document within the <head> as well. Using the same style rule as above, let's take a look at how we would link to a style sheet:

<html>
<head>
<title>title goes here</title>
<link href="filename.css" rel="stylesheet" type="text/css">
</head>
<body>
Content of page goes here once more

A little explanation of the <link> tag is in order. First, the href is just a hypertext reference attribute, just as you would use it to link to another HTML page. The rel shows how the file relates to the HTML document (technically, "rel" stands for relationship). In this case, filename.css is related to the HTML document in that it is its governing style sheet. The type attribute simply states that it is text which adheres to CSS syntax.

That's great, but how do we write the stylesheet file (the .css file)? Well, this is incredibly simple. In any text editor, perhaps Notepad on the PC (or BBTextEdit on the Mac), you would write one line to govern the <p> (just as we did in the previous two examples). The content of the file would be as follows:

p {text: 20px; color: blue; text-decoration: underline;}

Look familiar? A CSS rule in an external style sheet is written in the same manner as an embedded style sheet. The difference is that the style rules are not in the HTML document at all. When you save any CSS file, you simply give it a name and save it with a .css extension. Obviously, when you link to the CSS file in the header portion of your HTML file, you need to supply the correct filename and path. Now that your style sheet is saved and linked to your document, all <p> tags will be rendered in blue underlined text at 20 pixels in height.

So now that we have a good understanding of how these style sheets can be utilized, let's write from start to finish!

next section >

 

Watch the video
screenshot
choose format/speed
real media dial-up | broadband

© 2003 Chad Hutchens | iSchool | UT Austin | webmaster