6/14/2014 Expertrating - HTML Tutorial, Style Sheets

http://www.expertrating.com/courseware/HTMLCourse/HTML_StyleSheets_1.asp 1/3
ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login

HTML Tutorial - Index
HTML Tutorial - Introduction
HTML Tutorial - Formatting
HTML Tutorial - Links
HTML Tutorial - Images
HTML Tutorial - Forms
HTML Tutorial - Tables
HTML Tutorial - Frames
HTML Tutorial - Style Sheets
HTML Tutorial - Advance Tags


Online Personal Trainer
Certification
Personal Trainer
Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management
Certification
Six Sigma Certification
Six Sigma Black Belt
Certification
Master Black Belt
Certification
Six Sigma Green Belt
Certification
Life Coach Certification
Lean Management
Certification
Lean Six Sigma
Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification



Home > Courses, Tutorials & eBooks > HTML Tutorial > Style Sheets

HTML Tutorial - Style Sheets
Page 1 of 4

This chapter introduces a new concept known as Style sheets. Style sheets enable the designer
to manage a large number of web pages.
Style sheets are also known as CSS that stand for Cascading Style Sheets. Style sheets give
web developers more control over their design and content layout. They allow designers to
create a standard set of commands that control the style of all the subsequent pages.
With the help of style sheets, style can be added to web documents like font, color, spacing, size,
etc. Style sheets can also control the layout of the web page independently without using tables.
Thus style sheets are a single file that has all the values of the attributes which were previously
defined in the tag itself. All the web pages check this file and the formatting is done accordingly.
Benefits of Style Sheets
With the introduction of style sheets, standards are being set for the present and future of web
design. Style sheets assist designers to have control over their web site design and appearance
over different platforms and browsers.
The web sites designed in style sheets are faster to change and update.
Usually, in an HTML document; when the texture of all the web pages has to be changed, then
changes have to be made in all the pages. But when the designer is using style sheets, he just
has to make a change in the coding of the style sheet. This is the main benefit to designers and
companies as it speeds the time of development and updating. The coding is reduced, the pages
are more efficient and they require less bandwidth. Therefore communication is easier among
multiple developers because the work is standardized.
Rules for Writing Style Sheets
There is a set of rules that govern the making of a style sheet. These rules have to be followed
when style sheets are made. The rules are elaborated below:
1. The selector selects the element in which the author is working. The elements are common
tags like body, h1, pre, p, etc.
2. The declaration tells the browser what to do with the selected element. It consists of two
parts:
The property, which identifies which attribute, like font type, color, size etc. come into
play.
The value, which determines how the attribute works, like the value for the font
3. A declaration starts with a { (starting bracket) and ends with a } (closing bracket).
4. A property is separated by a :(colon) and a declaration is ended by a ; (semicolon).
Example:

6/14/2014 Expertrating - HTML Tutorial, Style Sheets
http://www.expertrating.com/courseware/HTMLCourse/HTML_StyleSheets_1.asp 2/3
Business Analyst
Certification
SEO Certification
Online Business Writing
Course & Certification
Baby Sitting Course &
Certification
Time Management
Certification
Health Club Management
Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management
Certification
Kaizen Certification
Creative Writing
Certification
Event Management
Certification
Test Search by Job Title
Administrative Assistant
Certification
Virtual Assistant
Certification

All Online Courses







h1 {
Color: blue;
font-family: Arial, sand-serif;
}

External Style Sheet
An external style sheet is ideal when the style has to be applied to many web pages. Changing a
single file, with the help of external style sheet, can change the look of the entire web site. This is
because each page is linked to the style sheets using the <link> tag (which will be explained
later). The <link> tag is placed inside the head section. An external style sheet is saved with an
extension of .css. This file is used in the HTML document.
Example:

BODY {
Font-family: Arial, helvetica, sans-serif;
Color: black;
Background-color: white;
}
P {
Font-family: arial, Helvetica, sans-serif
}
PRE {
Font-family: "courier new", courier, monospace;
}
H2,H3,H4
{ color: #669999;
Font-weight: bold;
}
A: active
{ Color: #ff0000;
}
A: visited { Color: #999999; }
Table { Border: 5px none #CCFF99;
Width: 250 px; Background-color: #FFCCCC; } UL,
OL { font-family: arial, helvetica, sans-serif; }
6/14/2014 Expertrating - HTML Tutorial, Style Sheets
http://www.expertrating.com/courseware/HTMLCourse/HTML_StyleSheets_1.asp 3/3

Linking This File With an HTML Document
This external style sheet is linked with the HTML document with a <link> tag (this tag is explained
in the last part of this section). This link tag is placed inside the head tag.
Example:

<head>
<link rel=stylesheet href=mystyle.css type=text/css/>
</head>

ExpertRating HTML Certification - Get Certified Now!!



Home | About Us | Privacy Policy | Site Map | FAQs | Contact Us
ExpertRating 2006. All Rights Reserved.