HTML and CSS Reference
In-Depth Information
page more efficient. Whether you choose to use multiple
<link>
references within the HTML or use
@import
in
your main stylesheet is entirely your choice. Just remember for good practice, you should merge all stylesheets into
one when it's time for a web page to go live. This is something you'll do in Chapter 17.
Using Media Types
As mentioned in Chapter 1, you can apply a stylesheet to specific media types, such as screen, print, and handheld.
Note that if a media attribute isn't specified, a browser treats that referenced stylesheet as applying to all media
types, like so:
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” />
This is a safe (it works in all browsers) and slightly quicker way of referencing a stylesheet.
What about multiple stylesheets for different media types? No problem. Assume styles.css is the main CSS file ap-
plied to all media types, but you decide you want to add an extra stylesheet that is only applied when you print the
web page. You can do that like so:
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” />
<link rel=”stylesheet” href=”css/print.css” type=”text/css” media=”print” />
Here, the first
<link>
references a stylesheet to be applied to all media types (because you haven't specified a me-
dia type). However, the second
<link>
references a stylesheet specifically for print. The main stylesheet still ap-
plies to all media types (including print), but the additional print stylesheet applies only to the print media type.
Sometimes styles within the print stylesheet can override the ones in the main stylesheet. Most of the time this will
be intentional, but sometimes you get conflicts. The next chapter covers specificity and importance that determines
which styles should be applied when style conflicts occur.
Much like using the
@import
rule for adding additional stylesheets into another stylesheet, you can also use the
@media
rule for defining styles for specific media types within a stylesheet.
Assume you have just one main stylesheet, like the following:
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” />
Rather than adding another
<link>
to reference a print stylesheet, within styles.css, you can add the following with
the main stylesheet:
@media print{
/*print styles here*/
}
Any styles within this
@media
rule are applied only to printed web pages. Anything outside this rule is applied to
all media types.
You may find using media rules more desirable because it means referencing only one stylesheet, which is more effi-
cient.
Inline Styles
