CASCADING STYLE SHEETS
HTML was designed to describe the structure and function of elements on a Web page (paragraphs, headings, tables etc.); it wasn’t designed to control the appearance of the Web page – although it does have some basic formatting attributes (background colour, font type, font size and alignment).
HTML has developed over the years to accommodated users’ requirements to be able to control the presentation to their Web pages rather than leaving the end result to a Browser, by adding typographical controls (for example font styles and sizes) to a Web page. These, of course, add to the size of the file and also to its maintainability – imagine having a large Web site of a few hundred pages and someone decides to change the font style from a serif (e.g. Times) to a san serif (e.g. Arial) type face.
In 1996, W3C recommended the idea of Cascading Style Sheets (CSS) to control the format of Web documents and to separate structure and format.
A style sheet gives the user several benefits:
-
better control over layout
-
better control over text display
-
separate form from structure
-
better site maintainability
-
smaller Web pages which means faster downloads.
What is style sheet?
A Style Sheet is a collection of style rules that that tells a browser how the various styles are to be applied to the HTML tags to present the document. Rules can be applied to all the basic HTML elements, for example the <p> tag, or you can define you own variation and apply them where you wish to.
Why Do They Cascade?
Style Sheets let you selectively override previous defined Styles. For example a Web site might be using a standard Style Sheet but certain Web pages can have an additional Style Sheet that can override styles that have been defined in the standard Style Sheet.
Where are Style Sheets stored?
Style Sheets can be external or internal to your Web site and/or external or internal to your Web pages. A Style Sheet is a text file that is stored on any Web server, within the same location as your Web pages or a Style Sheet can also be included as part of your Web page.
There are three types of Style Sheets:
-
Embedded: the style rules are included within the HTML at the top of the Web page – in the head.
-
Inline: the style rules appear throughout the HTML of the Web page – i.e. in the body.
-
Linked: The style rules are stored in a separate file external to all the Web pages.
Style sheet precedence is: inline over embedded over linked. However, some browsers treat linked style sheets as more important than embedded. It is important to test your various style sheets and Web pages on as many browser as possible before you commit to authoring a large Web site.
