Css

CASCADING STYLE SHEETS
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Typical CSS file is a text file with an extension
.css and contains a series of commands or
rules. These rules tell the HTML how to
display.

CSS BENEFITS
• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn

UNDERSTANDING STYLE RULES
• A Style Rule is composed of two parts: a
selector and a declaration.

• CSS declarations always ends with a semicolon, and declaration groups are
surrounded by curly brackets:

THE ID AND CLASS SELECTORS
• In addition to setting a style for a HTML element, CSS allows you to specify your
own selectors called "id" and "class".

THREE WAYS TO INSERT CSS
•External style sheet
•Internal style sheet
•Inline style

INLINE STYLES
•<p style="color:red;margin-left:20px">This is a
paragraph.</p>

INTERNAL STYLE SHEET
An internal style sheet should be used when a single document has a
unique style.
<head>
<style type="text/css">
hr {color:red;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

EXTERNAL STYLE SHEET
• 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 one file. Each page must link to the
style sheet using the <link> tag. The <link> tag goes inside the
head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

CSS BACKGROUNDS
CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

BACKGROUND COLOR
body {
background-color: lightblue;
}
Background Image
body {
background-image: url("paper.gif");
}

BACKGROUND IMAGE – REPEAT
HORIZONTALLY OR VERTICALLY
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

BACKGROUND IMAGE - SET POSITION AND
NO-REPEAT
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

BACKGROUND - SHORTHAND PROPERTY
body {
background: url("img_tree.png") no-repeat right top;
}

SHORTHAND PROPERTY FONT
<p style="font:italic small-caps bold 15px georgia;">

div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

Css

More Related Content

What's hot

Similar to Css

Recently uploaded

Css