HTML and CSS Reference
In-Depth Information
6. Image Floating at the Right. Set the floatright id to use a 10 pixel margin and
float:right as follows:
#floatright { margin: 10px;
float: right;
Now, we'll configure the styles for the contents of the right column. The
announcements consist of a heading (contained within <h4> tags) and a paragraph
(assigned to a class called newsitem ).
7. Configure the heading to have a 1 pixel black solid bottom border, 2 pixels of
padding at the bottom, a 10 pixel margin, the same text color as the logo, and
the same background color as the right column:
h4 { padding-bottom: 2px;
border-bottom: 1px solid #000000;
margin: 10px;
color: #cc66cc;
background-color: #eeeeee;
8. News Items. Configure a class called newsitem that uses a small font and has a
10 pixel margin as follows:
.newsitem { font-size:.9em;
margin: 10px;
Save the threecolumn.html file in the wildflowers3 folder.
Part 4—Test the Page
Now that your styles are coded, test the threecolumn.html page again. Your page should
look similar to the screenshot shown in Figure 7.13. If there are differences, verify the id
and class values in your XHTML. Also check the syntax of your CSS. You may find
the W3C CSS validator at helpful when verifying CSS
syntax. The student files contain a copy of threecolumn.html in the Chapter7 folder.
How do I create a custom-color scroll bar?
It can be fun to color-coordinate the scroll bar with your Web site! Keep in mind that not all
your Web visitors will see your handiwork. While this effect is supported by Internet Explorer, it
is not supported by all browsers. To configure a scroll bar with colors that you choose, add the
following styles to the body tag: scrollbar-face-color , scrollbar-arrow-color ,
and scrollbar-track-color . For example:
body { scrollbar-face-color:#cc66cc;
Note : Your CSS will not pass W3C validation tests if you use these Internet Explorer only
Search WWH ::

Custom Search