Introduction to Cascading Style Sheets (CSS)
Contents
Introduction
This topic discusses the methods of adding style to your HTML documents. As with many of the topics that we're covering in this class, there is a lot to learn about CSS, and it can take a long time to learn it well. I don't expect everyone to become CSS experts overnight. We could spend the entire semester learning only CSS, and we would still run out of time to learn everything about CSS. Even so, learning CSS is an essential part of being a web developer, at least if you want your web content to look attractive. Web documents without CSS tend to look boring. But there's another reason we're going to learn CSS: CSS impacts accessibility. CSS is powerful enough to make a document more accessible. It's also powerful enough to ruin a document's accessibility. We'll talk about ways to use CSS wisely.
The Web Developer Toolbar
Before we go too far, I want to introduce you to a tool that will make your life as a web developer much easier. It's the Web Developer Toolbar developed by Chris Pederick. This is an extension available for the Firefox web browser (it won't work in Internet Explorer). Some of you may already have it installed. If so, skip to the next section.
To install the Web Developer Toolbar:
- First install the Firefox browser, if you haven't already, available at www.mozilla.com.
- Start the Firefox browser and go to https://addons.mozilla.org/firefox/60/
- Click on "Install now."
- You should see a window pop up.
Click
on "install now" in that window. - Close the popup window.
- Restart Firefox
Note: You can install other extensions for the Firefox browser through this same web site, or by going to the Firefox menu and selecting Tools > Extensions, then clicking on "Get more extensions."
Turning Off Styles
After restarting Firefox, the toolbar should appear. This is a powerful tool. I won't get into all the details in this topic, but one of the features that is useful to this topic is the ability to quickly turn off styles. You can do this with the keyboard shortcut Shift+Ctrl+S, or by going to CSS > Disable Styles > All Styles.
Getting Excited about CSS
Go to the CSS Zen Garden site at http://www.csszengarden.com/. This site was created as a showcase for the power of CSS as a design tool. The idea behind the site is simple: create one HTML page and allow other people to create styles for it. The home page of the CSS Zen Garden looks like this:
When you turn off the CSS styles, you'll see the underlying HTML structure in the document. To turn off CSS styles using the Web Developer Toolbar in Firefox, use the keyboard shortcut Shift+Ctrl+S or use the menu system: CSS > Disable Styles > All Styles, as mentioned previously. You can also use the Opera browser (www.opera.com), which allows you to turn off styles quickly by clicking on the "User Mode" icon. Or you can use the link provided in the text on the web page itself. The paragraph right below the CSS Zen Garden site title, on the left of the screen near the lily pad, contains a link to view the sample HTML file. Without styles, the page looks like this:
You can toggle between the plain HTML and the styles view to see the dramatic effect that the styles have on this otherwise boring web page.
Many designers and artists have created their own graphics and styles for this web page. You can view their efforts by clicking on the links under the heading which says "Select a design." Here are a few of the many designs:
Believe it or not, all of these designs contain the exact same HTML. The styles have changed, but the HTML hasn't changed at all. If you don't believe me, look for the link that says "Download the sample HTML file and CSS file" and click on the HTML file. It may take you a moment to find that link, because it's likely in an entirely different place this time, due to the different styles that have been applied. If you compare the HTML file here to the one on the previous page you'll find that it's exactly the same.
Keep going through the list of designs. Explore this site. Find designs you really like. Find designs you don't like. There is a wide enough variety here to keep you busy for hours.
Of course, in order to create sites of this caliber, you have to know a thing or two about graphic design. These people are artists. They're professionals. They know what they're doing, and they're showing off. If you have the artistic skills to do this, great! If you don't, that's ok too. At the very least I want you to get a feel for the potential of CSS.
Viewing the CSS of Existing Sites
You can view the CSS (or in other words, the style definitions) of any site on the web. An easy way to do this is with the Web Developers Toolbar. Go to CSS > View CSS or CSS > Edit CSS. Both of these methods will show you the styles for that particular page.
Note: The "Edit CSS" option has the additional advantage of allowing you to edit the styles and see how your edits affect the design. In case your curious: you are the only one who can see your edits. When you play around with the styles, it does not affect the real web site. When you refresh the page, all of your edits disappear.
CSS Basics
If you've never seen styles before, you're likely to be a bit confused when you look at them. It looks like strange computer code, because that's what it is, but you'll understand it a little better by the time that we're done. I'll give you a quick example that will hopefully help demystify things a little bit. Here is an example of a simple style:
body {
background-color: white;
color: black;
margin: 0;
}
The above style says that the background color for the body of the HTML will
be white, the text color will be black, and there will be no margins around
the edge of the page, meaning that the text will go all the way to the edge
of the screen in the browser. The "curly brackets" { } are used in CSS in
a way that is similar to the "pointy brackets" in HTML.
You have an opening curly bracket { and a closing curly bracket }. The word
before the opening curly bracket — "body" in this
case — indicates where to apply the style: to the <body> tag
in this example. If we want the style to apply to something else, we have to
change the word before the first curly bracket. In the example below, the same
style is applied to the <p> tag, rather than the <body> tag:
p {
background-color: white;
color: black;
margin: 0;
}
This means that every paragraph will have a white background, black text, and no margin. We could change things up a bit, by applying different styles to all of the level 1 headings, like this:
h1 {
background-color: red;
color: white;
margin: 10px;
padding: 10px;
font-size: 200%;
font-weight: bold;
}
The above style will give all level 1 headings a red background, white text, and a margin of 10 pixels. In addition, the text will have a padding of 10 pixels around it, and the font will appear twice as large as normal text, and it will be bold. It will look like this:
Here is an example with the styles applied.
Note: In case you didn't know, pixels are "The basic unit of the composition of an image on a television screen, computer monitor, or similar display" (American Heritage Dictionary, 4th edition). There are other units of measurement for use in CSS too, such as inches, centimeters, percentage, and even units you probably haven't heard of before, such as em. Pixels is usually NOT the preferred unit of measurement. Usually em and % are preferred. I'll discuss this in more detail later.
Now you've seen some style definitions, and you've seen how they can look in a browser. Of course we've only scratched the surface. Styles can do a lot more than these few things. We'll get into those details as we go along. First, though, it's helpful to know how styles work.
How do Styles Work?
Styles are just bits of typed text saved as a file with a .css extension
at the end (e.g. styles.css). You can create styles by opening
up a simple text editor, such as Notepad, and typing the styles directly into
the text editor. You can also use the WYSIWYG (What You See Is What You Get)
tools in Dreamweaver or other tools to create styles.
There are three main ways to include styles in your documents:
- Link to an an "external style sheet"
- Create styles in the
<head>of an HTML document - Create "inline styles" inside of elements
within the
<body>of the HTML file (for example, in<p>or<h1>or<ul>, etc.)
Method 1: Linking to External Style Sheets
External style sheets are defined separately from the HTML code, in a separate file. The browser takes the HTML and the CSS, combines them, interprets them, then shows us the final result. For example, if you have three web pages, all three of these pages can refer to the same external style sheet.
The great advantage to this type of arrangement is that you don't have to re-type all of your styles if you want the same styles to appear on multiple pages. All you have to do is create a link in your HTML document to your style sheet.
Ways of Linking to External Style Sheets
There is more than one way to link to external style sheets, but in general these ways fit under two categories:
The <link> method:
A link to a style sheet using a <link> element would look
something like this:
<link type="text/css" rel="stylesheet" href="styles.css" />
This line of code would be placed somewhere between the opening and closing <head> elements.
It does not matter if you type it before or after the <title> element.
The @import methods:
The @import methods, using the <style> element,
would also be placed between the opening and closing <head> elements,
and would look something like this:
<style type="text/css">
<!--
@import url(styles.css);
-->
</style>
Note: The opening and closing comment tags <!--
--> are optional, but they help to make the document more compatible
with older browsers which cannot interpret styles at all. Older browsers will
ignore the opening and closing <style> tags, but would
not ignore the content between them, so we comment it out. Modern browsers
can interpret the styles whether the comment tags are present or not.
There is more than one @import method to import style sheets.
Both of the following examples will also import the styles into the HTML document,
despite their minor syntax differences from the first example above.
@import with parentheses and quotation marks:
<style type="text/css">
<!--
@import url("styles.css");
-->
</style>
@import without parentheses, but with quotation marks:
<style type="text/css">
<!--
@import "styles.css";
-->
</style>
Which Method is Best?
All of the methods mentioned above are acceptable, but browser compatibility
is a concern. Modern browsers are able to read all of the above methods, but
older browsers cannot. In the case of Netscape 4, for example, the browser understands
the <link> method, but does not understand the @import methods.
If you want styles to show up in Netscape 4, you have to use the <link> method.
However, the problem with Netscape 4 is that it supports only a few style properties.
Sometimes this can lead to pages that look horrible in Netscape 4 because only
some of your styles are displaying properly while others are being completely
ignored, as shown in the partial screen shot below.
In these cases, it would be better if all of the styles failed, because
you would at least be able to see the plain HTML version
of the page, even if it's not as snazzy as the styled version. One way to ensure
that all of the styles fail is to use one of the @import methods
of linking to the style sheet. The end result will be a web page that "looks
right" in all of the modern browsers, and a page that is at least still
readable in older browsers such as Netscape 4, even though it looks plain and
boring.
In general, I recommend using the @import methods because it's
usually too much of a bother—or else completely impossible—to make
styles work properly in Netscape 4.x and other older browsers. Which @import method
is best? It doesn't really matter, though I tend to prefer the one with parentheses
but no quotation marks.
Method 2: Creating styles in the <head> of
an HTML document
Sometimes you have styles that you want to apply to only one page. In these
cases it makes sense to write the styles in the <head> of
that document, rather than write them in an external style sheet, to avoid bogging
down the external style sheet with too much clutter that doesn't apply to the
majority of the pages. To create styles in the document <head>,
just type the styles in between the opening and closing <style> elements,
like this:
<style type="text/css">
<!--
body {
background-color: blue;
color: white;
}
p {
margin: 2em;
}
-->
</style>
Question: Can you link to an external style sheet and create
page-specific styles in the document <head>?
Answer: Yes. In fact, this is a very common scenario. You
usually define most of your styles in the external style sheet, then define
page-specific styles in the document <head>. The style complete
declaration would look like this:
<style type="text/css">
<!--
@import url(styles.css);
body {
background-color: blue;
color: white;
}
p {
margin: 2em;
}
-->
</style>
Question: What if your external style sheet already defines the style that you want to change? For example, what if your external style sheet sets a blue background color for all paragraphs, but on one of your pages you want to define a page-specific style so that all the paragraphs have a white background?
Answer: Your page-specific styles would override your external style sheet, as long as the page-specific styles are defined after the link to the external style sheet, as in the example shown above. The last definition of a style takes precedence over all other definitions.
Method 3: Creating inline styles
The last method for creating styles involves defining the style in the tags
in the <body> of the document. Inline styles override all
previous style declarations in both the external style sheet and the document <head>.
Here is an example:
<p style="background-color: red; color: white;">Here is a paragraph.</p>
This method is easy to understand, because you're applying the style directly to the item that you want styled. However, you should almost always avoid this method. It's "legal," but it usually creates sloppy code that's hard to manage, especially in large sites. I'm explaining it here for the sake of completeness. Why is it hard to manage inline styles? Well, imagine that you create a style for one paragraph, then later on you realize that you want the same style on another paragraph. Then another. And another. You would have to rewrite the style four times. Now imagine that you changed your mind and wanted to change the background color and font color of that style. You would have to change it in four places instead of one. It's better to type the style only once, then reference it in the appropriate locations.
Why do they Call them Cascading Style Sheets?
They call them cascading style sheets because you can have multiple layers of styles, with the last styles overriding the first styles. It is somewhat like a multi-level ("cascading") waterfall or a series of steps, hence the word "cascading."
The last style declaration wins. In other words, if you declare a style in
your external style sheet (such as setting the background color of all paragraphs
to blue), then re-declare the style in the document <head> (setting
the background color to green), then again in the inline tags (setting the background
color to purple), the paragraphs will be purple. However, users can override
all of these with a custom style sheets of their own.
The user is always right
No matter how many times you declare a style, the user can undo your style. The user is the king (or queen) of the world as far as styles are concerned. Users can create their own style sheets with their own preferences. Some users with low vision, for example, require all web pages to appear in high contrast colors and enlarged font. They might set the background color to black, the font size to 250%, and the font color to a light yellow. This is a relatively common combination of styles for people with very low vision.
