What is CSS?
CSS stands for Cascading Style Sheets.
A new feature being added to HTML that gives more control over how pages are displayed.
With CSS, one can create style sheets that define how different elements, such as headers and links, appear.
These style sheets can then be applied to any Web page.
A style sheet is a simple concept: It's a page of style definitions or specifications that tell the browser how to display the various elements on a page.
Creating CSS
Create a new file with Notepad.
Save it as basiccss.css in your playpen directory.
Verify that the .css extension is correct in Windows Explorer.
We can build our style sheet into the head element of our web page as shown below:
<head>
<title> My Page </title>
<styletype="text/css">
<!--
-- >
</style>
</head>
CSS Syntax
A CSS rule has two main parts:
A selector, and one or more declarations
CSS declarations always end with a semicolon, and declaration groups are surrounded by angle brackets.
Example:
p
{
color:red;
text-align:center;
}
Here:
p is selector
color and text-align are declarations
The CLASS Selector:
This allows us to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned.
.center
{
text-align: center;
}
Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
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 like:
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css"/>
</head>
An external style sheet can be written in any text editor.
The file should not contain any html tags.
Your style sheet should be saved with a .css extension.
Internal Style Sheet
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, by using the <style> tag, like:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<styletype="text/css">
hr
{
color: sienna;
}
p
{
margin-left: 20px;
}
body
{
background-image:url("images/a.gif");
}
</style>
</head>
<body>
</body>
</html>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
To use inline styles we have to use the style attribute in the relevant tag.
The style attribute:
The example shows how to change the color and the left margin of a paragraph.
Example:
<pstyle="color:red;
margin-left:20px">
This is a paragraph
</p>
CSS Background
Background Color.
The background-color property specifies the background color of an element.
Example:
body
{
background-color:#b0c4de;
}
Background Image:
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.
The background image for a page can be set, like:
Example:
body
{
background-image:url('image name');
}
CSS Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
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 over it
a:active - a link the moment it is clicked
CSS Lists
The CSS list properties allow us to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Example:
ul.a {list-style-type: circle ;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
CSS Summary
A CSS describes the appearance of an HTML page in a separate document.
A CSS lets us separate content from presentation.
A CSS lets us define the appearance and layout of all the pages in our web site in a single place.
A CSS can be for both HTML and XML.
