IPL Kidspace  




 You are here:    Home » KidSpace » Learning HTML

KidSpace Home

Ask an IPL Librarian

Librarians' Internet Index

Library Locator

Subjects

Reference
The World
Computers
Health & Nutrition
Reading Zone
Math & Science
Art & Music
Sports & Rec.
Fun Stuff

Features

Science Fair
Stately Knowledge
Learning HTML
Orca Search
Poison Prevention
Author Page
Culture Quest
Story Hour
Say Hello
U.S. Presidents

Valid XHTML 1.0 Transitional

Valid CSS!

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:

<p>Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>

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:

<p>Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff" id="lookhere">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>

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>
<p>Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff" id="lookhere">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
</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>
<p>Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff" id="lookhere">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
</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.

  1. The selector: p
    • The selector points to a certain type of HTML tag, which here are the paragraph tags or <p></p>.
  2. A property: color
  3. 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>
<link rel="stylesheet" type="text/css" href="exstyle1.css" />
</head>
<body class="prettycolor">
<p>Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff" id="lookhere">Woo hoo! I'm learning HTML!</p>
<p class="importantstuff">Woo hoo! I'm learning HTML!</p>
</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…? right arrow

Previous | Home | Next

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

Updated on 28 Nov 2006

What is the IPL?

The Internet Public Library is a public library for the world wide web.
Students from a consortium of colleges and universities with programs in information science develop and maintain the IPL!
Here are some of the partners in the IPL Consortium. A complete list is found on the IPL Consortium page.

The iSchool at Drexel Florida State University College of Information University of Illinois at Urbana-Champaign Graduate School of Library and Information Science Rutgers School of Communication and Information Studies

University of North Carolina at Chapel Hill School of Information and Library Science University of Pittsburgh School of Information Sciences Syracuse University School of Information The Information School - University Of Washington

The Internet Public Library is hosted by The iSchool at Drexel, College of Information Science and Technology,
with major support from the College of Information at Florida State University.

 
© 1995-2008 The Regents of the University of Michigan. All rights reserved.
© 2009, Drexel University, All Rights Reserved