Cascading Style Sheets (CSS) is a Web standard that provides webmasters with better control of presentation style, makes site management more efficient, and leads to a more adaptable and accessible web. A CSS style sheet can set fonts, colors, white space and other presentational aspects of a document while still maintaining flexibility.
CSS has been specifically developed to meet the needs of Web designers and users. It is a recommendation of the World Wide Web Consortium and enjoys wide industry backing. Cascading Style Sheets are supported by web browsers such as Internet Explorer 3.0 and later, Netscape Navigator 4.0+, and the text based Emacs-W3 browser.
CSS is a technical specification that defines the syntax for how a set of styles should be encoded as well as the semantics of the codes.
However, you are not required to know the technical specification to make use of Cascading Style Sheets. For example, the Cascade CSS editor makes it possible to design a style sheet using dialogs instead of editing the raw text which describes the styles.
This tutorial provides an overview of Cascading Style Sheets without going into all the technical details required for manual editing of CSS.
Currently many web authors use FONT tags, CENTER attributes, and a wide variety of markup trick included misuse of tables and other markup to create special visual effects.
Desktop publishing for the last decade has made most people used to have WYSIWYG control over how information is presented. Such guaranteed pixel control makes sense for print and other static media. The content comes out in one pre-defined format, so it is reasonable to wish for optimal control over the result to be able to make it as perfect as possible.
However, the Web is not a static medium. WISIWYG (What I See Is What You Get) doesn't make sense anymore when the same content has to be adapted to a wide variety of screen sizes and technical configurations, included alternative displays such as voice or Braille. Formatting instructions mixed with the markup cannot accommodate the need for an infinite number of presentation formats.
If you ever have had to redo the markup of a site to accommodate a new presentation style, you will know that using FONT tags and markup tricks doesn't make for efficient style maintenance. It requires that you more or less manually go through all documents, remove the unwanted tags, and add new tags to achieve the wanted effect.
Style sheets promises to change all of that and make style maintenance efficient. The styles only need to be modified in one place and the changes will immediately take effect for all the documents using the associated style sheet.
Efficient style maintenance is based on markup that describes the structure of the document rather that how it is presented. An important idea behind markup is to separate presentation style from the description of content. The rationale is to make it possible to change the presentation form without making changes to the document. The best way to prepare for Cascading Style Sheets is to immediately start to use markup that describes the role of the various parts of the document rather than how the document should appear.
An important feature of Cascading Style Sheets is that more than one style sheet can affect the presentation of a document. The style sheets are cascading, meaning that the properties of a subsequent style sheet will override styles introduced in a previous one. Cascading makes it possible to combine several style sheets to reduce redundancy. A typical use would be to have one general style sheet for the website and local style sheets that override as needed.ÊA related strategy for style sheets management is to have one style sheet for the organization, but allow divisions or authors to redefine selected styles in their own style sheets.
An interesting capability of cascading is that both readers and authors can influence the presentation through their own style sheets. The advantage is that readers get the documents presented as they want, which will increase their satisfaction with the content. For example, some readers with low vision might want to scale up the fonts compared to what you have suggested in a style sheet.
The browser needs to know which style sheets to use. CSS provides several mechanisms for an HTML document to advise the browser as to which style sheet should be applied.
A Cascading Style Sheet can be kept separate from the HTML documents. This is useful when the same style sheets applies to several documents or complete sites. To assign a style sheet to a HTML document, place a LINK tag in the HEAD element of a document, e.g.:
<HTML><HEAD><TITLE>untitled</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.site.com/style">
</HEAD>...
The style sheet can also be embedded in a document. This makes sense when the styles only apply to the particular document. The CSS is embedded using a STYLE container in the HEAD of an HTML document:
<HTML><HEAD><TITLE>untitled</TITLE>
<STYLE TYPE="text/css"><!--
H1 { color: blue}
--></STYLE>...
Note that the style element content is hidden using the markup for a comment, in order to avoid the situation where old browsers without CSS support will display the style sheet codes.
The rules of one style sheet can be imported into another. To import one style sheet into another, place the following statement in the style sheet:
@import url (http://www.site.com/style)
Style can also be mixed with the content in the body of a document, using the STYLE attribute:
<P STYLE="color: blue">blue paragraph</P>
Note that such use of styles are strongly discouraged as it loses the advantages of using style sheets.
A style sheet is collection of rules. Each rule consist of a selector that identifies which HTML element it applies to, and a list of declarations that defines the style. For example, one rule could have a selector that defines that H1 elements should be presented as capitalized using 14pt Helvetica with a blue color.
Successful use of selectors requires an understanding of how markup describe the logical structure of a document. For best result, the HTML documents should be marked up for structure rather than for appearance.
Recall that a markup element starts with a tag, followed by content, and terminating with an endtag. For example, the <P> paragraph tag states that what follows is a paragraph (contrary to a common misunderstanding, the paragraph tag is not a paragraph separator.) The element ends with an explicit paragraph endtag </P> or implicit at a start-tag that (according to the HTML specification) cannot be contained in the element.
To assign a style to a specific element, simply use the identifier of the element as the selector. For example, the selector ÒH1Ó will apply the style to all H1 containers.
The style will also apply to all containers within an container, unless their elements are defined with a style that overrides the original style. Say that the color of the H1 element has been set to blue. Suppose a document has an H1 container with a emphasized word inside:
<H1>This is <EM>important!</EM></H1>
If there is a style for EM, it will cascade with the style for H1 in that the EM element will inherit the properties of H1 except for those specified in the style for emphasized elements.
The CLASS attribute is used to label a group of markup elements that share a common characteristic. It allows a style to be applied just to the elements of a given class.
Say that your documents frequently quote from poetry. By marking up these quotes with
<BLOCKQUOTE CLASS=poetry> you will later be able to apply a specific formatting to the poetry quotes while leaving all other quotes unaffected.
A selector for a class is the element name followed by a period, then the name of the class. In the example above, "BLOCKQUOTE.poetry" is a selector for all blockquotes with the class "poetry".
Use class names that describe the role of the elements with the given class. This will give more freedom and flexibility to later change the presentation style of the elements with the class. Avoid class names that in some way describe the appearance of an element, for example its color or other features.
The element name can be omitted from the selector if you want the class to span over elements. For example, ".poetry" will select any element set to the class "poetry".
In a way, the class attribute is almost like creating your own tags, while still maintaining a reasonable default for browsers that don't support CSS. In fact, HTML 3.2 allows you to essentially create your own tags using the DIV and SPAN elements.
DIV is used to declare an independent block of content, while SPAN is used inside other blocks such as a paragraph. Either are meant to be used together with the CLASS attribute to provide a means of granularity and specialization in marking up documents.
A selector can address elements in a specified context. For example, the style sheet can specify that an emphasized phrase within a H1 header should be formatted differently than a emphasized phrase within a blockquote.
Recall that HTML elements are nested in that one element can contain other elements. For example, the LI elements of an ordered list is inside an OL element.
Say that you want to apply a style to the items in an ordered list, but don't want the same style to be applied to the items of an unordered list. The selector for this style rule would have an OL identifier followed by an LI identifier, signifying all list items that are in an ordered list:
OL LI
The same technique can be used to select a style for other elements that are within another elements. For example, the selector BLOCKQUOTE EM will address emphasized text within a quote, so that these can get a presentation style that eventually differ from regular emphasized text.
In some rare cases it might be necessary to assign a style on a per-element basis. The ID attribute in HTML can be used to label specific elements:
The element can then be addressed with a selector that has a hash '#' before the ID:
Most browsers display visited links differently. Anchor selectors can be specialized to make the link appear differently depending on their status:
You can even combine this with the regular class selectors. For example, you may use the class external to distinguish links to other sites:
External unvisited links can then be assigned a style using the selector:
Common typographical effects can be achieved by applying a style to the first letter or first line of an element.
The selector Ò:first-lineÓ is used to apply a special style to the first line of a document. The selector :first-letter is used to create effects such as "initial caps" and "drop caps".
Style sheets influence the presentation of a document by applying property values to various elements addressed with selectors. This section overviews most properties that can be used in a style sheet.
Setting fonts is one of the most common uses of style sheets. The following properties are used to assign fonts:
These properties describe the foreground and background color of an element.
The text properties specifies attributes of the text of an element:
The box properties specifies the placement of an element.
The padding properties describe how much space to insert between the border and the content:
The border properties set the border of an element:
These properties classify elements into categories.
Cascading Style Sheets provide many options for the values of properties. This distinguishes CSS from simpler style sheet schemes. In particular is the emphasis on ÒrelativeÓ values, which facilitates style being successfully merged during cascading. Here are some of the more advanced types of property values:
There are two types of length units: relative and absolute. The following units specify a length relative to another length property to facilitate scaling from one medium to another:
The following absolute units are supported:
In most cases it is a good idea to use relative values instead of absolute length units. Absolute values will make your documents less adaptable to various screen sizes and other output media.
Percentage values are always relative to another value, usually the font size. A percentage value can be positive or negative.
A font size can have a relative size that makes the font larger or smaller than the font of the surrounding element. The specified relative sizes are 'smaller' and 'larger'.
Style sheets are definitely going to replace today's use of FONT tags and other ad-hoc markup to control the presentation of pages on the web. Although it will take some time before the majority understands that WYSIWYG is not the right paradigm for the web, you should expect to see an increase in alternative authoring and site management tools that focus more on efficient markup of document structure rather than on physical appearance.
It is also an idea to keep an eye on DSSSL, which is a more powerful style sheet mechanism than CSS and may be more suited for automated site development. Combined with XML (and SGML) this style mechanism may cooperate with CSS to provide efficient authoring and site management while making the presentation of a website more adaptive to the reader.
<P ID=lab33>check this out</P>
#lab33
Adapting to Link States
<A CLASS=external HREF="http://other.site.com/">other site</A>
A.external:link
First Letters and Lines
Properties
Font Properties
Color and Background
Text Properties
Box Properties
Padding
Border
Classification
Property Values
Length
Percentage
Relative Size
Style Sheets are the Future