Cascading Style Sheets


Week Four, Part 2


Boxes, Padding, Borders


      This assignment was a little more tricky than I thought it would be. But, I persevere, happy when I find out the problem is a missing "<" or a "}" character. I think I spent a while struggling over one of those guys.


      Since this is a linked style sheet, I will explain the code in each example. First of all, I made my first tiled background with a photo of flowers from my friend's garden. I applied a oil painting filter to the picture, reduced the opacity, and used the image file in my linked style sheet under the body element. I did not specify a repeat pattern, so that it would tile all over the page. I also hope to see the background-attachment: fixed; selector in effect. So I must make sure to have enough content on the page so that it will scroll.


      My Headings H1 and H2 above are using a class that adds background-color:#F7BDDE; padding: 15px; border-width: 3px; border-style: dotted; and border-color: #9C7BBD; and YES it scrolls!


      And finally, I went wild with another class to design this paragraph style. I wanted to make it different from the rest of the page, and also to add more content so I can see my page scroll over the background, which is one of the neatest things I've learned so far. The code for this paragraph is as follows: p.note { color:#DE5AAD; font-size: 1.25em; font-family : Arial, Helvetica, sans-serif; background-color : transparent; padding-top : 10px; padding-right : 15px; padding-left : 15px; padding-bottom : 10px; border-style : double; border-width : medium; border-color : #869874; }

That's my page for Week Four!
Back
My LVS Pages

Valid HTML 4.0!