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
 
XHTML Tutorial - Index
XHTML Tutorial - Introduction to XHTML
XHTML Tutorial - Formatting
XHTML Tutorial - Links
XHTML Tutorial - Images
XHTML Tutorial - Forms
XHTML Tutorial - Tables
XHTML Tutorial - Frames
XHTML Tutorial - Style Sheets
XHTML Tutorial - Advanced 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
Makeup Artist 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 > XHTML Tutorial > Style Sheets
 
Previous  Next

XHTML Tutorial - Style Sheets

   
                                                                             Page 1 of 5
 
Overview
 

In this chapter you will learn

  • How to create a style sheet
  • Meaning of external style sheets
  • Meaning of internal style sheets
  • How to link a style sheet with an XHTML document
  • An introduction to JavaScript

 

 
Introduction
 

This chapter acquaints the reader with the concept of style sheets. Style sheets are an application to style HTML and XHTML documents. As most of the formatting in XHTML is done through style sheets, it can be said to be the backbone of XHTML.

Style sheets are also known as CSS that stand for Cascading Style Sheets. The most significant characteristic of style sheets is that it enables the designer to manage a large number of web pages. They give web developers specific control over their design and content layout. A standard set of commands can be created to control the style of all the subsequent pages.

Through style sheets, style can be added to web documents like font, color, spacing, size, etc. Style sheets also control the layout of the web page independently without using tables.

To put it shortly, style sheets are a single file that has all the values of the attributes that 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.

When the texture of all the web pages has to be changed, 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 becomes easier among multiple developers because the work is standardized.

Rules for Style Sheets

There are a set of rules that govern the making of a style sheet. These rules have to be followed while making style sheets. These rules are the same for HTML and XHTML.

The rules for making style sheets are:

  • The selector selects the element in which one is working. The elements are common tags like body, h1, pre, p, etc.
  • 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 come into play.
    • The value, determines how the attribute works like the value for the font.
  • A declaration starts with a { (starting bracket) and ends with a } (closing bracket).
  • 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. With an external style sheet, the look of entire website can be changed by changing a file. This is possible because; each page is linked to the style sheets using the <link> tag (which will be explained later). The <link> tag goes within the head section. An external style sheet is saved with an extension of .css. This file is used in the XHTML document.

The external Style Sheet of XHTML is same as the external Style Sheet of HTML.

Example of Style Sheet

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;

}


       

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