JavaScript Lecture

Instructor: Amadou O. Wane
Last update: 11/06/01

Lecture9

Cascading Style Sheet
Cascading style-sheets while suffering from differing implementations, and spotty support in the browsers, is still a very powerful mechanism for controlling the 
overall appearance of your web-pages.

Now you can affect far more tag attributes for each tag then ever before. Not only 
that ,but you can also effect visual aspects never before accessible via stock HTML.

CSS (Cascading Style Sheets ) coding is not really much different than normal HTML coding, and over the next few pages, I'll give you the basic idea, and enough 
knowledge to start messing with it yourself.

CSS is a Recommendation from the World Wide Web Consortium (W3C) that gives 
authors and readers more control over the look and layout of HTML & XML documents.

Using CSS, you can control:

  • fonts, font sizes, and font colors
  • line spacing and length
  • margins and indents
  • background images and colors

... and much more.

You can embed a style sheet inside an HTML document, or insert a link to an external style sheet that can influence any number of documents.

Among the benefits of using CSS to authors are:

  • the HTML code becomes much simpler and more manageable
  • using relative measurements in your style sheet, you can style your documents to look good on any monitor at any resolution.
  • you have finer and more predictable control over presentation
  • you can define the look of a site in one place, and change the whole site by changing just the one file
  • people with older browsers can still see your pages
  • people with disabilities have better access to your pages

CSS is implemented in several browsers, including Microsoft Internet Explorer, Netscape Navigator, Mozilla, Konqueror and Opera.

CSS is a set of page markup definitions that can be applied to HTML documents to define how pages are rendered. This addition to the HTML tag set can be applied by Authors internally in each HTML document or they can reside in a separate server side file that is referenced and applied to the document. The end user may also define their own Style Sheet that resides on their local system to be applied to all of the documents that they browse.

So, what are the advantages of CSS and HTML over plain HTML? For web site managers the use of an external file containing style sheet definitions means that they can control the formatting of their pages across their site without the need to edit each individual file. This is also very important when pages are generated by databases and CGI scripts.
The use of CSS commands inside a document can provide authors extended formatting features to allow specific information to be presented to the viewer in an exacting method.

For the end user the use of a client side Style Sheet to modify how all documents are displayed can offer the ability to view information with a consistent style. For users with disabilities CSS can offer readable Font sizes, colors and face choice and in the future it will also add formatting that will instruct how pages are converted to synthesized speech.

What are the drawbacks of CSS?
Browser compatibility must be the most common difficulty. Anyone that has had problems trying to keep their JavaScript compatible across browsers and even within different versions of the same manufacture's browser knows that making working documents that are consistent often means not using such features. If a Browser is incapable of implementing CSS it should be able to ignore the CSS style selectors and revert to standard HTML. However if you are creating documents for a closed audience, as would be the case in a Corporate Intranet environment, the probability of successful implementation is much greater.

Another factor that Webmasters should be aware of concerning the use of an external file to define CSS Declarations is that the End user will have to access 2 files to view their pages. This possible initial lag should be weighted against the overall load that would be placed on the server if every HTML file required additional data to be added to define the CSS information internally. Analysis of Initial lag vs. overall server load would be dependent upon the amount of CSS use across the site.

Example:
<style type="text/css" >
P { color:#ff0000 }
</style >


External CSS 
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

 

In the example above the HTML element <P> has a color declaration and the value is a rrggbb color of #ff0000 . The result would be that all paragraphs would be formatted to be displayed with a font color of red. However the Author could override this Style Declaration Value by using a child element like < font color="blue" > inside of the paragraph.

Another important note is that where it was once common to leave the <P> tag open Authors should now take care to close it with a </P> to make sure that Style Declarations are properly controlled.

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:

body {color: black}

If  the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you should separate each property with a semi-colon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align: center; color: red}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. Each header element will be green:

h1, h2, h3, h4, h5, h6 
{
color: green
}

The class Attribute

With the class attribute you can define different styles for the same element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

//Dependent Class
p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:

//Dependent Class
<p class="right">
This paragraph will be right-aligned.
</p> 

<p class="center">
This paragraph will be center-aligned.
</p>

You can also omit the tag name in the selector to define a style that can be used by many elements:

//Independent Class
.center {text-align: center}

In the code below both the h1 element and the p element are classed with "center". This means that both of the elements will follow the rules in the ".center" selector:  

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

The id Attribute

The id attribute has to be unique on the page. There can only be one element with a given id in a document.

They are marked in the HTML document with id instead of class:

<p id="intro">
This paragraph will be right-aligned.
</p>

The id attribute can be defined in two ways. It can be defined to match all elements with a particular id, or to match only one element with a particular id.

In this example the id attribute will match all elements with id="intro":

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

In this example the id attribute will match only p elements with id="intro":

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}