Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/mislz28/public_html/wp-content/themes/css-faq-v2/timeweather/timeweather.php on line 19
  • CSS Faqs
1 June 2008

Style Sheets to Keep Your Site Consistent

One of the biggest advantages of Cascading Style Sheets is that it helps in maintaining the consistency of your website. To make your site consistent enough, you need to build external style sheets. External style sheets can be used in two different ways: one is to link the external style sheet and the other one is to import the style sheet. By using external style sheets, you can see all your web pages will have identical styles.

The advantages of external style sheets are numerous. You can exert control on the look and feel of various documents at a time. This will be successful if you have a group of people to build your website. It is an uphill task to memorize a large number of style rules. There is also a printed style guide to help your cause. But it is not a feasible idea to go through the guide every time a doubt creeps into your mind. It is an efficient and tedious way of doing things.

External style sheets also help in building classes of styles that can be employed on different HTML elements. If you make use of a particular font type to emphasize several elements on your web page, then you can generate a class of that font type and establish it in your style sheets to build emphasis. So you get rid of defining a particular style for all the instances of the emphasis one by one.

Using external style sheets, you can have your styles at one place easily and this leads to more efficiency. You can use all the grouping techniques available in CSS on your external style sheets. The flexibility and control is what you will have on your web pages.

On the other hand, these style sheets have certain loopholes. If your external style sheets are very large, then they can raise your download time. Similarly, if your style sheets consume less bytes, your website will be very complicated. The same problem occurs in case of delivering of tables. You have to wait for the whole style sheet to be loaded before the page is viewed. The volume of external style sheets keeps increasing rapidly as it is hard to say when a specific style ceases to exist. Even though the web page containing that style is removed, the style still persists in the style sheet.

External style sheets are generated in the same way as other document level style sheets. The syntax is the same. But you need to include a selector and the declaration. The syntax is as follows:

selector {property : value;}

The rules are saved in a text file having the extension .css. Though it is not mandatory, it is a good practice as it helps in identifying your style sheets in the directory listing. Linking the external style sheet to web pages is done in two ways: linking and importing.

In linking, you have to use the HTML tag <link>. It contains attributes like rel, type and href. The ‘rel’ property specifies what you are linking, the ‘type’ property explains the MIME-type for the browser and the ‘href’ property describes the path to the .css file. The syntax is like this:

<link rel=”stylesheet” type=”text/css” href=”styles.css” />

The method of calling a linked style sheet is same as linking in case of importing. But the only difference is it must be called inside a document level style declaration.

<style>
@import URL (http://www.mysite.com/styles.css);
… Keep writing styles
</style>

There is no limit on the number of external style sheets that you can import to maintain your website.

Tags:

This entry was posted on 1 June 2008 at 9:56 PM and is filed under CSS Faqs. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a reply

Name (*)
Mail (will not be published) (*)
URI
Comment