Cascading Style Sheets / Syntax | WebReference

Cascading Style Sheets / Syntax

Style Sheet Syntax

This article is excerpted from the title HTML Web Publishing SECRETS from IDG Books. The author contributed a chapter on HTML.

Style sheets are composed of simple CSS rules. A rule consists of two main parts: a selector ('H1') and declaration ('color: blue'). The declaration has two parts, property ('color') and value ('blue').

H1       { color    : blue  }
Selector { property : value }

This simple example only influences one of the properties of one HTML element, but it still qualifies as a style sheet on its own. Combined with other rules and style sheets it will determine how the document appears.

The selector is a link between the HTML document and the style, and all HTML tags are potential selectors. Designers only need to create their own style sheets if they want to suggest a specific style for their documents. Every browser has its own default style sheet.

l

Grouping

You can group selectors and declarations to save space.

H1, H2, H3 { font-family: Arial }
H1 { font-weight: bold; font-size: 14pt; line-height: 16pt; 
     font-family: Arial }
l

CLASS Selectors

To increase the level of control over elements, use the CLASS attribute. All elements inside the BODY tag can be classed, and you define the class in the style sheet.

<HTML>
 <HEAD><TITLE>Class Example</title>
  <STYLE TYPE="text/css">
   H1.artdeco { color: #00FFFF }
  </STYLE>
 </HEAD>
<BODY>
 <H1 CLASS=artdeco>Boy, that's a loud color!</H1>
</BODY>
</HTML>

You can also define an entirely new class by omitting the tag name.

.artdeco { color: #00FFFF; font-family: geneva; font-size: 14pt }

This can be used with the DIV tag, to group artdeco style content together.

l

Contextual Selectors

You can use inheritance to save even more typing. Instead of setting all style properties, you can create defaults and list the exceptions. To give 'EM' elements within 'H2' a different color and render as italic do the following:

H2 EM { color: red; font-style: italic }
l

Pseudo-classes and Pseudo-elements

Normally style is attached to an element based on its type or class. For even finer control you can use pseudo-classes and pseudo-elements. Pseudo-elements are used to address sub-parts of elements, and pseudo-classes address different element types. In the pseudo-class below, different types of Anchors are addressed:

A:link    { color: red }      /* unvisited links */
A:visited { color: blue }     /* visited links */
A:active  { color: yellow }   /* active links */

Pseudo-elements are used for common typographic effects such as initial caps and drop caps. These effects cannot be accomplished with structural elements alone, but the SPAN element could also be used (i.e., .dropcap { font-size: 200%; float: left } and use SPAN CLASS=dropcap to surround the character).

<HTML>
 <HEAD><TITLE>Pseudo-element example</title>
  <STYLE TYPE="text/css">
    P { font-size: 14pt; line-height:16pt; font-family: helvetica }
    P:first-letter { font-size: 200%; float: left }
  </STYLE>
 </HEAD>
<BODY>
 <P>This sentence will have a drop cap, look Ma no FONT tag!</P>
</BODY>
</HTML>

The problem with this method is that all paragraphs would start with a drop cap. A better way is to combine a pseudo-element with a class.

P.initial:first-letter { font-size: 200%; float: left }
<P CLASS=initial>First paragraph</P>

Note that this technique does not work in Internet Explorer 3. To achieve the same effect we used the SPAN tag with an "initial" class:

<P><SPAN CLASS=initial>S</SPAN>tyle sheets...</P>
l

Applying Styles

Now that you've taken a crash course in style syntax, how do you actually apply this newfound knowledge to the real world? Fear not stylewalker. The following HTML shows the four ways to attach style to a document.

<HTML>
  <HEAD>
    <TITLE>title</title>
    <LINK REL=STYLESHEET TYPE="text/css" 
      HREF="https://style.com/elaborate" TITLE="elaborate">
    <STYLE TYPE="text/css">
      @import url(https://style.com/corporate);
      @import url(https://style.com/division);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P STYLE="color: green">While the paragraph is green.
  </BODY>
</HTML>

These four ways are:

Local Style with the STYLE Attribute

Using the STYLE attribute to a HTML tag mixes style with content and loses the advantages of style sheets. For quick and dirty styles it is supported but discouraged. Here's an example:

<P STYLE="font-size: 18pt">This paragraph is in 18-point text. 
Yes, I know it's a kludge but I'm just 
illustrating a point (size) here.</P>

The DIV and SPAN Elements

You can also include the STYLE attribute in the new DIV and SPAN elements. The DIV element is used to enclose a DIVision (chapter, section, etc.) of a document that you want to give a distinctive style. The SPAN element is generally used within paragraphs, when none of the other HTML elements (EM, STRONG, VAR, CODE,...) apply.

<P><SPAN STYLE="font-size: 14pt">T</SPAN>his is an example of a 
drop cap using the STYLE attribute to the SPAN tag. 
See above for a better way.</P>

You can see it's easy to add local style rules. But it's harder to go through a document and change a large number of these attributes than it is to change a few of them at the top of a document. That's where the STYLE element comes in.

Global Style with the STYLE Element

A better way to standardize the look of a few Web pages is to insert a style sheet at the top of each page. This will ensure that different elements of your document, paragraphs, headers, lists, will all look the same throughout each page.

To include style rules within a HTML page you just add one or more STYLE elements in the HEAD (or BODY).

<HEAD>
<TITLE>Style Element Example</title>
 <STYLE TYPE="text/css">
  H1 { color: blue}
  P  { color: green}
 </STYLE>
</HEAD>

This simple style sheet sets all H1's to blue and all paragraphs to green. You can begin to see the power of style sheets, one change and everything in the page changes. Older browsers will ignore the STYLE tags but print the style statements. To avoid this, enclose them in a comment:

<HEAD>
<TITLE>Style Element Example - with alternative fonts</title>
 <STYLE TYPE="text/css">
 <!--
  H1  { color: blue; font: 18pt Arial bold }
	 P   { color: green;
        font-size: 12pt;
        font-family: Arial, Geneva, Helvetica, sans-serif;
        text-indent: 0.5in }
  A   { text-decoration: none; color: red }
 -->
 </STYLE>
</HEAD>

You can group style rules with the semicolon. Here I've defined level one headers to be blue, 18pt Arial bold and paragraphs to be green, 12pt Arial, and indented 1/2 inch. Note that I've also defined "fall-back" fonts. Where Window's users will have the Arial font, Mac users probably won't. You can specify alternative fonts, separated by commas, to make sure your text renders similarly. Note the sans-serif, used as a last resort. Links will appear red and not underlined (no text decoration). Netscape 2.0 and above will hide the contents of style elements provided no (non-white) text occurs before the element.

External Style Sheets

The real power of style sheets comes when you link to an external file. The file contains the same rules you'd normally place in the STYLE block at the top of a page.

BODY { background: white; color: brown }
H1   { font: 18pt Arial bold  }
P    { font: 12pt Arial; text-indent: 0.5in }
P.initial:first-letter { font-size: 200%; float: left }
A:link    { color: red }      /* unvisited links */
A:visited { color: blue }     /* visited links */
A:active  { color: yellow }   /* active links */

Say you placed these rules in a file at https://www.surfsup.com/style.css. To link a page to this style sheet just place the following line in the

element: 
<LINK TITLE="new" REL=stylesheet HREF="https://www.surfsup.com/style.css" TYPE="text/css">

In the LINK element the REL attribute defines the type of link. The REL=stylesheet is the key, it links the current page to the referenced file. The beauty of linked style sheets is that you can change the look of thousands of pages by changing one file. This is a big time saver for intranet or large site webmasters.

Imported Stye Sheets

You can import multiple style sheets with the @import url(https://www.style.com/funky); command inside the STYLE element. With the import command, multiple style sheets can affect the same document simultaneously.

l

Inheritance

Now that you know the syntax and how to apply it, it's time to learn about inheritance. Suppose you have a HTML document that refers to a linked style sheet. It's pefectly legal to add other global, local, linked, or imported style sheet definitions to this page. The basic rule is the most specific setting wins, and weights are used in conflicts. Global takes precendence over linked, and local takes precedence over global and linked style sheets. Also, all elements inherit style from their "parents" in the document. The HTML tag is followed by the BODY tag and so on.

This can come in handy in corporate settings, where the chief webmaster can set colors in a corporate-approved sheet, while division webmasters can set header and font sizes in a a divisional style sheet.

l

Cascading Styles

Since multiple style sheets can influence the presentation simultaneously conflicts can arise. Conflict resolution is an integral part of the CSS spec, and is based on each style rule having a weight. Cascading refers to the order in which these conflicting styles are resolved.

l

The Next Style

The W3C has already started on the next version of style sheets, which extends the CSS1 spec to include full 2-D layout capabilities. The preliminary spec "Frame-based Layout via Style Sheets" (https://www.w3.org/pub/WWW/TR/) extends CSS1 to incorporate nested frames, tables, z-axis layering, and precise positioning. This "CSS2" specification approaches the holy grail of total control over you web pages look. Designers can precisely position frames, layer frames and objects along the z-axis, set transparency, and attach scripts to objects. Here's an example:

<HTML>
 <HEAD><TITLE>Example "CSS2" Style Sheet</title>
  <STYLE TYPE="text/css">
   @page { layout: column }
   @frame toc { width: 20% }
   @frame main { width: 80%; }
   UL.toc { flow: toc; target: main }
   BODY { flow: main }
  </STYLE>
<BODY>
 <UL CLASS=toc>
  <LI><A HREF="about.html">About Yoyodyne</A>
  <LI><A HREF="products.html">Products</A>
  <LI><A HREF="clients.html">Clients</A>
 </UL>
<P>Yoyodyne is a world-class maker of high-tech yoyos...</P>
</BODY>
</HTML>

You can see this version of CSS has incorporated frames neatly into style sheets. The @page defines the properties of the outermost frame. The layout can be fill, fixed, row and column. Fill is like a normal HTML page, fixed gives precise positioning control, row and column act just like Navigator frames. The @frame defines a nested frame. To associate HTML elements with frames you use the flow <frame-name> property to name the frame:

P { flow: main }

This causes the contents of all paragraphs to flow into the frame named "main." The targets act just like before, but are much easier to code. The following line defines a "toc" class of unordered lists and targets everything within that class to the "main" frame.

UL.toc { flow: toc; target: main }

Microsoft Explorer 3 supports this new style spec. in their HTML Layout Control. Their initial version is an ActiveX control you can download from Microsoft's Web site at https://www.microsoft.com. Netscape Communicator now supports the CSS1 spec. and JavaScript Style Sheets.

Advantages to style sheets:

Back to the Style Sheets home page.


Comments are welcome


Revised: May 8, 2001

URL: https://webreference.com/authoring/style/sheets/syntax.html