Jan's CSS Terms & Syntax

Style sheet

A set of rules for formatting a document

Cascading

Refers to the ability of style sheets to inherit characteristics from a previously applied style sheet while adding or changing rules.

External or Linked Style sheet

A style sheet written as a separate document. It is connected to a page by putting code 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 style sheet can therefore be used by many pages. Changing the original style sheet will automatically change all documents that use it.

In a linked style sheet you can define a style for any HTML element, like H1 or P or TABLE, or you can create classes that can be applied to an HTML tag. You can also create an ID selector to style an element with a particular ID. The ID can appear on a page only once.

Internal or Embedded Style sheet

A style sheet that is defined in the HEAD of the page itself. Applies only to that particular page. Overrides styling from a linked style sheet. All the rules are written between STYLE tags:

<head>
<title>Example page</title>
<style type="text/css">
body {background-color:#ffffff;
      font-family:Tahoma, Arial, Hevetica, sans-serif;
      font-size:medium'
      color:black;
}
h1 {color:green;}
h2 {color:rgb(80,64,120);}
</style>
</head>


Inline Style sheet

Styling that is applied directly to an HTML tag. It overrides both external and internal 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.

A simple rule has the form:
              selector {property:value}

For example:  
h3 {color:teal;
    font-family:"Comic Sans MS", Helvetica, sans-serif;
    font-size:12pt;}

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.

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. It's part of the 'cascade'.

ID

Any element can have an ID, like <div id="headerarea">. In a style sheet you can create a style that can be applied ONLY to that element. Only one element with each ID is allowed on a page but other pages in the site can also have an element with that ID.
#headerarea {background-color:darkgreen; width:1000px;}

Block-level element

Elements which result in a new line. Includes those like P, DIV, H1, BLOCKQUOTE.
Some properties can be set only for block-level elements and will not be rendered if set for a non-block element.

For example if you set text alignment in a SPAN tag, like
This is my sentence <span style="text-align:center;">with a SPAN tag</span>
The sentence will NOT be centered and neither will the text inside the SPAN tag.

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

WARNING: Punctuation and spelling are critical! If you type fontfamily instead of font-family, your styling will not be used and the styles that follow may be ignored also!

There are many different ways to mess up the code for style sheets. Some browsers will make a guess at what you meant. But leaving out closing characters (quotes, braces, tags) can scramble a page or make the browser ignore what came next.

  • (Old browsers) 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.
     
  • Semicolon: 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 helps you avoid an error if you add a new property later.
     
  • Separate line for each property: Your code will be easier to read. The line breaks are ignored by the browser.
     
  • Dont' repeat selectors: Styling for a particular selector should be set in a single rule. Don't list it twice in the same style sheet.
     
  • Group selectors for common rules: You can list several selectors (separated by commas) to set rules that they all have in common and then do separate selectors for the properties that they don't have in common.

    For example, headings H1, H2, and H3 can share a font-family but have different text-align values.

    h1, h2, h3 {font-family:Georgia, "Times New Roman", Times, serif;}

    h1 {text-align:center;}

    h2 {text-align:left;}

  • Colon: Separate the property and its value with a colon : , not equal = sign. This one is Oh So Hard!
     
  • Names with spaces: 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 cause other errors: Errors may make the browser ignore statements that follow. This can totally confuse your layout and formatting!

    In fact, any error in your CSS 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.

  • HTML elements: If you create a style for a standard tags, like P, H1, UL, and LI,  your styles will be applied automatically everywhere those tags appear. Create once, apply everywhere!
     
  • Order: Sometimes the order you list multiple properties in a style 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. The order of styles is always important.
     
  • How to apply a class: Add CLASS="nameOfClass" to the element's tag, like
    <p class="specialcase"> 

      The class is defined in an external or an internal style sheet.
     
  • How to apply an inline style: Inline styles use STYLE="....." rather than CLASS, like
    <p style="font-family:Arial,sans-serif;">
    Try not to use inline styles very often. It is harder to edit if you change your mind!
     
  • Block properties only for block elements: Remember that some properties, only apply to block-level elements. So they won't work with SPAN, for example.