Style sheets allow Webmasters to control the presentation or layout (e.g. fonts, colors, margins, fontfaces, and other aspects of style) of a Web document without compromising its structure. CSS is a simple style sheet language allowing Web page designers to attach style to HTML documents. It uses common desktop publishing terminology which should make it easy for professionals as well as untrained designers to make use of its features. With HTML 4.01, the tags and attributes were made available to associate style information with an HTML-encoded document -- finally allowing the separation of layout from logical structure. This is not a new model -- SGML has always used style sheets for layout and reserved the SGML tagging for defining the structure of the document.
Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g., printers and aural devices), downloadable fonts, element positioning and tables. Unfortunately, CSS2 is not broadly supported by the major browsers, so the Library of Congress will begin by using CSS1 as its standard for style sheets on the Web site (although CSS1 is not fully supported by browsers at the version 4.0 level and below). CSS3 is currently under development. You can follow its progress as new drafts are published.
A style sheet is a set of one or more "rules" that apply to an HTML document. A "rule" is a statement about one stylistic aspect of one or more HTML elements (tags). Rules can be separated into two distinct components: selectors and declarations.
HTML tags or "elements" are also known as selectors in CSS. The selector becomes the link between the style and its application in the document. All HTML tags are potential selectors and when a style "rule" is created for an HTML tag, it will effect all occurrences of that tag in the document..
Two varieties of selectors may be used:
A CSS declaration consists of two parts:
CSS1 supports more than 50 different properties which can be applied to selectors (HTML tags) to determine their presentation in an HTML document.
Properties include:
selector { property: value; } ================= declarationFor example, to cause the first line of a paragraph to indent:
p { text-indent: 3em; }
P is the selector, and the rule has just one declaration - that the text-indent property of the paragraph will be 3em. If this style was in your document, it would indent all paragraphs 3ems.
CSS was designed to be a concise style language, so there are many ways to keep the size of your style sheets down. Also, short style sheets will load more quickly than lengthy ones. One way to keep the style sheet "lean and mean" is to use a single statement to apply several stylistic options to a single element (see example below).
H1 { color: red; } H1 { font-size: 1.75em; } H1 { font-family: arial, helvetica, sans-serif; } H1 { background: white; }Can be reduced to a single statement with multiple declarations:
H1 { color: red; font-size: 1.75em; font-family: arial, helvetica, sans-serif; background: white; }
It is also possible to apply the same style declaration(s) to several elements at the same time (see example below).
H1 { color: red; font-family: arial, helvetica, sans-serif; background: white; } H2 { color: red; font-family: arial, helvetica, sans-serif; background: white; } H3 { color: red; font-family: arial, helvetica, sans-serif; background: white; } H4 { color: red; font-family: arial, helvetica, sans-serif; background: white; }Can be reduced to a single statement:
H1, H2, H3, H4 { color: red; font-family: arial, helvetica, sans-serif; background: white; }
STYLE=
attribute with most HTML tags.
<STYLE></STYLE>
container to enclose one or more style statements; this is included in the
<HEAD>
section of the HTML file.
<LINK>
element. This method allows you
to maintain a single style sheet and apply it easily to multiple HTML pages.
@import
notation. This method is used to automatically import and merge an external
style sheet with the current style sheet.
STYLE=
Attribute - Inline StylesWherever you previously used a formatting attribute (e.g., ALIGN=
,
TYPE=
, BGCOLOR=
, etc.) or a separate character formatting
tag (e.g., <FONT>, <B>, <I>,
etc.), you can now
replace it with a "style property." This is done by using STYLE=
attribute within individual container tags. However, for the value of the attribute,
use only the "declaration" portion of the style syntax (separating
each style declaration with a semicolon ; ). See example below:
STYLE="text-align: justify; font-family: arial, helvetica, sans-serif;"
The example below uses two properties: background-color
and font-family
within the <SPAN></SPAN>
container.
<SPAN STYLE="background-color: #ffcccc; font-family: arial, helvetica, sans-serif;"> This paragraph is in bold and italics</SPAN>Produces this effect:
This text is on a pink background and in a different font.
The <SPAN>
tag is new in HTML 4.01 and is specifically for
adding inline style information to a "span" of text. Use the <SPAN>
tag for small areas of text, within a paragraph, that you wish to apply style
information to.
When you want to apply inline style information to an entire paragraph, it
is better to use the STYLE=
attribute with the <P></P>
container tag. In addition, the STYLE=
attribute can be used with
most other HTML tags to apply inline style information. The only tags that cannot
use the STYLE=
attribute are: BASE, BASEFONT, HEAD, HTML,
META, PARAM, SCRIPT, STYLE,
and TITLE
. See more inline style
examples below:
<H1 style="color: red">Cascading Style Sheets</H1> <P style="text-indent: 5em">Styles may be used to: <UL style="list-style: square"> <LI>change the appearance of text <LI>set margins and justification <LI>indent the first line of a paragraph </UL></P>
Finally, for applying inline style information to large amounts of text (containing
other markup) it is best to use the <DIV></DIV>
container
with the STYLE=
attribute. See the example coding below:
<DIV STYLE="background: #ffffcc; font-family: arial, helvetica, sans-serif;"> <A HREF="http://www.loc.gov/poetry/">Poetry in America: A Library of Congress Bicentennial Celebration</A> <BR> Poet Laureate Robert Pinsky and other renowned poets and individuals will read their favorite poems and participate in a symposium, <CITE>"Poetry and the American People,"</CITE> at the Library on April 3 and 4. The event will be cybercast live. </DIV>
Inline styles work well when applying a style, one time, to an individual tag. However, if you want to use the same style many times in the same document (or in a series of documents) it is much better to create a single style sheet, then apply the styles as needed throughout the document.
<STYLE>
Tag - Internal Style SheetsThe simplest way to apply a style sheet (with multiple statements) to a single
HTML document is by enclosing it in the <STYLE>
tag. The
<STYLE>
tag is an HTML container (both the opening and closing
tags are required). It is also an "invisible" HTML element -- its contents do
not display in the Web browser window. The <STYLE>
tag goes
in the <HEAD>
section of an HTML document (see example below).
<HTML>
<HEAD>
<TITLE>Test page for CSS</TITLE>
<STYLE TYPE="text/css">
H1, H2, H3, H4, H5, H6 { color: red; background: transparent; }
</STYLE>
</HEAD>
<BODY>
<H1>Cascading Style Sheets</H1>
<P>Styles may be used to:
<UL>
<LI>change the appearance of text
<LI>set margins and jusitification
<LI>indent the first line of a paragraph
</UL>
</BODY>
</HTML>
Note - Some early versions of browsers
(such as Netscape 1 and Internet Explorer 2) do not
recognize the <STYLE></STYLE
> container tag. As a result,
they not only don't apply the styles to the document, but also will display
the actual style statements in the browser window (which is not desirable).
Therefore, it is a good idea to enclose the "style sheet" statements in an HTML
comment tag in order to prevent this behavior (see example below).
<HTML> <HEAD> <TITLE>Test page for CSS</TITLE> <STYLE TYPE="text/css"> <!-- H1, H2, H3, H4, H5, H6 { color: red; background: transparent; } --> </STYLE> </HEAD>
In both examples, all of the header container tags (<H1></H1>,
etc.)
have been set to display in red, with a transparent
background (always set the background to "transparent" when you want
the main background color to bleed through). This means that all items tagged
as <H1>
in the document will display in red. No further coding
is needed.
While it is very efficient to include style sheet information inside the <HEAD>
section of the HTML file, if you find that you want to use the same styles for
multiple documents, it becomes much more efficient to create the style sheet
in a separate file, and link to it using the <LINK>
tag (it
is also a good idea to include the special <META> tag indicating the CSS
level, see example below). Style sheets can be stored in the same directory
as the Web files, or can be linked to from any location on the Web site (local
or remote) as long as you know the URL. Style sheets are saved using the .CSS
extension. See example <LINK>
tag below:
<HTML>
<HEAD>
<TITLE>Test page for CSS</TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
<LINK REL="StyleSheet" HREF="stylesheet.css" TYPE="text/css"
MEDIA="screen">
</HEAD>
Linked (or external) style sheets should not contain any HTML tags. The style sheet should consist only of style rule statements. A file consisting solely of
P { margin: 2em }
could be used as an external style sheet.
Note: Netscape 4.0 ignores any link tags that use
MEDIA=
with any value except SCREEN.
However, the
MEDIA= attribute is clearly going to be an important qualifier for providing
different style sheets for different audiences/purposes. For instance, one could
express the fonts in point sizes for printing and in percentages or EMs for
screen viewing. This will work for Microsoft Explorer.
What happens when you want an HTML selector (tag) to use a particular style,
but only when it occurs in the "context" or another selector (tag).
A contextual selector simply places a tag within the context of another in the
style definition. For instance, if you wanted the text of list items (the <LI>
tag) to display in blue for unordered lists (within the <UL>
tag), but you wanted the list items to display in green when used in ordered
lists (within the <OL>
tag). This is possible when using
contextual selectors:
OL LI { color: green; } UL LI { color: blue; }
It is also possible to take this a step further. For instance, if you wanted the bullets for the first level of list items in unordered lists to be a "square," the second level a "circle," and the third level a "disc." Here is how the contextual selectors would look:
UL { list-style-type: square; } UL UL { list-style-type: circle; } UL UL UL { list-style-type: disc; }
Please note that there is no punctuation separating each selector.
The HTML document structure employs a hierarchy using the parent-child model. For the purposes of CSS the hierarchy serves to determine what stylistic properties the "child element" will inherit from the "parent element." A fairly typical inheritance model is shown below.
HTML / \ HEAD BODY / / | \ TITLE H1 P OL | / | \ STRONG LI LI LI
Following this model, any properties set for the <BODY>
element would inherit down to all children (in the above model, to H1,
STRONG, P, UL
, and LI
). If text COLOR
were
set to "red" and FONT-FACE
were set to "Arial," those settings
would affect all elements hierarchically under <BODY>
. Likewise,
all styles set for the <P>
element would inherit to all elements
hierarchically within the "paragraph" (with the exception of the <A>
"anchor" element which does not inherit, but instead has its own special style
settings). You may have actually been aware of this behavior within your document
"before styles," but you will need to be more actively aware of inheritance
when trying to debug your styles.
It is possible to override the natural hierarchical inheritance of HTML by applying specific styles to "child"
elements that differ from what is inherited from the "parent." For instance, if you set the text COLOR
to
"black" for the <BODY>
element, naturally all text would be black within the body of the
document. However, if you wanted <H1>
to be "blue" and <H2>
to be "green" and "italics" you could write separate style statements for H1
and H2
which
would override the natural inheritance from <BODY>
. If I inherited "red hair" from my
mother, I could override it by dying my hair "black," but all of my siblings might still have red hair, or they might choose
to dye their hair another color.
The "cascading" of CSS is what makes this type of style sheets so powerful. Much like "inheritance" multiple style sheets may be applied to a single document. The "cascade" determines which one take precedence. Three types of style sheets might be available for a single document:
In the current "cascade model," the Browser Style Sheet is overridden by the User Style Sheet which is, in turn, overridden by the Designer's Style Sheet. However, the important concept to remember is that elements from all three levels are combined to determine the final style sheet. Settings that are not specified by User or Designer may still be coming from the default Browser style sheet.
h1 { font-size: 150%; font-weight: bold; font-style: normal; font-face: "Times New Roman", serif; }And the User style sheet sets H1 to 125%:
h1 { font-size: 125%; }Finally, the Designer style sheet sets H1 to 135% and italics:
h1 { font-size: 135%; font-style: italic; }The only property that carries over from the Browser style sheet is the "bold" font-weight value. The size was overridden, using the cascade order, first by the User and then by the Designer. Finally, the font-style of Italics was added, also by the designer. The final combined style would be:
h1 { font-size: 135%; font-style: italic; font-weight: bold; }
The cascade also applies to multiple styles sheets applied to the same document. For instance, a document may have a Linked Style Sheet, an Embedded Style Sheet, as well as a few Inline Styles. If there were conflicting styles:
Now you know how to make all paragraphs green or all level 1 headings bold.
But suppose you only want some paragraphs to be green, or some
level 1 headings to be bold? This is done by creating and using "classes"
of styles and using the CLASS=
attribute to apply that style to
an HTML element. All elements in the BODY of the HTML document can use the CLASS=
attribute. Classes establish grouping schemes for identifying HTML tags within
a Style Sheet. Different HTML tag types can share the same Class Name
value - this allows an entire class to be identified by a common label.
When applying a class to a specific element, a period (".") is used to separate
the HTML element name from the class name (e.g., body.blackback
in the example below). To create a class which could apply to any appropriate
tag, use only the class name with a leading period as a selector (e.g., .center
in the example below) .
body {font-family: arial, helvetica, sans-serif; color: #000000; background: #ffffcc; } body.blackback {font-family: arial, helvetica, sans-serif; color: #ffcc33; background: #000000; } .center {text-align: center;}
CLASS=blackback
is specified inside the <BODY>
tag (e.g. <BODY CLASS=blackback>
). The .center
class can be used with most tags to center align (e.g. <P CLASS=center>...</P>
or <DIV CLASS=center>...</DIV>
).
CSS1 defines five pseudo-classes that you can use to define styles for specific types of elements in your pages.
A:link - unvisited links A:active - active links A:visited - visited links P:first-line - first line of a paragraph P:first-letter - first letter of a paragraph
A pseudo-class can be recognized by the colon separating the selector (HTML tag) and the "special" quality of that selector (for instance, A:link is used to define a style for the anchor tag for "unvisited links"). So, to make unvisited links red, visited links blue, and active links green, you would write the following styles:
A:link { color: red; } A:visited { color: blue; } A:active { color: green; }
A commonly asked question is "How can I turn link underlining off?" Before you do, be sure that there are other cues to let the reader know that there are clickable links there, e.g., they are in an area that is clearly a navigation menu. To make changes, selectively to the anchor tag, a special class called the pseudo-class is used. A style sheet that turns off the text underlining for the anchor tag is displayed in the box below:
A { text-decoration: none; }These style rules set up classes for turning off link underlining selectively:
A.nound { text-decoration: none; }The HTML encoding using the special class would look like this:
<A CLASS="nound" HREF="index.html"> This is a clickable link</A>.
Here is a sample of how that link would look -- This is a clickable link. If you wanted to set special classes for individual pseudo-classes (say you wanted the "unvisited link" to be blue with no underlining) you would use the following syntax:
A.myclass:visited {color: red}
Maintained by the Network Development and MARC Standards Office
Links to detailed documentation on Web Design Group site are provided.