Why use CSS?
CSS helps you to keep the information content of a document separate from the details of how to display it. The details of how to display the document are known as its style. You keep the style separate from the content so that you can:
· Avoid duplication
· Make maintenance easier
· Use the same content with different styles for different purposes
Example
· Your web site might have thousands of pages that look similar. Using CSS, you store the style information in common files that all the pages share.
· When a user displays a web page, the user's browser loads the style information along with the content of the page.
· When a user prints a web page, you provide different style information that makes the printed page easy to read.
Linking HTML to your CSS
To link your document to your CSS, edit your HTML file. Add the line highlighted here.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="c:\style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
CSS Syntax
A CSS rule set consists of a selector and a declaration block:
The selector points to the HTML elements you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon “;” and declaration groups are surrounded by curly braces “{…}”.
Syntax:
p {color:red;text-align:center;}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
No comments:
Post a Comment