HTML and CSS Reference
In-Depth Information
Chapter 1
Introducing CSS—the Language
of Web Design
Building a website with HTML (Hypertext Markup Language) is only half the story. HTML controls the structure
of a web page, using tags such as
<p>
for paragraphs,
<img>
for images, and
<input>
for form elements. This
structural role has become even more important with the introduction of semantic elements, such as
<article>
and
<nav>
, in HTML5. But HTML says nothing about how the page should look. That's the role of Cascading Style
Sheets (CSS). Even default styles are controlled internally by the browser's own CSS.
Instead of applying styles directly to individual elements, the most common—and efficient—way of using
CSS is to create the styles in a separate file. At first, this separation of style information from the content of a web
page seems counterintuitive. But it has the following significant advantages:
•
Less-cluttered HTML code, making it easier to read and maintain
•
Changing the look of multiple pages across a site by editing a single file•
•
Greater control over the way page elements look
■
CSS stands for Cascading Style Sheets, but most web designers say “CSS is. . .” rather than “CSS are. . .”
This is because they're referring to CSS as a technology and not to individual style sheets.
Tip
In the early days of web design, the only way to style elements was with HTML tags, such as
<font>
and
<center>
, and attributes, such as
align
and
size
, which needed to be applied to each element individually.
Styling web pages like this not only limited the range of design options, but it also meant you needed to make
changes to each element individually. With an external style sheet, you make the change in just one place, and it's
automatically applied to all matching elements on every page. It's a blueprint for the website's design. Update the
blueprint, and the site updates immediately.
In this chapter, you'll learn about the following:
•
A brief history of CSS
•
The current state of CSS
•
Choosing the tools to help you work with CSS
•
How to write style rules and apply them to your web pages
•
Using browser-specific prefixes for CSS3
•
How to avoid common beginner mistakes
