Cascading Style Sheets (CSS) refers to formatting rules developed by the W3C (World Wide Web Consortium) for web page content. The word “cascading” refers to the way CSS determines how a particular element is ultimately displayed in the web page. The style (color, font and spacing) in which the element is displayed is affected by the style sheet created by the author of the page, by the user's customized style selections (if any), by the default styles of the browser that displays the page, by CSS specificity (a methodology that gives different weight to particular kinds of CSS rules), and by the order of CSS rules, creating a complex “cascade” of potentially conflicting rules in which determinations that have higher priority override those with lower priorities.
CSS separates content (e.g., HTML code) from the CSS rules that define how the content looks (referred to as “the presentation” of the content). HTML code resides in an HTML file and the CSS rules that define how the content looks reside in an external style sheet file with a .css extension or in a particular part of an HTML document. In addition to controlling the appearance of text on the web site, CSS can be used to control the format and positioning of block-level elements. Block-level elements are produced by using tags such as the h1, p and div tags to delimit blocks of content that are treated as a single element.
A CSS formatting rule is composed of a selector and the declaration or block of declarations. The selector can be a tag such as h1, p, a class name or an identifier that identifies the formatted element. The declaration block defines the style properties to be applied to the indicated content. For example, in the following rule:
p {
font-size: 12 pt;
font-family: Arial;
font-weight: bold;
}
selector p indicates that the content of a paragraph will be displayed in a 12 point bold Arial font. The font-size, font-family and font-weight tags denote properties of the paragraph content and 12 points, Arial and bold are values of the respective properties. Because one rule can apply to many tags (e.g., in the example rule above, the rule can apply to the content of many different paragraphs), changing the appearance of all the block elements using the same rule can be effected by changing a single rule.
CSS statements can specify a value for each separate property explicitly in a longhand declaration for that particular property. CSS also allows for the creation of shorthand declarations, an abbreviated way to specify the values of several properties using a single declaration, by using shorthand property names. The use of shorthand property names has the effect of combining several associated properties into a single declaration by replacing all the individual property names with the shorthand property name. The values for the properties can be specified in a comma separated list. For example, the border property is a conceptual perimeter line around an element, between the inner padding and outer margin space. The border keyword is a shorthand property name composed of a border-style property, border-width property and border-color property. Each of these properties can be set individually. Each of these properties can be set for the top, right, bottom and left side of the element. A shorthand definition of the border property can omit values for some of the properties that make up the shorthand property. Shorthand CSS rules assign default values to omitted property values.