Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Introduction

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS3 is a latest standard of css earlier versions(CSS2). It is positioning properties, also suppoted by the most recent browser verisions, are included in this appendix.

Type of Style Sheets
External Style Sheet

Styles can be imported from an external file and expanded in place, similar to a macro. Importing can be used to include multiple style sheets. An imported style is defined with the <style> element and the type attribute, followed by the URL for the style sheet, as shown here:

Example
<head>
<title>Skillpundit</title>
<link href="style.css" rel="stylesheet" type="text/css"> </head>
Here "style.css" is the file name of css page which was it saved as external file.
Internal Style Sheet

Document-wide styles can be embedded in a documents <HEAD> element using the <STYLE> element. Note that styles should be commented out to avoid interpretation by non-style-awarebrowsers.

Example
<head>
<title>Skillpundit</title>
<style type="text/css"> p
{
font-family: arial;
font-size: 14px;
color: #aa12bb;
 } </style> </head>
Inline Style Sheet

Styles can be applied directly to elements in the body of a document. Rather than set docuemnt-wide values for the <h1> element. It is possible to set the style for an individual header, as shown here:

Example
<head> <title>Skillpundit</title> </head>
<body> <h1 styel = "font-size:4px; font-family:arial; color:#12bcad;">
www.skillpundit.com <h1> </body>
Selectors

Multiple Classes can be defined for individual elements (selectors). To create a class selector, attach a class name to a selector; separate the selector from the class name with a period. Repeat this with the same selector, but give it a different name.

Example
p.one
{
font-family: arial;
font-size: 14px;
color: #aa12bb;
 } p.two
{
font-family: arial;
font-size: 14px;
color: #aa12bb;
 }
There are now two different paragraph styles to choose from. Use the CLASS attribute with the <p> element to distinguish between them in the body of the document.
 
<p class=”one”> This is paragraph style one </p>
<h1 class=”two”> This is paragraph style two </h1>
ID Selectors

Styles can be assigned independent of elements by creating ID Selectors. Create an ID selector by creating a name preceded by the character # and following it with the style to be assoiated with that ID.

Example
#style1
{
font-family: arial;
font-size: 14px;
color: #aa12bb;
 }
In the body of the document, use the ID Attribute to assign the style to an element or elements.
 
<p ID=”style1”> This is skillpundit website </p>
<h1 ID=”style1”> This is skillpundit website </h1>