Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 47

Chapter 3

Making sense of CSS

In matters of style, swim with the current; in matters of principle, stand like a rock.
—Thomas Jefferson
As you learned in Chapter 2, “Making sense of HTML5,” an HTML page is made up of a bunch of

elements that together define the content and layout of what the browser will actually display.
Each element of the HTML markup language has its own semantics and syntax. So an INPUT element,
for example, indicates an input field, and additional attributes specify shape and behavior of the input
field. The display of these elements is usually determined by the specific browser.

So far, nothing has been said about how to give these elements a custom appearance.
Nonetheless, changing font, colors, margins, and sizes of HTML elements is definitely possible—and
to a large extent, even desirable. An acronym for Cascading Style Sheet, CSS is the name of the
language used to format the content of HTML pages.

An HTML page results from the combination of three components: content, style, and behavior.
Content is expressed via the HTML markup language, as discussed in Chapter 2. Style is managed via
CSS, as you'll see in this chapter. Finally, behavior is handled via JavaScript, which you'll learn about in
the next chapter.

Styling a webpage

HTML arrived well before CSS in the early 1990s. In the beginning, developers used to tweak the
appearance of the page by simply adding ad hoc attributes to markup elements. While initially
effective, this approach soon became unmanageable and a significant source of confusion for
developers and users.

To acquire larger and larger market shares, vendors began adding new proprietary style attributes
with each new release of their browsers. As a side—but not secondary—effect, HTML documents
became significantly larger in size and subsequently led to download issues. There was more work for
the servers but also more work for client browsers and slower responses for users.