What is CSS?
Cascading Style Sheets
specify the style of HTML elements (e.g. spacing, margins) separately from the structure of the document (e.g. Headers, body text, links)
control the appearance of a Web site
all pages of a Web site provides the same look and feel
External Style Sheets saves a lot of work and are stored in CSS files
Multiple style definitions will cascade into one
World Wide Web Consortium (W3C) created STYLES in addition to HTML 4.0
Both Netscape 4.0 and Internet Explorer 4.0 support CSS

 

Cascading Order
Multiple styles will cascade into one
Style Sheets allow style information to be specified:
inside an HTML element - inline style
inside the <head> element - internal style sheet
in an external CSS file - external style sheet
inside multiple external style sheets
Cascading Order (number (1) has the highest priority):

(1)    inline style
(2)    internal style sheet 
(3)    external style sheet
(4)    browser default

CSS syntax
General format 

        selector {property:value; property:value;...}
3 types of selector:
HTML tags. e.g. <p> <body> <a> ...etc
Class
ID
property - characteristic to be changed, e.g. color
value - value to assign to the property, e.g. blue

Examples:

  1. body {color:green}

  2. p {font-family: "Courier New"}

  3. p {text-align: center; color: blue; font-family: "sans serif"}

or 
p
{
text-align: center; 
color: blue; 
font-family: "sans serif"
}

 

CSS Grouping
Group selectors to have the same format
Examples:
/* heading 1, 2 and 4 are set to red */

h1,h2,h4
{
color : red
}

comment begins with "/*", and ends with "*/

CSS class attribute
to define different styles for the same element, e.g. 
p.right {text-align: right}
p.center {text-align: center}

 
<p class="right">
Right-aligned this paragraph.
</p> 

<p class="center">
Center-aligned this paragraph.
</p> 
omit tag name in selector, so style defined can be used by many elements:
.left {text-align: left}

 

 
<h4 class="left">
Left-aligned this paragraph</h4>
<p class="left">
Left-aligned this paragraph, too</p>

 

CSS - 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 to match all elements with a particular id, or to match only one element
Examples to match all elements with id="intro":
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

Insert a Style sheet
External style sheet
use when style is applied to many pages
look of the entire Web Site by changing one file
link every page to the style sheet using <link> tag
the browser will read the style definitions from file mystyle.css and format the document according to it
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Sample program 1 : 

sample1.htm

<html>
<head><link rel="stylesheet" type="text/css" href="sample1.css" /></head>

<body>
<h1>This header is 36 pt</h1>
<h2>This header is red</h2>

<p>This paragraph has a left margin of 60 pixels</p> 

</body></html>

sample1.css

body {background-color: FFCC99}
h1 {font-size: 36pt}
h2 {color: red}
p {margin-left: 60px}

result

                             

Sample program 2 : 

sample2.htm

<html><head>
<link rel="stylesheet" type="text/css" href="sample2.css" />
</head>

<body>
<h1>This is a header 1</h1>
<hr>

<p>You can see that the style sheet formats the text</p>

<p><a href="http://www.microsoft.com">
This is a link</a></p>

</body></html>

sample2.css

body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:active {color:blue}
a:hover {color:black}

result

 
Internal style sheet
used when a single document has a unique style
define in head section by using <style>  tag
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

 Sample program 3 :
sample3.htm

<html><head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

results

 
Inline style
mixing content with presentation, loses advantages of style sheet
use when a style is to be applied to a single occurrence of an element  
<p style="color: sienna; margin-left: 20px">
This is a paragraph</p>

 

Format a background
Sample programs
sample4.htm

<html><head>
<style type="text/css">
body
{ 
background: #ccccff 
url("friend.gif") 
no-repeat fixed 
center center
}
</style></head>

<body>
<p><b>Note:</b>
The background-attachment and the background-position
properties do not work in Netscape 4.0.</p>

<p>This is some text, This is some text</p>
<p>This is some text, This is some text</p>
<p>This is some text, This is some text</p>
<p>This is some text, This is some text</p>
<p>This is some text, This is some text</p>
<p>This is some text, This is some text</p>
.....
<p>This is some text, This is some text</p>
</body></html>

