Help
Depending on how you use it, you can associate CSS with a web page one of three ways. This excerpt from Christoper Schmitt's CSS Cookbook, Third Edition will review each method in detail.
If you want to know about the different ways to add styles to a web
page, you can apply styles in three ways: externally, internally, and
inline. An internal stylesheet appears near the top of the HTML
document, within the head:
<style type="text/css">
<!--
#header {
width: 100%;
height: 100px;
font-size: 150%
}
#content {
font-family: Verdana, Arial, sans-serif;
margin-left: 20px;
margin-right: 20px
}
.title {
font-size: 120%
}
-->
</style>
Note
Note the use of HTML comments immediately after the
style element. Those are placed there to prevent
the CSS content from showing up in the web page layout or being
rendered by the browser in some unwanted fashion.
External stylesheets are stored in a separate file, which gets associated with the HTML file through linking. The following code is saved in its own file:
/* CSS Document */
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Warning
Notice that the style element is not present
in the external stylesheet.
In the web page, add the following line between the
head tags to link to the external stylesheet that
contains the preceding styles:
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
Inline styles work similarly to font in that
they appear with the markup they affect:
<h1 style="font-family: verdana, arial, sans-serif; font-size: 150%; color: blue;">Page Title</h1> <p style="font-family: sans-serif; font-size: 90%;">Hello, world!</p>
The three different types of stylesheets are:
- External
All web pages link to the external stylesheet that contains nothing but CSS styles. If you want to change the font color on all pages linked to this stylesheet, just update the external stylesheet. Link to the stylesheet with the
linktag.- Internal
A unique web page might have its own stylesheet so that styles affect only that page and not all web pages. Define internal styles within the
styletags.- Inline
Inline styles work similarly to
fontwith the style information applied to a specific tag within a web page. Designers rarely apply inline styles and do so when they know there is only one occurrence of a specific style.
External and internal stylesheets save time in terms of website
maintenance compared to inline styles. Skipping the use of
font for every text item needing styling keeps the
file slim and trim.
For example, say you inherit a web page where all the text is blue
and you use font to control the size of the text. You
receive orders to change the text to black, so you search for every
instance of to change the color value from
blue to black, as in the following:
<p><font size="2" color="blue">Text goes here</font></p>
To change all p elements from blue to black in
an external stylesheet requires two steps: open the
CSS file and change the color:
p {
color: black;
}
In an internal stylesheet, you can change the
text from blue to black by searching for the style at the top of the
page and replacing blue with
black:
<style type="text/css">
<!--
p {
color: black;
}
-->
</style>
With inline styles, changing the color takes as much time as fixing the
original file with the font tag:
<p style="font-color: blue">Test goes here.</p>
Why would anyone want to use inline styles, considering it’s time-consuming to make changes? It’s rare, but you may have content that appears once in the whole website but that needs a special style. Rather than cluttering the external stylesheet with the style for one item, you’d use inline styles.
As for internal and external stylesheets, most sites use external stylesheets. However, when writing the CSS code for a web page design, it’s best to start out with an internal stylesheet. When you reach the point where the design is complete or starts to get a little unwieldy, move the stylesheet to a separate file. Then make edits to the external stylesheet as needed.
Also, you may have a special page that’s not related to the website or that uses a special style. In this case, an internal stylesheet could be easier to use as opposed to adding more clutter to the external stylesheet.
Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.
