Style Rules, Syntax and Structure

Qualified rules

A qualified rule starts with a prelude then has a {}-wrapped block containing a sequence of declarations. The meaning of the prelude varies based on the context that the rule appears in—for style rules, it’s a selector which specifies what elements the declarations will apply to. Each declaration has a name, followed by a colon and the declaration value. Declarations are separated by semicolons.

A style rule is a qualified rule that associates a selector list with a list of property declarations. They are also called rule sets in [CSS2]. CSS Cascading and Inheritance [CSS-CASCADE-3] defines how the declarations inside of style rules participate in the cascade.

Selector

A selector represents a particular pattern of element(s) in a tree structure. The term selector can refer to a simple selector, compound selector, complex selector, or selector list. The subject of a selector is any element that selector is defined to be about; that is, any element matching that selector. A list of simple/compound/complex selectors is a comma-separated list of simple, compound, or complex selectors. This is also called just a selector list.

Declaration

Declarations are of the form "property-name: values". There are many properties and associated concepts, including:

• Specificity, inheritance, and the Cascade
• Box model and margin collapse
• The containing block
• Stacking and block-formatting contexts
• Initial, computed, used, and actual values
• CSS shorthand properties

External Style Sheets

<link rel="stylesheet" href="css/style.css">
</head>

Internal (Embedded) Styles

<style> 
selector {
  property: value;
  property: value;
} 
selectors {
  property: value;
} 
</style> 
</head>

Inline Styles

    <tag style="property:value;property:value;"> content </tag>

Browser

Normal flow (defaults). Each browser sets the properties to default values. Refer to individual vendor's documentation and to W3C specifications; vendor's conform to industry standards, but will have variations. It is important to understand how browser applications construct the DOM and CSSOM to gain insight how CSS rules are applied.

Moving from inline to internal stylesheets

Limit the use of inline style only to temporary usage during development and move to internal styles quickly. You can create a class for the element, replace the style attribute with the class attribute, and move all declarations to the newly-created class.

<!-- Let's say you developed the following 
     somewhere in the body section of your document-->
<p style="color:yellow;background-color:navy;"> content </p>

<!-- to convert it to internal, add a new class in the style element 
     inside the head section of the document -->
<style>
.yellow-text {
  color: yellow;
  background-color: navy;
}
</style>
</head>
<!-- now replace the style attribute with the class attribute -->
<p class="yellow-text"> content </p>

Moving from internal to external stylesheets

Using external stylesheets allows you to make all pages look the same and to reduce duplication of the same code from file to file. To move from internal (scope is the document) to external (scope is the web app), follow the guidelines:

• Create an empty external file with .css extension.
• Cut and paste CSS rules from the <style> element to the newly created file.
  • You can create multiple files to organize the CSS code.
  • The CSS file contains only CSS rules.
  • Include the same header (prologue) in each CSS file as the HTML document, with appropriate adjustements.
• Save the new file in the project's css sub-directory.
  • All external stylesheets have the extension .css.
  • All external stylesheets are stored in the css sub-directory.
• To create the link to the external file, replace the <style> element with <link> element to link in the external style sheets.
  • Create a link for each CSS file that you want to include.
  • The order of the links matters when re-defining property values for the same element/property combination.