An Introduction to CSS

What Is CSS? • CSS is the acronym for “Cascading Style Sheets”. • It is the W3C recommended standard for deﬁning the styling and presentation of web documents. • Has been around since 1996, but real-world use in web design only came about recently.

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.

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

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.

Types of Style Sheets • Browser-deﬁned: Default style sheet used by browser. • User-deﬁned: 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.

Types of Style Sheets • Embedded: Controls one document; placed in the <head> section of the HTML document. • External: Stored in a separate [CSS] ﬁle 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.

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 conﬂicts among the rules.

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>

http://smashingweb.ge6.org	13
http://ranjith.zfs.in	12
http://www.slideshare.net	3

An Introduction to CSS

by Vidya Ananthanarayanan on Oct 09, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 28

Statistics

An Introduction to CSS — Presentation Transcript