CSS Terms and Syntax

Stylesheet
A set of rules for formatting a document

Cascading
Refers to the ability of stylesheets to inherit characteristics from a previously applied stylesheet while adding or changing rules.

Linked Stylesheet
A stylesheet written as a separate document. It is connected to a page by putting in the HEAD of the page:
<LINK rel="stylesheet" href="nameOfFile.css" type="text/css">
where "nameOfFile" is the actual name of your file, of course.

The styles in a linked stylesheet can therefore be used by many documents. Changing the original stylesheet will automatically change all documents that use it.

Embedded Stylesheet
A stylesheet that is defined in the HEAD of the page itself. Applies only to that particular page. Overrides styling from a linked stylesheet. All the rules are written between STYLE tags:
<HEAD>
<TITLE>My Page</TITLE>
<STYLE>
.....listing all the rules.....
</STYLE>
</HEAD>

Inline Stylesheet
Styling that is applied within the document text. It overrides both linked and embedded styling, but applies only at that one spot.
<SPAN STYLE="color:red">
This SPAN tag would set the text color to red.

Rule
A statement of the styles being set. For example:  
h3 {color:teal;
font-family:"Comic Sans MS", Helvetica, sans-serif;
font-size:12pt;}
is the rule that formats the words on the left on this page.
A simple rule has the form:
selector {property:value}

Selector
The part of the rule that states what element of the page the styling will affect. For the rule   P {font-size:10pt}
P is the selector. This rule sets all paragraphs to 10 points in size.

Declaration
The part of the rule that declares what formatting is applied to the selector element. In the h3 example above all the statements between the braces { } form the declaration.

A declaration is of the form:    property:value
In the rule    P {font-size:10pt} the property is font-size and the value is 10pt

Class
A variation on an element tag. Below we see a rule for ordinary paragraphs and one for a class named second.
P {font-size:12pt;
      color:blue;
      font-family:"Times New Roman", Times, serif;}
P.second {font-family:Arial, Helvetica, sans-serif}
While the rule for the P element is applied whenever you use the P tag, you must call the class specifically. To apply the P.second rule, you would use the syntax:
<P CLASS=second> instead of <P> in your document.

Note that the P.second rule inherits from the P rule those settings that it didn't specifically reset. So,in this case, using <P class=second> will give you blue 12 point text but in Arial instead of Times New Roman.

Block-level element
Elements which result in a new line. Includes those like P DIV H1 BLOCKQUOTE
Some properties, like margins, can be set only for block-level elements.

Script
A short (relatively) piece of computer code using a scripting language like JavaScript, Visual Basic, or Perl. A script is used to create a response to user actions on the page. JavaScript operates on the viewer's computer, so the browser must support it. Perl, for example, sends info back to the web page's server for action there.

Syntax Tips

  • To keep browsers that don't understand styles from displaying the rules between the <STYLE> tags, you must trick the browsers into thinking your code is a comment.
    <STYLE>
    <!--
    .....your rules...
    -->
    </STYLE>
    Don't write anything after the <!-- or your first rule will be ignored! You can put an extra set of braces { } after the words if you really want to include a comment.
     
  • Use a semicolon ; to separate multiple properties in your rule declaration.
     
  • You don't have to have the semicolon just before the ending brace }, but it doesn't hurt.
     
  • Your code is easier to read if each property is put on separate line. The line breaks are ignored by the browser.
     
  • All your styling for a particular selector must be set in a single rule. You can't list it twice, in other words.
     
  • Separate the property and value with a colon : , not equal = sign. This one is Oh So Hard!
     
  • In a rule, surround font names with quotes if the name has spaces.
    Right:   {font-family:"Times New Roman",Times,serif}
    Wrong:  {font-family:Times New Roman, Times, serif}
    Errors may make the browser ignore statements that follow, too!

    In fact, any error in your code, like not putting the unit with in a property like font-size, can cause the whole rule or parts to be ignored by some browsers.
     

  • For the standard tags, like P, H1, UL LI,  your styles will be applied automatically.
     
  • Sometimes the order you list multiple properties seems to make a difference. If a setting is not being used and the punctuation and spelling are correct, try switching the order. Keep all font properties together. Try listing background settings before font settings.
     
  • Apply the CLASS variations by adding CLASS=nameOfClass to the element's tag, like
    <p class="specialcase">.
     
  • Inline styles use STYLE="....." rather than CLASS, like
    <p style="font-family:Arial,sans-serif;">.
     
  • Remember that some properties, like margins, only apply to block-level elements. So don't try to use them with SPAN, for example.