Controlling Appearance with Styles

To see CSS in action, type or copy the code from Listing 2.12 into a file, save it, then open the file in your browser. Note that the text appears in your browser's default font—you'll change that in a minute.

Listing 2.12: Cascading Style Sheet Example (ch2-24.htm)

<title>Cascading Style Sheet Example</title> <!--<style type="text/css">

body {font: 14pt Garamond;} </style>-- > </head> <body>

<h1>Cascading Style Sheet Example</h1>

<h2>Look at the face and size of the following text</h2> <p>This is a simple HTML file. In the head section of this file, there's a Cascading Style Sheet. When the &lt;style&gt; tag is commented out, the text in the document appears in your browser's default font. When you uncomment the &lt;style&gt; tag, the text appears in 14-point Garamond (if you have the Garamond font installed on your computer).</p> </body>

Now, reopen the file and remove the comment tag around the <style> tag. Save the file, and refresh your browser. You should see the screen change. Figures 2.21 and 2.22 show the difference between the file with no style sheet and the file viewed with the style sheet in effect. Both files use the code from Listing 2.12, but I uncommented the <style> tag to create Figure 2.22.

Figure 2.21: Text without style sheet applied (ch2-24.htm)

Figure 2.21: Text without style sheet applied (ch2-24.htm)

Figure 2.22: Text with style sheet applied (ch2-24.htm)

Was this article helpful?

0 0

Post a comment