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

In addition, browsers were often challenged to interpret unknown attributes and tags. It was not
an easy choice for architects to decide whether the appropriate reaction to malformed markup was
to throw an error to the user or to just silently skip over unknown elements. Most browsers opted for
the second option. Although that choice improved the user experience, it made life for developers
significantly harder and, in hindsight, it might not be overreaching to say that it delayed the explosion
of client-side web developing by a few years.
To find a consistent way to separate content from presentation, back in the mid-1990s the World
Wide Web Consortium (W3C) created a committee to give shape to a standard language for styling
the content of webpages. That was the beginning of CSS. The very first recommendation came out
in 1996. Over the ensuing years, new levels of specifications have appeared regularly, with growing
adoption from browser vendors and increasing levels of use by developers. Today, the CSS3 standard
is complete and broadly adopted by browsers. A CSS4 standard is in the works.
For the purposes of this topic, CSS will refer to CSS3.
Adding CSS information to pages
So CSS is a language that complements HTML and gives page authors the great opportunity to define
structure and content in one file and define layout and appearance in another file. Thanks to such
a neat separation of concerns, different teams of people—typically web developers and graphical
designers—can work in parallel on the same project.
In the rest of this chapter, you'll explore various ways to add CSS styling to HTML pages.
Inline styling
CSS works by adding style information to individual HTML elements. Up until a few years ago, it was
fairly common among HTML authors to add style information locally, within the definition of the
HTML element. This technique, known as inline styling , consists of adding a new style attribute to each
HTML element you are interested in configuring. Here's an example:
<div style=" ... ">
<!-- some markup goes here -->
</div>
The content of the style attribute is a semicolon (;) separated string. Each token within that
string consists of two parts: a property name and a value separated by a colon (:). Here's a sample
style string that defines the background and foreground color of any content inside the styled DIV
element:
<div style="background-color:#000000;color:#ffffff">
<!-- some markup goes here -->
</div>