CSS: Cascading Style Sheets - Terminology
External styles, also called linked styles, are separated into a separate file with a .css extension.
Embedded styles, also called internal styles, are inserted within style tags in the head section of an .html page.
Inline styles are inserted in the opening tag using a style attribute.
Rules are also referred to as styles and consist of a selector and a set of one or more declarations.
A selector may "select" different areas in the html to style:
- An element name such as body or h1
- A class value. class="floatright" connects to the .floatright selector.
- An id value. id="outerwrapper" connects to the #outerwraper selector.
- Multiple items that are separated by commas. For example h1, h2, h3
- A descendant selector (for example, nav li) which selects only the li content within the nav tags.
A declaration (for example, color: #FFFFFF;) is made up of a CSS property followed by a colon : followed by the property value and ends with a semicolon ;
Inheritance means that CSS properties can be inherited from a parent container. For example, paragraphs and headings will inherit the font and color rules of the body selector. Properties that affect the placement of elements such as padding, borders, and margins are not inherited.
Specificity means that if the background-color property was applied to the body, p (paragraph), and #leftcolumn selectors in the same style sheet, the more specific selector wins. So the rule for the #leftcolumn selector would beat the p rule which would beat the body rule.
Specificity also means that that if two or more rules for the same property apply to the same content, the closer rule will win. For example, if the background-color property was created for the body selector in three different style sheets (inline, embedded, external), the inline style would beat the embedded style which would beat the external style.
The rules by which styles are applied help explain the "cascade" in cascading style sheets.