Cascading Style Sheets: CSS
Cascading Style Sheets (CSS) is a language for specifying various aspects of the style of HTML elements. In this section we will provide only an overivew of the most common uses of CSS. The reader who want to go into more depth can visit the official source for CSS, the World Wide Web Consortium site at

  http://www.w3.org/Style/CSS

An interesting site that shows the potential of CSS is given below. This site shows one webpage with a dozen or so different style sheets.

  http://www.csszengarden.com/

There are several ways of adding style to HTML. We will focus on the "inline" method and discuss the other methods at the end.

Some other useful sites are

  the www.htmlhelp.com reference pages
  the zvon.org resource page
  the w3schools.com CSS tutorial
  the w3schools examples page

The Style Attribute

The key idea behind CSS is that it provides uniform methods for defining the style of HTML elements. The style attribute is one such method. Every HTML element in the body of an web page can have a style attribute. The style attribute has the form: style="Prop1:Value1; Prop2: Value2; ... ; PropN: ValueN" Observe that the style specification is enclosed in double quotes and consists of a sequence of Prop:Value specifiers, separated by semicolons. There are eight basic properties: font, color, background, margin, padding, border, width, height. These are applied to an HTML element by imagining that the element is contained in an invisible box. The element can be as small as a single charater,chapter like word. At the other extreme, the box for the body tag is the entire web page.

Parent and Children styles

As you have noticed, many HTML elements can contain other HTML elements. For example, the body element can contain heading, paragraphs, tables, etc. We say that the outer element (in this case the body element) is the parent and the inner elements are the children. Many CSS styles are inherited by children. For example, if you set the background color of the body to yellow, then all elements in the body will also be yellow (unless explicitly specified otherwise).

The font Property (WDG)

The font property accepts values that specify how the text that appears within the element should be rendered. The minimal form of the font propery specifier is style="font: STYLE SIZE FAMILY ; .... " where STYLE is typically "bold", "italic" or simply omitted, SIZE is typically expressed in points, e.g. 12pt, and FAMILY is one of the following standard font families: serif, sans-serif, cursive, fantasy, monospace. Thus, one could create a heading with large sans-serif letters as follows: One can also specify that the font should be italic or bold and one can specify the spacing between the lines along with the font size. For example, the following element defines a paragraph with a bold italic 12 point serif font, and the paragraph is doubled spaced as the spacing between every two lines is 24 point. The five font families listed above are supported on all CSS-capable browsers, but CSS allows the web designer to specify less common font families as well (e.g. 'Helvetica'). One problem that may arise with this freedom is that there is no guarantee that the browser that views your web page will have the font you have specified. CSS compensates for this by allowing the designer to specify a sequence of font families, separated by commas, ending with one of the standard font families. A CSS-capable browser will use the first font on that list which is currently available, and in the worst case will just use one of the five generic families. For example, the following heading specifies that the Irish Ultra font should be used if possible, otherwise the browser should use ariel, or helvetica, or if all else fails, sans-serif. Note that the single quotes around 'Irish Ultra' are needed because the font name contains a space. Note that all of these font properties can be set independently using the font-ZZZ properties. Details can be found here. For example, the following

The color Property (WDG)

The color property of a style attribute specifies the text color of an HTML element. The particular color itself can be specified in several ways:

• Using one of the sixteen standard HTML colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
• As a hexadecimal number in the form #rrggbb where r,g,b are hexadecimal digits: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
• As a 3 digit hexadecimal number #rgb
• As a term of the form rgb(R,G,B), where R,G,B are numbers between 0 and 255
• As a term of the form rgb(R%,G%,B%), where R,G,B are decimal numbers between 0.0 and 1.0.

In each case but the first, the color is specified as a combination of red, green, and blue light, and the R,G,B parameters specify how much of each of the primary colors to use in the desired color. For example, the following html segment shows how to specify the color of individual words in a sentence:

The background Property (WDG)

The background property can be used to specify the color of the background using the same syntax as the color property. For example, to make a heading with red letters on a black background you could use: <h1 style="font: 48pt serif; color:red; background: black"> Warning!</h1> This property is more versatile however, in that it can also be used to specify a background image rather than a color. In this case, the value of the property is a webaddress of the form url(page.gif) or url(http://x.com/page.gif) or For example, the following body tag specifies that the sincos3.jpg image should be used as the background for the page:

The border Property (WDG)

CSS allows you to put borders around the box enclosing any HTML element. The general form is style="border: WIDTH STYLE COLOR" where

• WIDTH is one of thin, medium, thick, or is a distance measured in pixels (e.g. 10px, ) or absolute units, e.g. 0.1in, 1cm, 8.2mm, 2pt, 0.3pc.
• STYLE is one of none, dotted, dashed, solid, double, groove, ridge, inset, outset
• COLOR is a color as specified in the color property discussed above.

For example, we can specify a heading with a thin, solid, blue border as follows: Observe that the order of the width, style, and color parameters is not important.

The width, height Property (WDG)

These two properties refer to the size of the box that contains the element. These can be expressed in distance units (as with the WIDTH property of borders above). The width can also be exrpessed as a percentage (being interpreted as a percentage of the width of the parent element.) For example, the following code creates a 1x2 inch blue box:

The margin (WDG) and padding (WDG) Properties

The padding is the distance between the border of an element and the content. The margin specifies the distance between the parent and the border of an element. These can be expressed as lengths or as percentages of the parent elements width. You can express a single distance for the padding of all four sides (top, right, bottom, left) as <div style="padding:0.5in">first example</div> Or you can specify a separate padding for each, in the order top, right, bottom, left. <div style="padding:0.1in 0.2cm 0.3in 10px">second example</div> The margins are specified in the same way: <div style="margin:0.5in">first example</div> <div style="margin:0.1in 0.2cm 0.3in 10px">second example</div>

The vertical-align (WDG) and text-align (WDG) Properties

The horizontal alignment can be specified to be one of the following left, right, center, justify. For example, a centered heading is specifed by <h1 style="text-align:center; font: bold 24pt sans-serif">Greetings</a> Finally, the vertical alignment of an HTML element can be specified to be one of baseline, sub, super, top, text-top, middle, bottom, text-bottom or a percentage (which is relative to the interline width and can be negative for lowering an element). For example, you can lower an image by <img src="abc.jpg" alt="dog" style="vertical-align: -50%">