A style sheet is a file which tells a browser how to render a page. It allows us to specify generally how and where something is presented, in a simpler and more efficient way than we can with HTML.
HTML was designed primarily as a content-based markup language, and the later introduction of various formatting elements and attributes, although useful, tend to complicate Web authoring and browser incompatibility issues.
Style sheets simplify HTML coding and largely relieve HTML of the responsibilities of presentation, as they allow us to separate format definitions from actual HTML content.
A style sheet is basically a list of style declarations for each element that we want to format. A browser applies the styles to appropriate elements in any HTML file that is linked to the style sheet.
Keeping styles defined in a separate file has distinct advantages.
- a single style sheet can be used for any or all documents in a Web;
- writing format definitions in a single file reduces the amount of code on individual pages; and less data to be transmitted and parsed means faster download time;
- a style sheet simplifies site maintenance: a style change to any or all elements in a Web needs only a change in the style sheet;
- style sheets can be used to establish conventions within a series of publications, that tie a given look to documents of related content, essential to effective communication;
Also, CSS offers other benefits, though these may be more of a concern for advanced users:
- a style sheet can be device-specific; a separate style sheet can be defined for the printed version of a Web document;
- a style sheet helps simplify authoring for device independence and accessibility for those with disabilities, as it keeps HTML apart;
- as a style sheet’s language is independent of HTML, it can evolve separately, and can be used for other document languages apart from HTML.
For all its worth, style sheets should then be probably used for all Web documents. True, but implementing styles is not as simple as it ought to be, yet.
While CSS has now been supported in most of the available browsers, still, implementation of CSS varies not only between browsers, but even between the same browser but of different versions.
NOTE: The discussions in the following sections focus mainly on the following browsers: Microsoft® Edge®, Google Chrome® and Mozilla Firefox®.
So, if your goal is for a uniform rendering of your HTML documents across different browsers, here are two general scenarios and what may be your only real options:
- If you are working on a corporate intranet, where user resources (such as browsers) can usually be controlled:
- the simplest way is to install the most current version of a browser that supports CSS on all machines, if possible;
- otherwise, you need to consider options as in the Internet scenario;
- If you are doing a site for the Web, you need to ensure that your pages will render acceptably in all three browsers, and in browsers that do not support CSS as well. Again, these are your only options:
- write (and test) basic style definitions that may work well for all three browsers;
- use a script to detect users’ browser type, and link different style sheets accordingly, as will be shown later.
Whatever you do, you should be aware that on other browsers that do not fully support CSS, your pages may render differently or as a plain page devoid of any defined styles.
If you do not have the time to go through all of the above, which is probably everyone’s excuse, then:
- there really is no point in using style sheets, or;
- you can do your pages the way you want to, and just hope that someday soon, everyone else will see them as you intended.
Some relevant external references:
Next: Understanding HTML