Implementing Cascading Style Sheets on Web Sites
Cascading Style Sheets (CSS) is a method of adding or changing styles on web based documents. CSS allows web designers to change the way a page element is displayed in the browser. This can be as simple as changing the font, colors or even the spacing around the element. Due to this CSS is extremely powerful and can be a great addition to any web designers arsenal.
Some web sites, like this one, are almost entirely made of CSS directives. This is because there are so many advantages to using CSS in a web document. Here are just some of the examples on how CSS can make any web designers life a little easier:
Cross Browser Compatibility:
CSS allows designers to specify exactly how elements should be displayed on the page helping browsers to properly render the web site. For example CSS allows a designer to specify exactly how many pixels should be between two elements or exactly how wide the borders around the element should be. This helps take guess work away from the browser allowing multiple browser platforms to properly render the site.
General Maintenance:
Using style sheets to specify element directives such as font faces, font sizes and colors is a comment practice. If the styles are setup properly, see below, this allows designers to quickly and easily change these when a client changes their mind. Without proper style sheets designers would have to edit every document to change the <font> tags if a client wanted all the text at 8pt instead of 9pt.
Search Engine Optimization:
CSS can actually help with SEO as well. Search engines prefer sites with nice and clean code that downloads fast. Removing all of the font, font size and color specifications from the document will not only reduce the size of the document, cause it to download faster, but it will also give the engine less code to process. CSS can also be used to remove all of the images from a web document causing it to be even smaller.
There are three methods to implement CSS directives in a web document. Each of these methods have their advantages and disadvantages. All three methods are listed below along with an example situation on when to use them.
Inline Styles:
Inline styles are places within the tag on a web document. These styles are very handy if the designer is only planning on formating one element on one page. If the designer wants to format multiple elements on the page or multiple elements on multiple pages then use one of the other methods. The disadvantage to an inline style is that if the designer wants to change the style on this element it can only be done in this one spot in the document. Inline styles are specified by using the STYLE attribute of a tag. Within the style attribute the designer can specify any of the standard CSS directives that they want. This is an example of a inline style:
<p style=”Font-Family: Verdana; Font-Size: 8pt”>This text is formated using font size 8 of the Verdana font</p>
Document Styles:
Document styles are style sheets that are included in the HEAD section of the document. These styles are handy if the designer wants to format multiple elements on one page the same way. The disadvantage to this method is that because the style code gets placed at the top of every page the designer must edit every document on the site if they want to edit one of the styles on the site. This is why document styles are best used for styling one page differently then the rest of a web site. Here is an example page with a document style section:
<html>
<head>
<title>Testing Document Styles</title>
<style type=”text/css”>
p {
Font-Family: Verdana;
Font-Size: 8pt;
}
</style>
</head>
<body>
<p>This text is formated using font size 8 of the Verdana font</p>
</body>
</html>
Style Sheets:
Using Style Sheets is the preferred method for most web designers. Style sheets allow the designer to specify one file in a page that will store all the styles for that page. This allows the designer to create one style sheet document and specify it for multiple pages in the web site. The advantage to using this method that if all of the styles are stored in one file for the entire web site then the designer needs only change that one file to make changes to the entire site. Web designers should use this method as the main implementation for CSS on the sites they develop and use the other two methods to customize a page, using document styles, or a element, using an inline style. Here is an example on how to properly implement a style sheet into a page:
First a style sheet named “styles.css”:
p {
Font-Family: Verdana;
Font-Size: 8pt;
}
Then the HTML file:
<html>
<head>
<title>Testing Document Styles</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
</head>
<body>
<p>This text is formated using font size 8 of the Verdana font</p>
</body>
</html>
As previously stated each of these CSS methods have their proper place in the web design world. If used properly they can not only give the designer an advantage when designing sites but also help save the designer time in maintenance in the future. For information regarding what kinds of styles are available to use in style sheets please read the CSS Basics article that is to follow.
Save as PDF file
