When a visitor loads one of your Web pages, either by typing the address into a browser or by clicking a link, the server (the computer that stores the Web page) sends the HTML file to the visitor’s computer along with any files linked to or embedded in the HTML file, such as images or movies. The code, or style sheet, can be either embedded directly in the HTML file or linked to it. Regardless of where it’s located, the visitor’s browser will interpret this code by using its particular rendering engine to apply the to the HTML, and then display the page in the browser window.

The code used to create the Web page is downloaded, interpreted, and then rendered by the browser to create the final display.
The code used to create the Web page is downloaded, interpreted, and then rendered by the browser to create the final display.

The interpretation and application of the style sheet by the browser’s rendering engine is where our headaches begin. The W3C has gone to great lengths to specify how browser manufacturers should render the code, but bugs, omissions, and misinterpretations still creep in, meaning that no two browsers will render a Web page exactly the same. For the most part, these differences will go unnoticed by the user, but occasionally these differences are glaring and require you to do some extra work to get the page to look right in the broadest spectrum of browsers.

Tips

  • The power of comes from its ability to mix and match different rules from different sources to tailor your Web pages’ layout to your exact needs. In some ways, it resembles computer programmingwhich is not too surprising, because a lot of this stuff was created by programmers rather than designers. But once you get the hang of it, will become as natural as putting together a sentence.
  • Sometimes a Web browser will render HTML content before the style sheet is applied to it, so you may see a “naked” or unstyled page flash briefly on the screen.
  • There is always the possibility that your Web page will be displayed without the code, either because of an error or because the device being used does not accommodate (such as a mobile phone browser, for instance). You should always consider how your page will look without the style sheet, and make sure that structurally it makes sense

An HTML page using CSS to add an image in the background, position the content down and to the right, and format the text.
An HTML page using to add an image in the background, position the content down and to the right, and format the text.

The same code displayed without the benefit of CSS. The page still displays, but without the formatting in Figure
The same code displayed without the benefit of . The page still displays, but without the formatting in Figure.

Tags: ,