HTML and CSS Reference
In-Depth Information
Teamwork: Managing a Style Sheet
Your style sheets often will be as long and as complex as your Web site content. As the size
of a style sheet increases, you might find yourself overwhelmed by multiple style rules and
definitions. This can be an especially critical problem in a workplace where several people
need to interpret and sometimes edit the same style sheet. Good management skills are as
crucial to good Web design as a well-chosen color or typeface. As you create your own style
sheets, here are some techniques to help you manage your creations:
• Use style comments throughout, especially at the top of the file. Clearly describe the
purpose of the style sheet, where it's used, and who created it and when.
• Because color values are not always immediately obvious, include comments that
describe your colors. For example, annotate a color value with a comment such as “body
text is tan”.
• Divide your style sheet into sections, with comments marking the section headings.
• Choose an organizing scheme and stick with it. You may want to organize style rules by
the order in which they appear in your documents, or you may want to insert them alpha-
betically. Whichever you choose, be consistent and document the organizing scheme in
your style comments.
• Keep your style sheets as small as possible, and break them into separate files if neces-
sary. Use one style sheet for layout, another for text design, and perhaps another for
color and graphics. Combine the style sheets using the
@import
rule, or combine them
within each Web page. Also consider creating one style sheet for basic pages on your
Web site, and another for pages that deal with special content. For example, an online
store could use one style sheet (or set of sheets) for product information and another for
customer information.
By following some of these basic techniques, you'll find your style sheets easier to man-
age and develop, and it will be easier for your colleagues to collaborate with you to create
an eye-catching Web site.
You've completed your work on designing a style sheet to format the text and back-
grounds on the Sunny Acres Web site. Tammy will continue to examine your work and
get back to you with future projects or design changes.
Session 3.3 Quick Check
1.
Provide a style rule to display all ordered lists with lowercase letters as the marker.
2.
Provide a style rule to display all unordered lists using the
star.png
image fi le,
placed inside of the containing box.
3.
By default, most browsers indent lists from the surrounding text. Provide a
style rule to remove the indentation from every unordered list nested within a
section
element.
4.
Provide a style rule to display the text of all previously visited hypertext links
in gray.
5.
Describe the item selected by the following selector:
#top > p:first-of-type:first-line
6.
Describe the items selected by the following selector:
div.links img[usemap]
7.
Provide a style rule to insert the text string “*** ” before every paragraph belong-
ing to the
review
class.
