Tip #8
A short introduction to CSS
The basic ideaCascading Style Sheets (CSS) are a mechanism for adding style (e.g., fonts, colors, spacing) to web documents. They allow web authors to separate the content of pages from the appearance of the page and provide a mechanism where a change in one file affects the appearance of many web pages.
The concept of style sheets is not new nor unique to the web. Word processing programs have allowed use of style sheets for many years, for the same reason. If you or others working on documents change your mind about the layout of documents, then dozens of documents using a style sheet can be easily changed by editing a single style sheet, rather than individually opening all of the documents. Style sheets for the web were ratified by the World Wide Web Consortium in 1996, as a way to increase control over the appearance of a web page but reduce the amount of coding necessary.
Just looking at a web document cannot tell you if it was created using a style sheet. You have to look at the HTML coding to see if there are references to style sheets. A style sheet can be found within a given web document, and (if so) it is in the HEAD area of the document. This is called an internal style sheet. You can also have an external style sheet, which is also referenced in the HEAD area. The real time-savers are external style sheets, since the coding in one file can be easily changed to affect many documents.
Why use this feature?Although there are various reasons for using CSS on a website, there are some practical reasons such as speeding up formatting changes on your site, providing consistency in formatting especially when many people are creating documents, and creating effects which are not available in "traditional" HTML formatting, such as adding a border around a selected paragraph or reducing the spacing between paragraphs. Also using CSS is a standard expected by the World Wide Web Consortium.
ExamplesA style sheet is a separate ASCII document (separate from the HTML documents referencing it), with various lines giving coding. Style sheets are made up of rules which have a specific syntax. Every rule has two components:
- a selector (which can be for an HTML element such as H2, P, STRONG but also can be a "made-up name")
- a style for the selector, which has one or more properties and their values
You can modify existing HTML elements, or create your own classes, which you then apply to blocks or spans of text.
This is a sample, very simple style sheet called ecat.css
h1 {color: green; font-family: Helvetica, Arial, Sans-Serif; font-size: x-large}
h2 {color: blue; font-family: Helvetica, Arial, Sans-Serif; font-size: large}
p {font-family: Helvetica, Arial, Sans-Serif; line-height: 125%; font-size: medium}
.emphasis {font-family: Helvetica, Arial, Sans-Serif; line-height: 125%; font-size: large; color: red}
.footer {font-family: Helvetica, Arial, Sans-Serif; font-size: x-small; color: #0033cc}
This is just a short example, and real style sheets could easily contain many lines with selectors and styles. The above example has formatting for H1 and H2 tags and paragraph tags, as well as two special tags. With the above example, if you only had H1 and H2 tags, paragraph tags, and areas using either the .emphasis or the .footer, this style sheet would work.
This is an example of an HTML document which would then reference the style sheet.
<html>
<head>
<title>The title for the document goes here</title>
<link rel=stylesheet type="text/css" href="ecat.css">
</head>
<body>
<h1>This would be a header tag, used in the normal manner>
<p>This would be a normal paragraph</p>
<p class="emphasis">Complete an online survey to indicate your priorities. Responses need to be sent by December 15.</p>
<p class="footer">For details contact Linda Ffolliott, ECAT office, 621-7179.</p>
</body>
</html>
To see what type a document might look like that uses the ecat.css style sheet, go to this sample document.
It is hard to get very excited about CSS when you only have a few documents on your site. As your site gets larger, then the idea of formatting many documents with a single document is quite appealing.
Why is not everyone using this feature?There are a couple of reasons why CSS is not being used across the board by everyone: one is that browsers interpret the CSS code differently, and the second is that on an existing site formatted with "old format coding", that code has to be deleted for a style sheet to take effect.
Although CSS was proposed by the World Wide Web Consortium in 1996, its implementation has been spotty, because different releases of browsers have implemented this feature sporatically. If you have a small "internal" site (what is called an Intranet by some people), then you can "force" your small group to get the same browser. However, if your site is aimed at a broader audience within the state or aimed at national and international audiences, then you cannot assume all your users have the same browser or the same version of a browser. If you create coding for standardized HTML tags, like <h1> or <p>, then your text is still readable by older browsers. But creating your own classification will result in formatting not appearing. The text will still be there, but the appearance of the document may not be what you expect.
Increasingly, however, as sites get revised and updated and especially when new sites are created, CSS is used for formatting, and also increasingly for the layout of elements on a page (versus use of tables for page layout).
The concept of cascading
A fundamental feature of CSS is that more than one style sheet can influence the presentation of a document. This feature is known as cascading because the different style sheets are thought of as coming in a series. That is, you can have an external style sheet, but then override it in a particular document by placing local coding in that document.
CSS in DreamweaverAs you have discovered when applying font traits in the 2004 release, each group of font traits is placed into a style by Dreamweaver, labeled style1, style2, style3, etc. If you have a document open that has some of these styles created, you can see a listing of these styles by going to Window on the main menu, then CSS Styles. A panel will appear such as the one showing below.
 |
||
 |
If you click on the context menu icon (to the right side of the title area on the CSS panel), you can see various options for working with the styles. For example, if a style were highlighted, you can delete it or edit it. |  |
If you want to use styles in your web documents, you should consider using the Style Definition dialog box that is part of Dreamweaver to create and edit style rules. Check out the online help in Dreamweaver about using the style feature. Under the option for index, type in CSS and you will see a reference about creating CSS style sheets.
Additional referencesThe concept of CSS is simple, but learning how to apply it successfully is beyond the scope of this class. One can take a 5-6 week class on CSS just by itself. These are additional websites with more information about style sheets for the web:
- The World Wide Web Consortium site on style; since these are the people who proposed the style feature, this is a site to check out, but it is a bit overwhelming for a new CSS user
www.w3.org/Style/CSS/ - A good reference on which browser versions support which particular CSS1
and CSS2 features
www.w3schools.com/css/css_reference.asp - Most current books about Dreamweaver include at least one chapter about using and creating style sheets.
- There are lessons about CSS by Adrian Senior, at the Macromedia site at www.macromedia.com/devnet/mx/dreamweaver/articles/css_concepts.html
This is really a series of lessons including a basic page with header, content, and footer, a two-column layout, and adding a navigation area to a page. So this covers more than just using CSS for layout. - Check out the Zen Garden site at www.csszengarden.com. This is a very interesting site that shows how content can be separated from formatting, since the same text is displayed with very different looks due to the style sheet used on the application. This site also lists various resources about CSS.
These tips are created as part of a class on Dreamweaver Basics.