results

 
sample5.htm

<html><head>

<style type="text/css">
body
{ 
background-image: 
url("../images/bgdesert.jpg");
background-repeat: repeat-y
}
</style></head>

<body></body></html>

results

More about background properties... click

 

Format text
Sample programs
sample6.htm

<html><head>
<style type="text/css">
h1 {letter-spacing: -3px; text-align:center}
h2 {letter-spacing: 0.5cm}
h3 {text-decoration: line-through}
h4 {text-decoration: overline}
p {text-decoration: underline;text-indent: 1cm}
p.uppercase {text-transform: uppercase}
p.capitalize {text-transform: capitalize}
a {text-decoration: none}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<p class="uppercase">This is some text in a paragraph, this is some text in a paragraph, this is some text in a paragraph, this is some text in a paragraph, this is some text in a paragraph, this is some text in a paragraph, this is some text in a paragraph.</p>

<p class="capitalize"><a href="http://stcp.vtc.edu.hk">please click this link</a></p>

</body></html>

results

More about text properties... click

 

Font Properties
Sample programs
sample7.htm

<html><head>
<style type="text/css">
h1 {font-style: italic}
h2 {font-weight: bold}
h3 {font-family: times;font-size: 200%}
p {font-family: courier;font-size: 180%}
p.sansserif {font-family: "sans-serif";font-size: 150%}
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>

results

More about font properties... click

 

Border Properties
Sample programs
sample8.htm

<html><head>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
p.three
{
border-style: solid;
border-left-width: 15px
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px;
border-color: #ff0000 #00ff00
}
</style>
</head>
<body>
<p class="one">Border style One</p>
<p class="two">Border style Two</p>
<p class="three">Border style Three</p>
<p class="four">Border style Four</p>
</body></html>

results

More about border properties... click

 

Margin Properties
Sample programs
sample9.htm

<html><head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
/* p.margin {margin-right: 5cm} to set right margin*/
</style>
</head>

<body>
<p>This is a paragraph</p>
<p class="margin">This is a paragraph with margins</p>
<p>This is a paragraph</p>

</body></html>

results

More about margin properties... click

 

List Properties
Sample programs
sample10.htm

<html><head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.pic {list-style-image: url("pda.gif")}
</style>
</head>
<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
</ul>

<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
</ul>

<ul class="square">
<li>Coffee</li>
<li>Tea</li>
</ul>

<ul class="pic">
<li>Coffee</li>
<li>Tea</li>
</ul>
</body></html>

results

 
sample11.htm

<html>
<head>

<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>

<body>
<ol class="decimal">
<li>Coffee</li>
<li>Tea</li>
</ol>

<ol class="lroman">
<li>Coffee</li>
<li>Tea</li>
</ol>

<ol class="uroman">
<li>Coffee</li>
<li>Tea</li>
</ol>

<ol class="lalpha">
<li>Coffee</li>
<li>Tea</li>
</ol>

<ol class="ualpha">
<li>Coffee</li>
<li>Tea</li>
</ol>
</body></html>

results

More about List properties... click

 

SPAN tag
to mark-up an element to apply a style without affecting by other predefined formatting feature
generic grouping element
apply styles or ID attributes to a block of text
e.g.
text here is not affected <SPAN class="dark"> dark text </SPAN>

 

CSS-P
for position and visibility of elements
<DIV> tag
defines a logical division within the page
aims at controlling an element
usually has an ID for manipulation
define using <STYLE> and <DIV>
<STYLE>
     #book {css-p rules}
</STYLE>		 <DIV ID = "book" STYLE= css-p rules>
      This is a good book
</DIV>
properties that can be handled by DIV ... click
Samples program
sample12.htm

<HTML><HEAD>
<STYLE>
#obj2 {position:absolute; left:200; top:200}
</STYLE>
</HEAD>

<BODY>
<DIV ID="Obj1" STYLE="position:absolute; left:100; top:100"> This is object one</DIV>
<DIV ID="Obj2"> This is object two</DIV>
</BODY>
</HTML>

results

 

Important notes
MSIE and Netscape does not support CSS to the same extent
check the type of browsers before using some of the styles