An Introduction to Style Sheets
|
|
An Introduction to Style Sheets |
|
Style Sheets, often called Cascading Style Sheets or just CSS are a new and very important feature in HTML 4. CSS 1 is part of the specifications for HTML 4, and CSS 2 (in some form or other) will be accepted eventually as the first revision. The two major browsers implement some features of Style Sheets in different ways. Internet Explorer displays some features of CSS as the standards intend, and some incorrectly. Netscape Navigator also manages to interpret Style Sheets correctly for some codes but not for others. And there are some CSS codes both browsers (in their Generation 4 versions) ignore completely. It is hoped they will both meet the standard with their next versions. In the meantime, we will learn and use the tags in the standard which both major browsers intrepret consistently correctly.
It is difficult to select what to cover for this topic. Style Sheets are exciting to many web page designers because they allow us to design pages, instead of having to write as much code. They give us many of the same abilities on the web as we had on paper. And we don't need to learn fancy or difficult special tricks to get these effects. But trying to teach Style Sheets in one class session is like trying to teach desktop publishing in one class. It's not possible. So I will start with some definitions and some examples and point you to some resources which might help you since they have helped me. I am only getting started exploiting the large numbers of features available in Style Sheets.
You are looking at the effects of a Style Sheet right now. And if you use the View Source option in your browser you will see how I incorporated a Style Sheet into the design of this page. If you look at the top of this file, in the HEAD section, look at the line just above the </head> tag. You should see
<link rel="stylesheet" type="text/css" href="css100.css">.
This line should tell you that I have built a link to a file called css100.css and that the link has something to do with Style Sheets. If you got that far, good, for this is all new material to you. The link is to a stylesheet, the stylesheet is in text format, mime type: css, and the reference is to a file whose type is css.
A Style Sheet is simply a collection of one or more Styles. A Style Sheet can be stored in three different ways, or places. An HTML Style is a description of a way to format an HTML tag which is different from the default format. For example, standard or default paragraph text (coded with <p>) is a serif font (usually Times New Roman) at about 10 points. What if you want your paragraphs to appear as a Sans-Serif face at 12 points? In the past, you would have had to set up a font code at the top of each page (and turn it off at the bottom), something like <font face="Arial" size="+1"> and hope it worked. (Most of the time it did.) For a few pages, that was not a problem. And you could even set up a template so that your personal default was selected for every new page.
But how to deal with the following situation. A few weeks after you upload the 20 pages needed for the new web site, you realize you don't like Arial, and want to try something else. Or perhaps you want to have more variety in some places but not in others. Or perhaps your supervisor tells you that the company wants to use a different font, (or a different background colour, or a new company logo as the background for every page). So you open all the pages, do a search and replace and change all the font tags. Then upload all the pages again. And then check all the pages to make sure you didn't miss one. If you use a style sheet, you could make the change in the style sheet and all the pages on the site would change appropriately.
Another practical use of a Style Sheet is to hold or store all of the features you want your tags to contain. For example, you might always want the text in a Heading Level 2 to be bright blue, Times New Roman (or similar serif font), bold and 16 points high. Since this is not the standard definition of Heading Level 2, until now you would have to make sure you remembered to add all these attributes every place you put a Heading Level 2. With a Style sheet you can define these characteristics once to <h2> and then not think about them again. As long as you remember to have the browser load the Style Sheet, then the pages will look the way you ant them.
With a Style Sheet you can define the default format for the <p> code in a separate file from the HTML page itself. If you want to change the default style, simply change the entry in the Style Sheet and upload it. All of the pages with links to the Style Sheet will look different the next time someone views them. No search and replace, no codes hiding in tables or in frames, just one place to make an adjustment and all of the files will be different when seen in a browser.
An External Style Sheet is a file that contains a list of the styles you want to use on a particular page or set of pages. Here is a copy of a Style Sheet file that might have been used for this site.
A Style Sheet can be used to redefine the default settings for standard HTML codes. The purpose behind the changes made in this style sheet was to redefine the standard paragraph text so it was large enough and clear enough to be seen on the overhead projection screen. Since the main type face has to be at least 14 pt, then the various headings had to be adjusted to keep their relative ratios, and lists had to be set to correspond to the new "normal" type. I also set up an em tag to use when I wanted to show you what code to type. This one is nothing fancy, just a few simple declarations. If I decide tomorrow I want 12 point type for the body instead of the present 14 point, I could adjust the look of the nearly 20 HTML pages on this site simply by editing a few lines in this file (which can be done with a text editor, by the way).
Declaring a style is fairly simple, but it must follow the rules.
An embedded style sheet is a style sheet that is part of the head of an HTML page. Entering a list of styles in the head of a Web page is somewhat like entering a JavaScript. You start by telling the browser you are going to use a style, then you use the comment tag to hide the style code from early browsers, then close the comment and then close the style. Here's an example. Notice the structure of the style definitions is exactly the same as in an external style sheet.
Notice in particular the code that opens the style. It must always include type="text/css" ; you must always tell browsers what kind of style sheet you are defining. At the moment there is only one type of style sheet, but in the future there may be more. And if you don't use this syntax, even 4th generation browsers won't read the style sheet.
If you use this method, either instead of or as well as an external style sheet, you can customize your pages one at a time. For example, Header Level 3 text on one page can look different Header Level 3 on all the other pages on your site if you wish. As a rule, a style defined in the Head of a page takes precedence over the same style defined in an external Style Sheet. That's not always the case, but in general it works.
You can also incorporate a style into the attributes for a particular code. You might want to have one part of your page look a certain way and no standard code is exactly right. You might want to experiment with different looks to find the one that is best for your page design. So you can include instructions about a tag format inside the tag itself.
Here's a short paragraph that uses a special style which applies to this paragraph alone. That style is <p style="font-size:10pt; line-height:18pt;">. When I move to the next paragraph I will revert either to the default style (if there is no other style defined) or, in my case, to the style defined in the external style sheet. This paragraph uses the In-Line style defined in the opening <p> code.
When I move to the next paragraph it will revert either to the default style (if there is no other style defined) or, in my case, to the style defined in the external style sheet. I do not recommend you use these inline styles very often. They can cause design problems if they appear in many places in a web site that also uses external style sheets. If used extensively they can greatly increase the size of an ordinary html file. However, they can be useful occassionally to turn on or turn off one particular feature of a defined style.
In addition to redefining the defaults for existing tags, you can also define a class which can be applied to any tag. Let's assume I want to identify a class called bigserif that I might apply to several different tags. It can be defined in the Style Sheet (or in the head of the HTML file like this:
.bigserif {font-size:16pt; font-family:Goudy,Times New Roman,serif;}
and then applied at the tag when desired:
<p class="bigserif">
The only slightly unusual thing about the declaration is that it must start with a . period and that character may not stand out too clearly on your screen. A class can be defined either in a separate Style Sheet file or in the head of a page as I have done with this one.
Classes defined this way are independent; that is, they can be applied to any tag, providing the elements of the definition apply to the tag. I use the class "code" to highlight areas of the text that are examples of HTML code. I normally use it with the <p" tag, but I could use it with any text tag and get more or less the same results.
There are a multitude of attributes which can be used to establish a style. To list them requires much more room than we have here. There are a number of books available which can be helpful, and as always, the best source of information about the Web is on the Web. There are quite a number of pages which will help you learn how to use Cascading Style Sheets. I recommend three pages of examples of the three types of style sheets all found at the same site: www.blooberrycom
| External CSS | Embedded CSS | In-Line CSS |
During this course we will examine many of the CSS Level 1 features. And we will also experiment with at least some of the CSS LEvel 2 material as well. As a warning, not all of the features which can be applied with Style Sheets are visible in every browser. No browser works as it should with the majority of the choices available in CSS Level 2. If you want to test what your browser can do, check the reference page, which includes many of the Level 1 attributes.
Here are some summary lists of features which can be set using style sheets. If available, each item is linked to part of this site where there are examples of coding. This is a work in progress. Please check regularly to find out what new features have been added.
There are also attributes for line height, letter spacing (kerning), word spacing, justification, vertical alignment, text indents, and white space controls
We will examine the many choices in Level 1 looking at design features they affect. Check the links below.
CSS Level 2 established the code for positioning elements on a page. It is theoretically possible to dictate to the browser exactly where elements of the page design will appear on the screen. It is theoretical because even Generation 4 browsers do not support all (or even most) of the attributes and tags used in CSS Level 2.
| A Style Sheet Sample | A Style Sheet Demo |
Two books I own which you might find useful are:
DHTML for the World Wide Web
by Jason C Teague, part of the Visual Quickstart Guide series from Peachpit
Press.
Web Designer's Guide to Style Sheets
by Steven Mulder, published by Hayden Books.
Teague uses less detail and assumes some experience writing HTML code. (This series is supposed to be short and quick introductions.) Mulder's book is older, but has a lot more detail about writing the code for styles. Mulder also includes discussion of how browsers implement each style feature with the feature. Teague saves that information for an appendix at the end of the book. Teague includes chapters about JavaScript , layers and positioning which Mulder does not. If you want electronic help with CSS, then check the Resources page for this class, and do searches for style sheets and cascading style sheets. There is a great deal of good information available to you on the Web.
| Other Possibilities | |
|---|---|
| Send email | Robert Boardman |