CSS

Cascading Style Sheets

Why CSS??
y Defines how to display html files y Stored as .CSS files y SAVES A LOT OF WORK y Always end with a semi-colon

;

y p {color:red;text-align:center;} y Declarations are surrounded by curly braces

CSS syntax

Keywords
y Selector
y The html element we want to style y Eg h1, h2, h3,«., body, para, a,««

y Property
y The syle attribute we want 2 change y Color, align, border-style, font-size,««..

y Value
y The value we want 1 give 2 the property y Eg color:red, border-style-double, font-size-40px,««.

Id
y ID 
specify style 4 a single unique element  Defined with ´#µ  The style is applied to the element with id= ´#....µ  Eg.

#para1 { text-align:center; color:red; } <p id="para1">Hello World!</p>

Class
y CLASS 
specify style 4 a group of elements  Defined with ´.µ  Eg.

.center { text-align:center; } <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p>

Selectors
y Element Selectors ² (refer to HTML tags)

H1 {color: purple;} H1, H2, P {color: purple;}
y Contextual ² (refer to HTML, but in context)

LI B {color: purple;}

Selectors
y Class Selectors

<H1 CLASS=´warningµ>Danger!</H1> <P CLASS=´warningµ>Be careful«</P> ««. In your HTML code H1.warning {color: red;} OR to an entire class« .warning {color:red;}

Ways to insert CSS files
y EXTERNAL
y <head>

<link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
y INTERNAL
y <head>

<style type="text/css"> hr {color: sienna;} p {margin-left:20px;} body {background-color: light blue;} </style> </head>
y INLINE
y <p style="color:sienna;margin-left:20px">This is a

paragraph.</p>

Styling elements
y Background
y CSS properties used for background effects: 

Background-color

h1 {background-color:red;} p {background-color:#e0ffff;} div {background-color:rgb(255,0,0;} 
Background-image 

body {background-image:url('paper.gif');} 

Background-repeat 

body { background-image:url('img_tree.png'); background-repeat: no-repeat; /* repeat-x OR repeat-y */ } 

Background-attachment  Background-position

Text
y Text-color
y h1 {color:red;}

y Text-align
y h1 {text-align:center;}

p.date {text-align:right;} p.main {text-align:justify;}

y Text-decoration
y h1 {text-decoration:overline;}

h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;}
y Text-transform
y p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

Styling Links
y The four links states are:
‡ a:link - a normal, unvisited link ‡ a:visited - a link the user has visited ‡ a:hover - a link when the user mouse's over it ‡ a:active - a link the moment it is clicked

a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

Sign up to vote on this title
UsefulNot useful