link to hitmill.com home page


CSS Tutorial:A Cascading Style Sheets Rule

This article introduces the student to Cascading Style Sheets technology, a Cascading Style Sheets rule containing a selector and a declaration and how to apply CSS to HTML code and HTML documents in order to bring more style to Web pages.

A Cascading Style Sheets rule is made up of a selector and a declaration.

H2 {color: blue;}
selector {declaration;}

The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be. For example, "color:blue".

The selector specifies which element(s) will be affected by the delaration. Think of the selector as a link of sorts between the HTML mark-up document and the style of the Web page. A selector that refers to an HTML element is called a type selector. (Other kinds of selectors will be discussed later). Any HTML element name can be used as a type selector. HTML "tags" without content ("empty containers") such as <BR> or <HR> can not be used as a selector. They are not included in the current CSS specification.

A declaration has two parts separated by a colon: property and value.

selector {property:value}

More than one declaration may be placed inside the curly braces and a semi-colon must separate each declaration from the next. The ending declaration does not require a semi-colon but I like to use it.

selector {property:value; property:value;}
H2 {color:blue; font-family:Arial, sans-serif;}

(I like to use an ending semi-colon after the last declaration just so that I do not forget it when I add a new declaration at a later time). If you neglect to place a semi-colon between any two declarations your style sheet will seriously malfunction or totally fail.

Instead of coding

H1 {font-family:Arial, Helvetica, sans-serif;}
H2 {font-family:Arial, Helvetica, sans-serif;}
H3 {font-family:Arial, Helvetica, sans-serif;}

You may group selectors together. When grouping selectors you will need to separate each selector with a comma. When grouped together, one rule applies to several selectors.

H1, H2, H3 {font-family:Arial, Helvetica, sans-serif;}

The grouping means the same thing as the 3 lines above.

I want to mention the font-family property for a minute.

H2 {font-family:Arial, Helvetica, sans-serif;}

This rule says that Arial will display if it is available on the user's computer, otherwise Helvetica will display if it is available. If neither font is available on the user's computer, then the user's default sans-serif font will display. What if there is no sans-serif font available? Well then, the default font of the installed browser will be displayed on that user's computer but the next user may have Arial available. You are merely stating your own font preferences but font's are not guaranteed to be displayed using CSS rules alone. Fonts may be downloaded to your computer.

You need to know about when to use or not use quotation marks when declaring values for the font-family property. The rule of thumb is easy to remember. The only time you will use quotation marks is when specifying a multiple word font-family value such as "Times New Roman". You will not use quotation marks for single word or hyphenated values of the the font-family property.

H1 {font-family:"Comic Sans", Arial, sans-serif;}

Now you have seen the properties of color and font-family. You are wondering how to get these rules into your Web document. You can use an internal style sheet with the mark-up coded in the <HEAD> section of the HTML document. Begin with <STYLE TYPE = "text/css"> and end your internal style sheets rules with the </STYLE> tag. (See the code example below.) You should use the HTML opening comment mark of <!-- to precede your style sheets and the --> to close your style sheets prior to the </STYLE> tag, to hide your code from older browsers. Style sheets only work with the version 3.x or higher versions of Netscape Navigator, Internet Explorer, and Amaya (located at W3C.org) as of this writing.

Internal Style Sheet

In the code below, the markup for the internal style sheet (CSS rules) is in red and the markup for the regular HTML is in black.

<STYLE TYPE="text/css">
H1{color:#FF6342; text-align:center;
font-family:Tahoma, sans-serif;}
H2{color:#FF9473; font-family:Tahoma, sans-serif;}
 P{color:navy; font-size:11pt;
   font-weight:600; letter-spacing;1px;
   font-family:Tahoma, sans-serif;

<BODY BACKGROUND="../../html/images/bg_hitmill4.jpg" BGCOLOR="cornsilk">
<DIV ALIGN="center">
<H2>CSS Tutorial:<BR>Internal Style Sheet</H2>
<P>Each HTML document may have only one internal style sheet but may also link to external style sheets. We will learn about external style sheets in the next lesson.</P> <H3>Color Values</H3>
<P>Color may be expressed as a named color or as an RGB value preceded by the octothorp (pound sign,#). No quotations are used for CSS color property values.</P>
<H3>Paragraph Considerations</H3>
<P>When using P as a selector for paragraphs in CSS rules you must also close each HTML paragraph with the </P> or the CSS rule will not work.<P>

Dont worry too much about spaces. They are not critical in style sheets. Break the line where it is convenient to do so. It will be easier to edit your style sheets if they do not run off the screen so that you have to scroll to edit them. Usually you will find it convenient to place a line break following a declaration rather than in the middle of the declaration. Placing a spacing after a separating semi-colon, between declarations will also help to make a style sheet easier to read.





Updated 11 April 2006
© hitmill.com
All Rights Reserved