Exam 98-383: Introduction to Programming using HTML and CSS/Understand CSS Fundamentals

This lesson covers CSS fundamentals, including inline styles, internal style sheets, external style sheets, rule sets, and industry best practices.

Readings

 * 1) Mozilla: CSS Basics
 * 2) Mozilla: Cascade and Inheritance
 * 3) CSS Tricks: Methods to Organize CSS
 * 4) HTML Goodies: Testing CSS Against Multiple Browsers

Activities

 * 1) W3Schools: CSS Exercises

Analyze the impact of using inline styles, internal style sheets, and external style sheets
Includes when to use inline styles; when to use internal style sheets; when to use external style sheets; precedence when using a combination of inline styles and style sheets.

Inline Styles
Inline CSS has the format:

Example:

Internal Style Sheets
Internal CSS has the format:

Example:

External Style Sheets
External CSS is specified using a link element:

External CSS files have the format:

which may also be written as:

or

Examples:

Precedence
Precedence (the cascade) is based on:
 * 1) Importance
 * 2) Specificity
 * 3) Source Order

Importance has the highest precedence, but its use is not recommended.

Example:

After importance, the more specific a selector is, the higher the precedence will be.
 * 1) inline (higher)
 * 2) ID (#)
 * 3) Class (.)
 * 4) Element tag (lower)

If completing rules have the same importance and specificity, rules defined later override earlier rules. When multiple external CSS style sheets are linked, or internal and external style sheets are used, the order in which the links and internal styles are defined determines precedence.

Construct and analyze rule sets
Includes valid syntax for the CSS rule set; selectors, including class, id, elements and pseudo-class.
 * A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Examples:

Construct well-formed style sheets that conform to industry best practices
Includes reusing rules and rule sets; commenting; testing on multiple browsers; web safe fonts.

Reuse
Rules and rule sets may be reused in CSS and in HTML.

Examples:

Comments
CSS comments are added using  syntax.

Examples:

Testing
Test CSS using the W3C CSS Validator service, and test using multiple browsers.

Visit CanIUse to check browser compatibility with different HTML and CSS features.

font-family
There are only a certain number of fonts that are generally available across all systems.

Examples:

font
The  CSS property is a shorthand for ,  ,  ,  ,  ,  , and. If used, it must include values for  and.

Examples: