Cascading Style Sheets (CSS) can be your best friend when formatting the text within your HTML pages. They also are meant to be used to position elements on the page and eventually do away with the need for tables to supply the structure for your pages. Because this positioning capability of CSS is at best “buggy” across browsers (not all browsers render the same tags in the same way), we will stick to the text formatting functions.
With a style sheet, you can control, for example, color, size, style, font, and a host of other typographic considerations. If you want all your paragraph text to be orange, the background green, and your headings blue (though I wouldn’t advise it!), you can do this easily and quickly with a style sheet. Style sheets allow you to designate formatting choices without having to code these choices for each and every paragraph. Simply change the style sheet and your changes appear throughout your document.
The most common tags formatted with a style sheet are:
<p>
<h1> through <h6>
<body>
a:link
a:visited
You can apply a style sheet to a group of documents, to a single document, or to just a portion of one. The style sheets are called “cascading” because of these various ways in which they can be applied to a web page. An external style sheet (applied to an entire site, for example) will be pre-empted by an internal style sheet (applied just to a specific document), which in turn can be overridden by inline styles with a document. We will concern ourselves with internal and external style sheets. If you’ve done a comprehensive job with either of those, you probably won’t really need to use inline styles.
••• internal style sheets
An example of an internal style sheet, one that is used within a specific document, looks like this:
<head>
<title>Internal Style Sheet</title>
<style type="text/css">
<!--
body {
margin-left: 10px;
margin-top: 10px;
background-color: #006633;
}
p {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: normal;
font-style: italic;
color: #000000;
}
h1 {
font-family: Times New Roman, Georgia, serif;
font-size: 15px;
font-weight: bold;
color: #cc0000;
background-color: #cccccc;
}
a:link {
color: #ff6633;
text-decoration: underline;
}
a:visited {
color: #cccccc;
}
-->
</style>
</head>
Looks complicated, huh? Well, it can be kind of confusing at first, but let’s walk through it together.
code | explanation |
<head> | the style sheet specifications are included in the head of the HTML document |
<style type="text/css"> | tells the browser that you are using a CSS style sheet |
<!-- | a comment tag that hides this code from browsers that don’t understand CSS |
body {
margin-left: 10px;
margin-top: 10px;
background-color: #006633;
} | the body of the document will start 10 pixels from the left of the screen and 10 pixels from the top; the background will be green |
p {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: normal;
font-style: italic;
color: #000000;
} | all text within <p> tags will be a sans-serif font, 11 pixels tall, normal weight (not bold), italic, and black |
h1 {
font-family: Times New Roman, Georgia, serif;
font-size: 15px;
font-weight: bold;
color: #cc0000;
background-color: #cccccc;
} | all text designated as <h1> will be a serif font, 15 pixels tall, bold, and red; these lines of text will have a gray background |
a:link {
color: #ff6633;
text-decoration: underline;
} | all links will be orange and underlined |
a:visited {
color: #cccccc;
} | all visited links will be gray |
-->
</style>
</head> | closing comment, style, and head tags |
The basic format of these style sheet commands is:
tag { property: value; property: value; property: value; }
It is imperative that the property is followed by a colon and separated from other property with a semi-colon (don’t ask me why — computer geeks just made it that way!). Curly brackets { braces } surround the entire set of properties. While the line breaks between properties aren’t necessary, it’s much easier to read and edit your style sheet if you have it formatted this way.
 |
A word about fonts is in order here. Style sheets make it possible to designate the font in which your page displays. You could make your headings appear in Funkhouse or Comic Sans or Kunstler Script — but if your user doesn’t have these fonts installed on his computer, your page won’t display the way you want it to.
The font-family property brings this into consideration. In the <p> tag above, the browser will look to see if the user’s computer has Verdana installed. If that font can’t be found, then it looks for Arial; if Arial is not found, then the browser uses the default sans-serif font.
Most likely, the cool fonts you have installed on your computer are not common to everyone else, so it’s best not to use them in your style sheets. Stick with the common fonts installed on most computers: Verdana, Arial, Helvetica, and Geneva (sans-serif) and Times New Roman, Times, and Georgia (serif).
I would even go so far as to say that sans-serif fonts display better on computer monitors than do serif fonts. Use your own judgment here. |
|
 |
This explanation of CSS only touches the surface. To learn more, check out jesset.com for a more detailed description of the various CSS properties. |
|
••• external style sheets
If you have a small site consisting of only a few pages, you can probably get away with using an internal style sheet. If your site is long and complicated, you would be better served with an external style sheet. Your code is tidier and downloads faster without all that code at the beginning of the document. (Now that I have a handle on CSS, I use external style sheets exclusively.)
An external style sheet uses the same tags and properties as an internal one, except that it is external to the HTML document to which it is applied. Instead of all that code in the <head> of your document, you simply reference the style sheet. That looks like this:
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" href="mystylesheet.css" type="text/css">
</head>
code | explanation |
<head> | the link to the style sheet is included in the head of the HTML document |
<link | tells the browser that it must link to something outside the document |
rel="stylesheet" | tells the browser that what it is linking to is relative to the document as a style sheet |
href="mystylesheet.css" | tells the browser where to find the style sheet |
type="text/css"> | tells the browser that this linked file will act as a cascading style sheet |
</head> | closing head tag |
That style sheet is a basic text file and MUST have a .css suffix. An abbreviated version of the above internal style sheet as a .css file would look like this:
body {
margin-left: 10px;
margin-top: 10px;
background-color: #006633;
}
p {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: normal;
font-style: italic;
color: #000000;
}
To create the style sheet file, you would simply copy this code into a new document (without any other HTML tags or extraneous information) and save it as mystylesheet.css (you could call it gertrude.css for all I care; it just needs to have that .css extension).
Here’s the style sheet that I used on this website. Instructions for how to save it onto your computer are given on this new page.
|
