Cascading style sheet

 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files

 CSS selectors allow you to select and
manipulate HTML element(s).
 CSS selectors are used to "find" (or select)
HTML elements based on their id, classes,
types, attributes, values of attributes and
much more.

 CLASS define with a “.”
 ID define with a “#”

 External style sheet
 Internal style sheet
 Inline style

 An external style sheet is ideal when the
style is applied to many pages. With an
external style sheet, you can change the look
of an entire Web site by changing just one
file.
 Each page must include a link to the style
sheet with the <link> tag. The <link> tag goes
inside the head section.

 An internal style sheet should be used when
a single document has a unique style.
 You define internal styles in the head
section of an HTML page, inside the <style>
tag.

 An inline style loses many of the advantages
of a style sheet (by mixing content with
presentation). Use this method sparingly!
 To use inline styles, add the style attribute to
the relevant tag. The style attribute can
contain any CSS property. The example shows
how to change the color and the left margin
of a h1 element.

 Background Color
 body {background-color:#b0c4de;}
 Background Image:
 body {background-image:url('paper.gif');}

 The background-color property specifies the
background color of an element.
 The background color of a page is defined in
the body selector
 For Example
body
{
background-color: #b0c4de;
}

 The background-image property specifies an
image to use as the background of an
element.
 By default, the image is repeated so it covers
the entire element.
 For Example
body
{
background-image: url("paper.gif");
}

 Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
 In addition, links can be styled differently
depending on what state they are in.
 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 mouses over it
 a:active - a link the moment it is clicked

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

 The CSS list properties allow you to:
1) Set different list item markers for
ordered lists
2) Set different list item markers for
unordered lists
3) Set an image as the list item marker

 In HTML, there are two types of lists:
1) unordered lists - the list items are
marked with bullets
2) ordered lists - the list items are marked
with numbers or letters

 The CSS border properties allow you to
specify the style, size, and color of an
element's border.

 The padding clears an area around the
content (inside the border) of an element.
The padding is affected by the background
color of the element.
 The top, right, bottom, and left padding can
be changed independently using separate
properties. A shorthand padding property can
also be used, to change all paddings at once.

 For Example
p
{
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}

 The margin clears an area around an element
(outside the border). The margin does not
have a background color, and is completely
transparent.
 The top, right, bottom, and left margin can
be changed independently using separate
properties. A shorthand margin property can
also be used, to change all margins at once.

 For Example
p
{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}

Cascading style sheet

Related slideshows

More Related Content

Cascading style sheet