ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

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
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
   

   
   
   
   
   
   

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

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:

 

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; }

 

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>

 

 

 

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