Example 10: styles for many elements and properties in one document

Looking Good?? (Gaudy, yes. Good, probably not.)

This is a page with a stylesheet used to set colors and fonts and alignment and margins. It sets styles for the body and for paragraphs and for H1 and H2 and also for strong Only block elements can have alignment, which describes how the text is lined up along the sides of the block. All elements can have margins set, which describes how much empty space should be around the element. If the left and right margins are "auto", the block is centered.

With Styles

This second paragraph doesn't really say anything. It is there to fill up a little space and show how paragraphs are styled. If you look at the source code, you will see that HTML in the body is very simple and clean. That is because all the presentation is handled by the stylesheet.

The style rules

        body { background-color: #ffff00; 
               color: maroon;
               font-family: Verdana, Arial,Helvetica,sans-serif; 
               font-size: small; 
               text-align: justify; 
               margin: 20px }

        h1 { background-color: #00ffff; 
             color: red;
             font-family: Georgia, 'Times New Roman', Times, serif; 
             font-size: 200%; 
             text-align: center;
             width: 50%;
             margin-left: auto;
             margin-right: auto; }

        h2 { text-align: right;
             background: #ffffcc;
             width: 50%; }

        p {background-color: #ffffff; 
           color: teal;
           margin-right: 100px;
           margin-left: 50px;}

        strong { background-color: silver; color: black;
                 font-family: 'Courier New', Courier, monospace; 
                 font-size: large; 
                 font-weight: normal }