HTML and CSS Reference
In-Depth Information
The
@import
method of including CSS has been known to cause some problems—for ex-
general, you'd do well to avoid using it.
The Best Way: Using the
<link>
Element
The best way to include CSS in a web page is by means of the
<link>
element:
<link rel="stylesheet" href="css/style.css">
This element, which would be placed in the
<head>
element of your HTML document, is
much like
@import
in that it references an external file. This enables you to keep all your
CSS code separate from the HTML. In addition, this method doesn't cause some of the is-
sues that can arise when using
@import
. Also, because the styles are not “inline,” scattered
among the HTML, your CSS will be that much easier to maintain.
Introducing CSS Selectors
As already alluded to, a CSS selector is the part of a CSS rule set that actually selects the
content you want to style. Let's look at all the different kinds of selectors available, with a
brief description of each.
Universal Selector
The
universal selector
works like a wild card character, selecting all elements on a page.
You'll recall, from our brief overview earlier, that every HTML page is built on content
placed within HTML tags. Each set of tags represents an element on the page. Look at the
following CSS example, which uses the universal selector:
* {
color: green;
font-size: 20px;
line-height: 25px;
}
The three lines of code inside the curly braces (
color
,
font-size
, and
line-height
)
will apply to all elements on the HTML page. As seen here, the universal selector is declared
