Home arrow Style Sheets arrow The Advantages of Style Sheets

The Advantages of Style Sheets

Style sheets have become ever more popular each year as designers realize that whole web sites can be customized without too much fine editing. They allow properties for the whole site to be set, such as page color, link color, margins, text size, and much more. All of these can be keyed into a single file or in the main body of the code.

Author Info:
By: Stephen Davies
Rating: 4 stars4 stars4 stars4 stars4 stars / 8
August 07, 2007
  1. · The Advantages of Style Sheets
  2. · Inline and External Styles
  3. · The CLASS and ID tags
  4. · Final Working Examples

print this article

The Advantages of Style Sheets
(Page 1 of 4 )

Many designers still stray away from the overbearing appearance of plain code. Once the idea of setting page properties is grasped, style sheets can soon become another useful tool. It is better to apply a set of rules to each page in the browser window than to repeat the same edits on each and every page of the web site. Familiarity with HTML will help in the understanding of this article as I lay down the advantages of style sheet commands.

A standard piece of HTML code contains properties for page altering applications. The main ones here tend to be BODY, P, BR, FONT and headers H1, H2, etc. The BODY tag contains properties for color and font size for example. This tag can contain other properties that will change the page appearance. If a site has several pages, as in most cases, this could become a tedious editing process when modifications need to be applied later.

As you may know, a web site is never really finished. It will be modified over time and properties then need to be changed on each page. A style sheet prevents having to repeatedly make certain changes to every page by collecting all the necessary properties into one file.

A Quick Example

Style sheets are referred to by the classification CSS. This is an abbreviation for Cascading Style Sheets and is the extension used when saving style sheet files. The syntax for a style sheet command is:

selector {property: value }

selector {property1: value1; property2: value2 }

The selector refers to the tag and the property refers to the tag modification:

P { text-align: left; color: white; font-family: Arial }

You can apply the properties to a range of tags if required. For example in the above style sheet code:

P, H2, H3,
text-align: left;
color: white;
font-family: Arial

A practical example

This will apply the properties inside the braces to any text typed into HTML <P> tags. In this case, the text will be left-aligned on the page, text color is white, and the font type is Arial. Take a look at this HTML snippet that uses the above styles:

<P>paragraph family and colour properties are now Arial and white</P>

Next I shall show how to apply the different types of styles.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials