HTML and CSS Reference
In-Depth Information
Thus far, when I've discussed style sheets, I've applied them using the
style
attribute of
tags. For example, I've shown how you can modify the font for some text using tags such
as
<div>
and
<span>
, or how you can modify the appearance of a list item by applying a
style within an
<li>
tag. If you rely on the
style
attribute of tags to apply CSS, if you
want to embolden every paragraph on a page, you need to put
style=“font-weight:
bold”
in every
<p>
tag. This is no improvement over just using
<p><b>
and
</b></p>
instead. Fortunately, CSS provides ways to apply styles generally to a page, or even to an
entire website.
Creating Page-Level Styles
First, let's look at how we can apply styles to our page at the page level. Thus far, you've
seen how styles are applied, but you haven't seen any style sheets. Here's what one looks
like:
<style type=“text/css”>
h1 { font-size: x-large; font-weight: bold }
h2 { font-size: large; font-weight: bold }
</style>
The
<style>
tag should be included within the
<head>
tag on your page. The
type
attribute indicates the MIME type of the style sheet.
text/css
is the only value you'll
use. The body of the style sheet consists of a series of rules. All rules follow the same
structure:
selector { property1: value1; property2: value2; .. }
Each rule consists of a selector followed by a list of properties and values associated
with those properties. All the properties being set for a selector are enclosed in curly
braces, as shown in the example. You can include any number of properties for each
selector, and they must be separated from one another using semicolons. You can also
include a semicolon following the last property/value pair in the rule, or not—it's up to
you.
You should already be quite familiar with CSS properties and values because that's what
you use in the
style
attribute of tags. Selectors are something new. I discuss them in
detail in a bit. The ones I've used thus far have the same names as tags. If you use
h1
as
a selector, the rule will apply to any
<h1>
tags on the page. By the same token, if you use
p
as your selector, it will apply to
<p>
tags.
