Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Summary 439

15

/ two sidebars, absolutely positioned /
#sidebar1 { position: absolute;
right: 2em; top: 3em; width: 9em; }
#sidebar0 { position: absolute;
left: 2em; top: 3em; width: 9em;
text-align: right; }
#sidebar0 .section, #sidebar1 .section
{ font-size: smaller;
border: 0px solid lime;
text-transform: lowercase;
margin-bottom: 1em; }

Site-Wide Style Sheets

The style sheet given in Listing 15.7 was created to be used on the entire site, not just on
one page. Linking to an external style sheet is an easy way for you to apply style sheets
over your entire set. You just use the tag on every page, with the href attribute
set to the location of your site-wide style sheet.

A site-wide style sheet can be used to enforce a consistent appearance on the website,
even if you have multiple web developers working on different parts of the same site.
Additional styles can be added in embedded style sheets or in additional linked CSS files
that are created for each department or business unit. For example, each department at a
school may use the school’s global style sheet for design elements common to the entire
site, and individual departmental style sheets for that department’s unique color, layout,
and font choices.

Summary

Tables have long been used in web design to lay out a web page. However, this use of

markup introduces a plethora of complications, from accessibility concerns to
complexity problems. Using CSS for layout can clean up your HTML code and produce
flexible designs that can be updated easily to new styles.

Laying out a page with CSS starts with adding sections to the HTML, using HTML5 sec-
tioning elements. These are then arranged in vertical columns, through the use of either
positioning rules or the float property. With CSS layouts, it’s not difficult to reorder and
reshape the page simply by changing the style sheet.