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

referencing elements by name
HTML elements are automatically styled by browsers, and each browser may style these elements
differently. For example, a plain button element is styled with round corners on, say, an iPhone and
with square corners on a Windows Phone.
CSS allows you to change the appearance of standard HTML elements by creating a selector with
the name of the element's tag. For example, to style all hyperlink elements—for example, the A
element—in the same way, you define a selector as below:
/* All A elements are yellow and don't render the underline */
a {
color: yellow;
text-decoration: none;
}
Note that, all in all, styling by tag name may sometimes be too invasive, at least for certain tags.
For example, having all links look the same is more acceptable than having all input fields or table
elements look the same throughout the whole set of pages of the site.
referencing elements via custom classes
If you intend to give the same appearance to a variety of elements in one or more pages, then you
need to create a CSS class. As mentioned earlier, a CSS class is a named collection of style commands.
You define the class in a style sheet by indicating the (arbitrary) name of the class prefixed by the
dot (.) symbol. Here's an example:
/* This CSS class named "red-button" defines a button with red text */
.red-button {
color: red;
}
In the source code of an HTML page, you assign an element a CSS class using the class attribute.
Here's an example:
<input id="button1" class="red-button" type="button" value="Say Hello!" />
What if in the HTML page you assign an element a class name that doesn't exist? Nothing bad will
happen; the browser will just ignore the setting.
The cascading model
When rendering any HTML element, browsers expect to find a value defined for each possible CSS
property they recognize. This doesn't mean, however, that developers should assign a value to just
each possible CSS property for each element in the page. The “C” in the CSS acronym says it all.
C stands for cascading and all it means is that browsers provide a default value for each property.
These values can be overridden by developers.