HTML and CSS Reference
In-Depth Information
Defi ning Important Styles
If you need browsers to enforce a style, you can append the
!important
keyword to the
style property, using the syntax
property
: value !important;
where
property
is the style property and
value
is the property value. The follow-
ing style rule sets the color of all
h1
headings to orange; and because this property is
marked as important, it takes precedence over any other style that may be defi ned in the
style sheet:
h1 {color: orange !important;}
The
!important
keyword is often necessary for visually impaired users who require
their pages rendered with large, clear text and highly contrasting colors. Such a user
could set the text size in a user-defi ned style sheet and override any styles specifi ed by
the page author through the use of the
!important
keyword. In general, Web page
authors should not use the
!important
keyword and should instead write style sheets
that are based on the content of the Web documents. This practice makes the style sheets
easier to edit and maintain if the content or design of the Web site changes.
Make sure that the
!important
keyword
is placed between the
style property value and
the closing semicolon;
it is invalid if placed
elsewhere.
Writing Style Comments
Now that you've reviewed some principles of style sheet design and application, you can
begin creating your own style sheets. You'll start by creating an external style sheet that
will be used to format the appearance of text on the Sunny Acres Web site. Because style
sheets are text fi les, you can create your style sheets with the same text editor you used
for creating and editing your HTML fi les.
To start creating the sa_styles.css style sheet:
◗
1.
Use your text editor to open the blank text file
sa_stylestxt.css
from the
tutorial.03/tutorial folder.
◗
2.
Save the file as
sa_styles.css
.
Style sheets can be as long and complicated as HTML fi les. To help others read your
style sheet code, you should document the content and purpose of the style sheet using
style sheet comments. Style sheet comments are entered as follows
Style comments can also
be added to embedded
style sheets as long as
they are placed between
the opening and closing
<style>
tags.
/*
comment
*/
where
comment
is the text of the comment. Like HTML, CSS ignores the presence of
white space, so you can place style comments on several lines to make them easier to
read. For example, the following style comment extends over four lines in the style sheet:
/*
Sunny Acres
Style Sheet
*/
Add style comments to the
sa_styles.css
fi le now to document the purpose and author-
ship of the style sheet.
