Table of Contents
Intermediate
In the previous section, we started developing longer web pages and using new HTML tags in a systematic way. We made some basic font changes. We created some paragraphs, headings, and lists.
The problem is that by themselves, these tags are kind of lifeless. An
<h1> is just like any other <h1>
out there... right?
Fortunately, no. There is a way to style tags, using a language
called Cascading Style Sheets (CSS). We already saw a hint
of what style sheets can do when we were mucking around with the
color and background-color. But CSS
can do much more than this, as we'll see starting in this section.
The first three pages deal with how to apply styles; we're going to be learning a new framework for applying them that is elegant and efficient. In the beginning we'll be sticking with "color" styles, because these styles are simple and get the point across. After that, we'll start expanding our style vocabulary.
Section Goals
When you're done with this section, you should be able to:
- Create a style sheet for your web page or for your entire web site.
- Create named, reusable styles using classes and IDs.
- Apply sophisticated font changes to any HTML element.
- Change the padding, margins, and borders.
- Position text with alignment and indentation.
Subsections
- Style Sheets
- In this section, we learn about style sheets, which provide a convenient method for collecting styling rules in one place and applying them to an entire website. We cover CSS rule syntax and basic cascading rules.
- Classes and IDs
- More on style sheets. Here we learn how to create more specialized CSS rules by using CSS classes and IDs.
- Div and Span
- The
<div>and<span>tags are the two "generic" HTML tags; they provide a way to apply styles to any given swath of HTML. - Font Control
- This section provides more sophisticated methods for controlling a document's font. We examine how to change the font family, font size, and font styling. We'll also take a look at a stylesheet that is a bit more complex than the ones we've seen in earlier sections.
- Borders
- This section covers borders: how to set border properties such as color and thickness, how to set different borders on all four sides, and how to use border shorthand notation.
- Margins and Padding
- This section explains padding (extra space inside an element's border) and margins (extra space outside an element's border).
- Align and Indent
- This section covers text indents and alignment. We'll learn how to create hanging indents and align text horizontally. (Aligning blocks will come later, in the sections on positioning.)
