HTML and CSS Reference
In-Depth Information
Earlier in this lesson, I mentioned Cascading Style Sheets as a way you could control the
look and feel of your pages. Styles are a way to control how the browser renders HTML
tags (or elements, as they're called in standards documents). For example, in this lesson,
I've used the
<h1>
tag a number of times. Most browsers print text enclosed inside an
<h1>
tag in a large, boldface font and leave some whitespace after the heading before
printing something else. Using CSS, you can tell the browser to render the
<h1>
tag dif-
ferently than it normally would. CSS provides a lot of flexibility in how you can alter the
appearance of any type of element, and the styles can be applied in a number of different
ways.
The advantage of CSS is that it can be used at varying levels of specificity. For example,
you can put all your styles into a separate file and link to that file from your web page.
That way, if you want to change the appearance of your site, you can simply edit your
CSS file and make changes that span every page that links to your style sheet. Or if you
prefer, you can include styles at the top of your page so that they apply only to that page.
You can also include styles inside the tags themselves using the
style
attribute.
3
You can also control the specificity of the styles you create based on how you define
them. For example, you can write rules that apply to all tags of a specific type, such as
all
<h1>
elements. Or you can specify classes for your elements and then write rules that
apply only to members of that class. Classes are categories or labels that are assigned to
tags using the
class
attribute. For example, you could create a class called
headline
and
then make all
<h1>
elements in the
headline
class red. You can also write rules that
apply to single elements by assigning them a particular identifier using the
id
attribute
and writing rules that apply to that identifier. Here's an example of an
<h1>
tag that
includes both a class and an ID:
<h1 class=”headline” id=”leadstoryheadline”>Lead Story Headline</h1>
One thing you'll find as you progress through the topic is that CSS can serve as a
replacement for many common tags. As I describe various tags, I explain how you can
achieve the same effects using CSS instead. Generally, the flexibility of CSS means you
should use HTML to describe the structure of pages and CSS to define their appearance.
The coverage of CSS in this topic culminates with Lesson 13, “Advanced CSS
Techniques,” which explains how to use CSS to manage the entire layout of the page, or
even the entire layout of a site.
