HTML and CSS Reference
In-Depth Information
External Style Sheets
Document-Wide Style
Inline Style
•
Can set and update
styles for many
documents at once.
•
Style information is
cached by the browser,
so there's no need to
repeat.
•
Can easily control
style document by
document.
•
No additional network
requests to retrieve
style information.
•
Can easily control
style to a single
character instance.
•
Overrides any
external or document
styles in the absence
of
!important
directive.
Pros
•
Requires extra download
round-trip for the style
sheet, which might
delay page rendering,
particularly when
multiple files are
in use.
•
In some cases when
@import
is used, the
browser may cause a
rendering “flash” under
slow loading conditions.
•
Need to reapply style
information for other
documents, bulking
up the document
and making it more
difficult to apply
updates.
•
Need to reapply
style information
throughout the
document and
outside documents.
•
Bound too closely to
markup, making it
even more difficult
to update than other
approaches.
Cons
<link
rel="stylesheet"
href="main.css"
type="text/css"
media="screen">
<style type="text/
css" media="all">
h1 {color: red;}
</style>
<h1 style="color:
red;">
I am red!
</h1>
Example
N
OTE
A trailing slash is
needed for XHTML.
T
ABLE
4-4
Comparison of Style Sheet Approaches
example, the following CSS rules can be found in a file called sitestyle.css, which defines a
style sheet used site-wide:
/* sitestyle.css */
body {font-size: medium;
font-family: Serif;
background-color: black;
color: white;}
#page {background-color: white;
color: black;
padding: 1em;}
