ipl Learning HTML | Internet Public Library

Internal and External Style Sheets

So far, I’ve only been using CSS through the style attribute, which is also known as inline styles, but inline styles don’t separate content and style in a website. That’s why internal and external style sheets are so important.

First, let’s learn about two more very important HTML tag attributes: class="" and id="".

The class attribute tells the internet browser that an HTML tag belongs to a certain group. Here’s an example of what it looks like:

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

The last three paragraph tags are all part of the "importantstuff" class. "importantstuff" is just a name I made up. You can make up whatever name you want to put inside the quotations marks for class and id attributes.

The id attribute should only be used in one tag on your HTML page, so that whatever is in that one tag look different. Here’s an example of what it looks like:

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Again, I made up the name "lookhere".

Now our HTML document is ready for an internal style sheet.

To create an internal style sheet, you need to learn about another pair of HTML tags, the style tags or <style></style>. They go inside the <head></head> tags at the top of your HTML file, like so.

<html>

<head>

<title>Learning HTML</title>

<style>

</style>

</head>

<body>

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

</body>

</html>

Inside the style tags, FINALLY I will put in the CSS.

<html>

<head>

<title>Learning HTML</title>

<style>

p { color: blue; }

.importantstuff { font-size: 20px; }

#lookhere { font-size: 28px; text-align: center; color: green; }

</style>

</head>

<body>

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

</body>

</html>

Here’s what it look like:

Let’s look at the internal style sheet a little more closely.

p { color: blue; }

.importantstuff { font-size: 20px; }

#lookhere { font-size: 28px; text-align: center; color: green; }

The first line of the internal style sheet has 3 parts. The first one is new, but you already know the other two.

The selector: p
- The selector points to a certain type of HTML tag, which here are the paragraph tags or .
A property: color
A value: blue

Because I indicated the paragraph tag in my selector, that means that this style, color: blue;, gets applied to every paragraph tag in my document.

The second line of the internal style sheet also has these same three parts, but I left the HTML tag name out of the first part, the selector.

.importantstuff { font-size: 20px; }

Instead, I started the selector with a period or . to indicate that a class name is going to be given, and then I put in the class name, importantstuff.

Now, every HTML tag with the class name of importantstuff has this style, font-size: 20px;, applied to it.

The third line of the internal style sheet again has the same three parts, but this time I started the selector with a pound sign or # to indicate that an id name is going to be given. Then I put in the id name, #lookhere

#lookhere { font-size: 28px; text-align: center; color: green; }

Now, the HTML tag with the id name of lookhere has this style, font-size: 28px; text-align: center; color: green; , applied to it.

You’ll notice that I added three properties and values to this line of the style sheet. You can add as many properties and values into your selector as you want. That doesn’t mean they will all work. CSS can be TRICKY. Some CSS properties and values will only seem to work with certain HTML tags or even in certain internet browsers.

I could also be more specific in the naming of my selectors in my internal style sheet.

p { color: blue; }

p.importantstuff { font-size: 20px; }

p.importantstuff#lookhere { font-size: 28px; text-align: center; color: green; }

Now, the second line will only apply its style to HTML paragraph tags with the class name “importantstuff”, and the third line will only apply its style to the one HTML paragraph tag with the class name “importantstuff” and the id name “lookhere”.

I STILL haven’t fully separated content from style however. External style sheets will let me do that. To use an external style sheet, I am going to slightly rewrite my HTML code and replace the style tags and internal style sheet with a link tag:

<html>

<head>

<title>Learning HTML</title>

</head>

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

Woo hoo! I’m learning HTML!

</body>

</html>

Instead of the style tags, I am now using a link tag to point an external style sheet. The href attribute, which you’ve seen in the hypertext links, in this link tag points to a file or document that is separate from my HTML file, just like background.jpg picture I used. I am going to call this document exstyle1.css. The rel and type attributes in the link tag are needed to tell internet browsers that the file this document is linked to is a stylesheet.

Also, I added a class name to my HTML body tag so that I can give the body of my document a background color.

To make a style sheet, open up any simple text editor. All PCs have the Notepad or Wordpad programs on them. All Macs have the TextEdit program. Any of those will work. Then save your document under whatever name you want EXCEPT that you must have it end in .css. Also, wherever you have your HTML files stored on your computer or your school’s computers or servers, you MUST save this CSS document in the same file folder.

Now, I put the following CSS in my external style sheet.

body { background-color: yellow; }

p { color: white; }

p.importantstuff { font-size: 1.5em; text-align: center; }

p.importantstuff#lookhere { font-size: 2em; text-align: right; color: blue; }

Then I save it as exstyle1.css in the same folder where my HTML files are. Here’s the result!

Whew! That may seem like a lot of work, but now, I can keep using this external style sheet if I want to apply the same styles to another HTML file. I just need to use the same link tag as I used above. Then, whenever I change the external style sheet, the changes will cascade down to all the files that link to my external style sheet!

You also can use external style sheets, internal style sheets, and inline styles all at once if you want, although it may get tricky to keep track of all of that.

Could it be…?

Previous | Home | Next

This resource originally created by Deborah Dunk.
Revised and edited by Michael Galloway in 2005 & in 2006.