Cascading Style Sheet (CSS)

Contents of index

  1. Why Style Sheet?
  2. How to implement CSS
  3. CSS Reference
  4. The design tag which is abolished in the future

Why Style Sheet?

Now Internet Explorer (IE) and Netscape Navigator (NN) have a lot of HTML Tags. Whenever WWW browser revised it, new HTML Tags were added and evolved. The new tag did expression wealthy. And Some Tags are not compatible each other (IE&NN). It is a real headache for Web designer.

And, when Web designer makes Homepage of several pages, each page must make it with an equal design. For example, a title of each page must establish an equal font, size, and a color. It may not be equal font size finally. And if a designer intended to change a design of every page completely, the designer must open it and change every page. It is a real headache for Web designer, too.

HTML Version 4.0 is the latest specification that WWW consortium (W3C) announced (Dec 1997), and it changed compared with specification as before big. It is described that you had better divide structure and layout. It is recommended that HTML describes only structure, and CSS2 (Cascading Style Sheet 2) describe only layout. CSS File (*.css) is used by several pages, and the several pages can keep an equal design.

Some tag of design still exists in HTML 4.0, but these are going to be abolished in the future entirely. For example
<body bgcolor="#FF6600">, <center>, <font>, <h1 align=right>, etc
Goto the design tag list

How to implement CSS

HTML file

HTML file describes only structure. It doesn't use font tag, align tag, center tag, etc...
  • css_sample1.html
    <html>
<head>
<title>CSS sample1</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
  <h1>Page1 Title</h1>
  <h2>Page1 Sub Title1</h2>
  <table border width=80%>
    <tr><th>Dzongkha	<th>Gewong
    <tr><td>THIMPHU	<td>LINGZHI
    <tr><td>GASA		<td>LAYA
  </table>
 <p>
 <a href="css_sample2.html">Go to Page2</a>
</body>
</html>
  • css_sample2.html
    <html>
<head>
<title>CSS sample2</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
  <h1>Page2 Title</h1>
  <h2>Page2 Sub Title1</h2>
  <ol>
    <li>List1
    <li>List2
    <li>List3
  </ol>
 <p>
 <a href="css_sample1.html">Go to Page1</a>

</body>
</html>

    CSS file describes design

  • sample.css 
    BODY { background-color:#EEEEFF; color:black; }
H1 {font-family: Arial Black; font-size: 25pt;
 color:orange; text-align:center; }
H2 {font-family: Arial Black; font-size: 16pt;
 color:blue; text-align:center; }
TH { background-color:blue; color:white; }
LI {color:green; list-style-type:lower-roman}
A:link {color:green; text-decoration:none;}
A:visited {color:blue; text-decoration:none;}
A:hover {color:red; text-decoration:underline; font-weight:bold; }
A:active {color:orange; text-decoration:underline; font-weight:bold; }
  • sample

    Goto sample page

  • other sample1 
    BODY { font-family: sans-serif; background-color:blue; color:white; }
H1 {font-size: 40pt;
 color:white; text-align:center; }
H2 {font-size: 30pt;
 color:white; text-align:center; }
TH { background-color:orange; color:black; }
TD { background-color:white; color:blue; }
LI {list-style-type: disk; color:orange; }
A:link {color:white; text-decoration:none;}
A:visited {color:white; text-decoration:none;}
A:hover {color:orange; text-decoration:underline; font-weight:bold; }
A:active {color:red; text-decoration:underline; font-weight:bold; }
  • other sample2 
    BODY {background-color:yellow; color:pink; }
H1 {font-size: 36pt; text-align:left; }
H2 {font-size: 28pt; text-align:left; }
TH { background-color:pink; color:black; }
A:link {color:blue; text-decoration:none;}
A:visited {color:blue; text-decoration:none;}
A:hover {color:orange; text-decoration:underline; font-weight:bold; }
A:active {color:red; text-decoration:underline; font-weight:bold; }
  • other sample3 
    BODY { font-family: monospace; background-color:green; color:yellow; }
H1 {font-size: 36pt; text-align:left; }
H2 {font-size: 28pt; text-align:left; }
TH { background-color:pink; }
LI { list-style-type: upper-alpha; }
A:link {color:yellow; text-decoration:none;}
A:visited {color:yellow; text-decoration:none;}
A:hover {background-color:pink; color:white; text-decoration:underline; font-weight:bold; }
A:active {background-color:pink; color:white; text-decoration:underline; font-weight:bold; }

    CSS Reference

  • Usage of CSS Reference
    Reference table
    font-family
    [fontname] font name
    serif Times

    Cascading Style Sheet file 

    H2 {font-family: serif; }
    Property Description
    font-family
    [fontname] Font name
    serif Times
    sans-serif Helvetica
    cursive Zapf-Chancery
    fantasy Western
    monospace Courier
    font-style
    normal Normal font
    italic Italic font
    font-weight
    normal Normal font
    bold Bold font
    bolder Bolder one step than a current font
    lighter Thinner one step than a current font
    font-size
    xx-small
    xx-large     		Relativity size of font
    larger Larger one step than a current font
    smaller Smaller one step than a current font
    [length] Direct numerical value
    [percentage] Percentage of current font
    color
    [color] #RGB (0-F)
    #RRGGBB (00-FF)
    rgb(R,G,B) (0-255)
    rgb(R%,G%,B%) (0%-100%)
    [color name] (white, black, red, blue, etc)
    background-color
    [color] color
    transparent transparent color
    background-image
    [url] URL of background image
    Ex) BODY {background-image: url(image.gif)}
    background-attachment
    fixed Fix your image on the background
    background-repeat
    repeat Tile
    repeat-x One line aloft
    repeat-y One line left
    no-repeat No repeat
    background-position
    center center x-dimension(left, center, right)
    y-dimension(top, center, bottom)
    text-decoration
    none None
    underline Underline
    line-through Line-through
    text-transform
    capitalize Convert the first character of word into a large letter
    uppercase Convert all characters into a large letter
    lowercase Convert all characters into a lower letter
    none No decoration
    text-align
    left Left align
    right Right align
    center Center align
    justify Justify align
    text-indent
    [length] Direct numerical value
    [percentage] Percentage
    line-height Height of one line
    normal Normal heignt
    [number] Magnification of current height
    [percentage] Percentage of current height
    list-style-type
    disc Disc
    circle Circle
    square Square
    decimal (1, 2, 3, ...)
    lower-roman (i, ii, iii...)
    upper-roman (I, II, III...)
    lower-alpha (a, b, c...)
    upper-alpha (A, B, C...)
    none none

    The design tag which will be abolished in the future

  • Design tag
    TAG abolishe
    in the future
    body
    alink o
    backbround o
    bgcolor o
    link o
    text o
    vlink o
    center o
    font o
    h1-h6
    align o
    img
    align o
    border o
    p
    align o
    table
    align o
    bgcolor o
    td, th, tr
    bgcolor o
    height o
    width o
    u o