ID selectors work in a very similar way to the classes with a few exceptions. In the first place, in the definition of an ID selector the element's name is followed by a "#" symbol and an identifier ("id" value).
Except for the "#" symbol and the name (that must be an identifier), the rest works exactly as classes do.
The way to apply CSS properties to HTML elements is through the "id" attribute. As you may know the "id" attribute is designed to be an identifier for the element (thus it must be unique), which means that the properties defined using this method will only be applicable to a single element per document.
In this case we could say that the properties are grouped and refer to a specific element instead of the classes that are designed for the elements to refer to them. In this example, a paragraph have an "id" value that matches one of the previous definition.
The inheritance and cascading are the two characteristics that shape the CSS language and makes it powerful. These two concepts will give authors full control over the appliance of properties to the document's elements.
The hierarchy of the CSS structure is one of it's most important characteristics, from where it gets the "cascading" denomination. The idea of cascading comes from the effect caused by the order in which the properties are applied to a single element from several style definitions. This may help authors to mix properties from different classes and style declarations and apply them to elements in different stages.
To illustrate this, lets take a look at this example document:
You can analyze the appliance of the properties in two ways: from the most specific to the most global or vice versa. The most specific style declaration in this example is the one made with the "style" attribute and the less specific is that made for the "p" element in the style block. No matter the way you want to see it, the declarations with higher specificity level overrides the rest.
In the example above, the paragraph will have an "arial,helvetica" font face and a "black" color from the properties defined for the "p" element, but will not have a "10px" font size because it will be overridden by the property defined in the "important" class that's applied to the element. Subsecuently, the element will receive from the "important" class a "12px" font size but the "bold" font weight will be overridden by the property defined in the "style" attribute.
The list below shows the specificity order used to apply CSS properties to HTML elements, from the most specific to the most global.
<p style="...">).p#help {...}).p.second {...}).*.second {...}).p {...}).* {...}).The same analysis can be used for properties inherited from other elements. In the next example, the properties defined for the paragraph will override those defined for the body (HTML body tag). The body's properties that are not overridden, are inherited by the paragraph (because it's contained by the body).
This document will look exactly as the one before, with the exception of the font size that won't be inherited by the paragraph from the body because the style declaration for the "p" element will override it, and the "bold" font weight that will be inherited from the body's properties.