An Introduction to CSS


Published on

A work in progress, this covers a brief description of CSS, some basic terminology, and types of style sheets.

Published in: Technology, Education
  • Be the first to comment

An Introduction to CSS

  1. 1. An Introduction to CSS
  2. 2. What Is CSS? • CSS is the acronym for “Cascading Style Sheets”. • It is the W3C recommended standard for defining the styling and presentation of web documents. • Has been around since 1996, but real-world use in web design only came about recently.
  3. 3. Advantages of CSS • Separate presentation from structure and content. • Create lighter documents, which reduces load times. • Easier control over multiple documents. • Style documents for numerous media. • Make documents more accessible.
  4. 4. CSS Terminology Rule: Made up of at least one selector and at least one declaration. Selector Property Value h1 {color: #030; font-size:140%;} Declaration
  5. 5. CSS Terminology • Selector: The element to which you apply the style rule. • Declaration: Property-value pair as in “color: #030;” Every declaration ends with a semi-colon. • Property: Describes a presentational aspect of the selector (element). Ex. color, font- size, width, etc. • Declaration block: Set of declarations, grouped and enclosed in curly braces.
  6. 6. Types of Style Sheets • Browser-defined: Default style sheet used by browser. • User-defined: Set up by the user and can override browser and other style sheets. • Inline: Used directly with an individual element. Useful for applying one-time styles.
  7. 7. Types of Style Sheets • Embedded: Controls one document; placed in the <head> section of the HTML document. • External: Stored in a separate [CSS] file that the web document links to. • Imported: Used to import style sheets into a web document as well as into a linked style sheet via the “@import” rule.
  8. 8. Cascade • Determines in what order rules are applied, especially if there are multiple style sheets linked to the same document. • User overrides all other styles; inline overrides embedded, linked, and imported; embedded overrides linked and imported; • In the case of multiple linked style sheets, the one at the bottom takes precedence if there are conflicts among the rules.
  9. 9. Inheritance • Styles are inherited from parent elements. • In the following example, the header and paragraph, as children of the body element, will inherit all styles applied to <body> unless individually over-ridden. <body> <h1>Header</h1> <p>Paragraph</p> </body>