HTML IV, CS2a, Aut01

HTML: Cascading Style Sheets

References:

Cascading Style Sheets

Cascading Style Sheets (CSS) allow one to customize the basic html tags, by changing the properties of the element.

If a browsers doesn't support style sheets, then the tags will have their usual meaning.
CSS allows one to specify a wide range of properties of the text/images that appear inside an html element, e.g., font, color and background, text layout, borders!
CSS allows one to specify different "classes" of paragraphs, headings, lists, tables, etc. that will be displayed differently.

Style sheets are generally stored in a separate file ending in .css

You can also include style statements directly in the head, but I would rather have you put them in a separate file for this class.

A CSS file contains "statements" which explain how the layout of specified html elements should be extended. We will only touch upon the most basic aspects of CSS in this class. The statements we consider here have the form:

SPECIFIER { PROPERTY1:VALUE1 ; PROPERTY2:VALUE2 ; .... PROPERTYN:VALUEn }

where SPECIFIER specifies one of the HTML elements and the PROPERTY and VALUES describe how that element should be laid out.

We will consider only a few properties and their associated values. In today's lecture we consider the following examples of property/value pairs:

font: italic bold 12pt Times, serif
color: red
background-color: #ffccaa
background-image: url(http://www.cs.brandeis.edu/~tim/Applets/sincos3.gif)
border: thick solid blue

The simplest specifier is just an HTML element name. So, if we want to specify that the text color should be black and the background-color white, we would use:


  body {
    background-color: white;
               color: black 
        }

Note: the semicolon separates lines, it doesn't terminate them. So you don't need a semicolon after the last line.

You can also define a "CLASS" which specifies properties that can hold for any element, e.g.


  .strong {
       font: bold Times, serif; 
      color:red}

This would allow one to create bold paragraphs, headings, etc. by including the "class" attribute with value "strong" as follows:

<h2 class="strong">This is a strong heading</h2> <p class="strong"> This is a strong paragraph</p>

Finally, you can specify a class which only holds for a particular HTML element, as in


  p.warning {
             border: thick solid red; 
               font: bold 24pt Times, serif; 
              color: red; 
   background-color: black}

One could then use this with the "class" attribute as above:

<p class="warning"> Read these notes carefully! </p>

This is how that warning looks

Read these notes carefully!

Finally, you can have one CSS file inherit all the statements of another one using the import statement:

/* This is a Cascading Style sheet demo page, notice that these first two lines are a comment! */ @import "http://www.brandeis.edu/~tim/Style/cs2a.css"