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

The CSS standard defines a long list of property names for you to use in style commands and
related feasible values. In addition, some browsers define their own custom properties to add
proprietary features.
In this section, you'll review the purpose and syntax of selectors. Then you'll be up to exploring the
CSS properties and their values.
Note The content of an embedded STYLE element and a style sheet CSS file is the same.
At any time, you can take the content of an embedded STYLE element and save it to a
linked CSS file to achieve the same graphical outcome.
referencing elements by ID
In HTML, all elements in a page can (and sometimes should) have a unique ID. Having an ID is not
mandatory, but it's the recommended way for a page author to identify (in unambiguous way) a
given element. In HTML, you give an element a unique ID by setting the ID attribute, as shown below:
<div id="header" ... />
Multiple elements in the same page shouldn't have the same ID—even though this aspect is
sometimes tolerated by browsers and doesn't usually prevent the page from being rendered.
The pattern to refer to an element via ID in a CSS style sheet is expressed as follows:
#id {
...
}
The selector consists of the ID string prefixed by the # symbol. Let's consider the following HTML
button element:
<input id="button1" type="button" value="Say Hello!" />
To style the button so that its caption shows in red, you need to have the following command in
the style sheet:
#button1 {
color: red;
}
You typically reference elements by ID when you don't expect to reuse the style commands for
other elements in the pages of the site. Using a selector based on ID is, therefore, a way to style just
one specific element.