Cascading Style Sheets Tutorial(CSS) / PDF
Table of Contents:
part 1: style sheet syntax
how style sheets are 'written out'
part 2: applying style sheets
attaching style sheets to html documents
part 3: class and ID
giving one html tag multiple styles
part 4: style sheet problems
avoiding the pitfalls of style sheets
part 5: tags for style sheets
about div and span
----------------------------------------------------
Sample of the pdf document :
Style sheets work by controlling the value(s) of the property(s) of a selector
css example of syntax:
selector {property: value;}
almost any html tag can be used as a selector in the example below the <TT> tag is our selector, the property is color and the value is red
TT {color: red;}
<TT>This is typwriter text with style</TT>
for clarity style sheets are usually written out like this...
TT {
COLOR: red;
FONT-FAMILY: arial;
}
H1 {
COLOR: red;
FONT-FAMILY: tahoma, arial;
}
in the style sheet example above the value of the H1 font-family property is set to
'tahoma' with 'arial' as the back-up font. If 'tahoma' is unavailable on the users
computer then the selector ( H1 ) will have arial as it's default font
Applying Style Sheets:
this tutorial shows four main methods of applying style sheets to a html document, these are:
1. embedding style sheets in the <HEAD></HEAD> part of a webpage
2. inline style sheets in a html tag
3. linking to an external style sheet
4. importing style sheets
1. Embedding cascading style sheets in the <HEAD>
in this example we change the color of a link
we can suggest the color of links, visited (vlink) and active links (alink) in the
body tag
<BODY link="blue" vlink="purple" alink="red">
adding the style sheet below to the head of a html document will cause links to be green when the mouse cursor hovers
Click here for Download PDF / FREE
0 commentaires: