Section 1: Overview
CSS is used to provide formatting for an HTML document.
If you put your CSS rules in an separate file, which I highly recommend, using CSS is a three step process:
- First, you define the format rules that you want to apply to your html.
- Second, you put a link in the HTML file to the CSS file.
- Finally, depending on the type of CSS selectors that you use, you may need to modify your html to apply the rule to it.
Section 2: HTML Example
Let's start with a simple example.
Assume that an ISU student set up a home page for practice in INFO 2220. Here it is:
The HTML code for the page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
</head>
<body>
<h1>Penelope</h1>
<img src="girl1.jpg" alt="Penelope Picture" />
<p>My name is Penelope and I am a Sophomore at Idaho State University.</p>
<p>I moved to Pocatello when I was three and always thought that I would get
out of town as soon as I graduated from Poky High, but when I had an opportunity
to attend ISU and major in Business Informatics I couldn't pass it up.</p>
<p>I want to get a job with Microsoft in Seattle when I graduate, and work with
another ISU INFO grad designing games.</p>
<p>So far I've only taken INFO 1110, Web Development: Essentials, but this semester
I am taking INFO 2220, Web Development: Client-Side Programming, so that I can learn
to make interactive web pages and learn more about the basics of programming. It was
kind of hard at first, but the more time I spend on programming the better I get! I
will also be taking these classes:</p>
<ul>
<li>Systems Architecture</li>
<li>Systems Analysis and Design</li>
<li>Database Design and Implementation</li>
<li>Networking</li>
<li>Information Assurance</li>
</ul>
<p>I'm so happy that I had the opportunity to attend ISU, because even though it costs
a lot to go to school, ISU is a lot cheaper than any of the alternatives that I looked
at, and the INFO program and the College of Business have really nice professors.</p>
</body>
</html>
Let's see if we can't "pretty it up" a bit.
Section 3: Basic CSS
Let me show you how some simple CSS changes the appearance of the HTML document.
We'll create a new document called test.css, and put our CSS rules in it.
We'll experiment first with changing the font and color of a paragraph.
p
{
font-family: Calibri, Arial, Helvetica, sans-serif;
color: blue;
}
The first rule above says that for all paragraphs, change the font to Calibri. If the users' browser doesn't have access to the Calibri font, then use the Arial font. If it cannot find Arial, use Helvetica. And if it can't find Helvetica, use whatever default is installed for the sans-serif font.
The second rule says to change the foreground color of paragraphs to blue.
Let's see how those changes affect Penelope's page:
Well big whoop! That doesn't look any different! What did we do wrong?
Remember that I told you that it was a two step process? We define our rules and then we link them to the HTML. We haven't linked anything yet!
Since the CSS rule above applies to all paragraphs, we don't have to modify individual HTML paragraph tags to apply the CSS rule.
However, I also mentioned that if you put your CSS in a separate file then you will have to link your two files together.
To tell the HTML file to use the formatting rules in the CSS file test.css, we need to add the following line to the head section of the HTML page:
<link href="test.css" rel="stylesheet" />
Now look at Penelope's page:
How come her name and the list of classes is still in black and uses the original font?
Look back at the CSS at the top of this section. We set it up so that the formatting rule only applies to the paragraph tag. The name at the top of the page is in an h1 tag, and the list of courses is in an unordered list tag! The CSS specifies that the formatting only applies to paragraphs, so the h1 and list remain unformatted.
This is a bit off subject, but what if we like how it looks and want to apply that format to rest of the document?
Notice that all of the tags in the visible part of an HTML document are inside the body tags. If we apply formatting to the body tag it will be applied to everything!
Let's edit our CSS a bit, and change the p selector to "body".
body
{
font-family: Calibri, Arial, Helvetica, sans-serif;
color: blue;
}
Now look at Penelope's page:
All the text is in the blue Calibri font!
Section 4: Selective CSS
What if we do not want every paragraph to look the same? Let's say Penelope wants her career goals to stand out. We'll have to create a special CSS selector for that.
Let's modify our CSS to include the special selector. Since it is being designed to be applied to a paragraph about her career, what can we call it?
body
{
font-family: Calibri, Arial, Helvetica, sans-serif;
color: blue;
}
p.career
{
font-weight: bold;
color: green;
}
The format rule that we added says that if a paragraph has the class called "career" then its font will be bold and green.
Let's look at Penelope's page again to see the effect of our changes:
Nope, nothing. What did we forget? This formatting rule does not apply to all paragraphs, but only to paragraphs associated with the class called "career".
To apply a CSS class to an HTML tag, you specify the "class" attribute for tag and set its value to the CSS class name, omitting the leading dot.
So, we have to modify our HTML code to tell it that the paragraph about her career should have the special formatting. We do that by adding a "class" attribute to the paragraph tag:
<p class="career">I want to get a job with Microsoft in Seattle when I graduate, and work with
another ISU CIS grad designing games.</p>
The page now looks correct:
The HTML code for the page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="test4.css" rel="stylesheet" />
</head>
<body>
<h1>Penelope</h1>
<img src="girl1.jpg" alt="Penelope Picture" />
<p>My name is Penelope and I am a Sophomore at Idaho State University.</p>
<p>I moved to Pocatello when I was three and always thought that I would get
out of town as soon as I graduated from Poky High, but when I had an opportunity
to attend ISU and major in Computer Information Systems I couldn't pass it up.</p>
<p class="career">I want to get a job with Microsoft in Seattle when I graduate, and work with
another ISU CIS grad designing games.</p>
<p>So far I've only taken CIS 1110, Web Development: Essentials, but this semester
I am taking CIS 1110, Web Development: Client-Side Programming, so that I can learn
to make interactive web pages and learn more about the basics of programming. It was
kind of hard at first, but the more time I spend on programming the better I get! I
will also be taking these classes:</p>
<ul>
<li>Systems Architecture</li>
<li>Systems Analysis and Design</li>
<li>Database Design and Implementation</li>
<li>Networking</li>
<li>Information Assurance</li>
</ul>
<p>I'm so happy that I had the opportunity to attend ISU, because even though it costs
a lot to go to school, ISU is a lot cheaper than any of the alternatives that I looked
at, and the CIS program and the College of Business have really nice professors.</p>
</body>
</html>
Because the formatting rule applies to a class, it could potentially be applied to more than one paragraph. While id selectors (such as #career) can be used only once, class selectors can be used multiple times.
Section 5: ID Selector
Here is a quick example of an ID selector. An ID selector is indicated in the CSS with a # sign.
body
{
font-family: Calibri, Arial, Helvetica, sans-serif;
color: blue;
}
p.career
{
font-weight: bold;
color: green;
}
#orange
{
color:orange;
background-color:black;
}
In the HTML you can apply an ID to one, and only one, tag using the "id" attribute.
<p>My name is Penelope and I am a Sophomore
at <span id="orange">Idaho State University</span>.</p>
While the result isn't exactly pretty, here is Penelope's page after this change is made.
Section 6: Summary
The previous examples used a class selector, a combined class and element selector, and an id selector.
Remember, we (1) define our CSS rules, (2) link the CSS file (if any) to the HTML file, and then (3) modify individual HTML tags to apply class selectors, id selectors, or combined class and element selectors.
If you define your rules but forget to link the CSS file to the HTML file, or if you define your rules, link the CSS file, but forget to modify individual HTML tags, your web page will not reflect the correct formatting. All three steps are critical!
And if you're curious about what the vivacious Penelope really looks like, here she is...
