Scribd
Upload
59 views

Cascading Style Sheets: Alexander Zangerl Az@bond - Edu.au

Cascading Style Sheets (CSS) allow separation of document content from document presentation by associating style information like fonts, colors, and layout with HTML elements. CSS rules consist of selectors that specify the elements to style and declarations that define properties of the element such as color or font. Styles can be applied via internal, embedded, or external CSS and external is preferred for consistency across pages. CSS has evolved through CSS1, CSS2, and the current CSS3 specification.

Uploaded by

Patrick Matias
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Cascading Style Sheets: Alexander Zangerl Az@bond - Edu.au

Cascading Style Sheets (CSS) allow separation of document content from document presentation by associating style information like fonts, colors, and layout with HTML elements. CSS rules consist of selectors that specify the elements to style and declarations that define properties of the element such as color or font. Styles can be applied via internal, embedded, or external CSS and external is preferred for consistency across pages. CSS has evolved through CSS1, CSS2, and the current CSS3 specification.

Uploaded by

Patrick Matias
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Cascading Style Sheets

Alexander Zangerl az@bond.edu.au


Bond University

Cascading Style Sheets

1 / 21

Cascading Style Sheets, CSS


associating style elements to documents changes rendering information for document elements for any structured document format (XML, HTML...) tutorial
http://www.w3schools.com/css/css intro.asp

introduction
http://www.w3.org/MarkUp/Guide/Style

W3C created STYLES in addition to HTML 4.0 dene HOW to display elements document may use one, two or more style sheets applied according to specied priorities (= cascade) can be specied inside a single HTML element (inline) inside the <head> element of an HTML page (embedded) or in an external CSS le (linked) can be mixed

Cascading Style Sheets

2 / 21

Cascading Style Sheets, CSS (cont.)


consists of rules which denes how element should be displayed has two parts: selector and declaration advantage
content of HTML documents are clearly separated from the documents presentation layout

has features
Associating CSS to Documents [feature] CSS Cascading [feature] CSS Media [feature] CSS Grouping [feature] CSS Inheritance [feature] CSS pseudo elements [feature] CSS positioning and sizing [feature]

instances
CSS3 CSS2 CSS1
Cascading Style Sheets 3 / 21

CSS document
can be written in any text editor has .css extension consists of
CSS Rule

Cascading Style Sheets

4 / 21

CSS Cascading
multiple sheets can be applied to a document (browser, reader, server, author) conict resolution at clashes denes what style will be used: browser default -> External Style Sheet -> Internal Style Sheet -> Inline Style observation
inline style has the highest priority

Cascading Style Sheets

5 / 21

Inline CSS
these modify the behaviour of a single tag, a group of tags, or a block of information on a single page example
http://css.nu/examples/inline.html http://www.blooberry.com/indexdot/css/examples/ cssembedded.htm

style can be specied for an individual element using STYLE attribute within the element tag loses many of the advantages of style sheets by mixing content with presentation example

<p style="color: sienna; margin-left: 20px">This is a paragrap

Cascading Style Sheets

6 / 21

Embedded CSS
insert a style sheet into a particular page changing a parameter modies the look of the complete page should be used when a single document has a unique style in the head section by using the <style> tag in the <HEAD> section of document example

<head><style type="text/css"> hr {color: sienna}</style></head

Cascading Style Sheets

7 / 21

Linked CSS, external


Web pages link to a named sheet (le with a .css extension); change the look of many pages by changing only the style sheet le ideal when the style is applied to many pages can change the look of an entire Web site by changing one le rules stored in separate text document each page must link to the style sheet using the <link> tag in the <HEAD> section of document syntax

<head><link rel="stylesheet" type="text/css" href="mystyle.css

Cascading Style Sheets

8 / 21

CSS Rule
style sheet consists of one or more rules denes how to display HTML element has two parts: selector and declaration syntax
selector { property1: value1; ... }

example
ul ul li { font-size: x-large; font-decoration: italic }

http: //www.htmlhelp.com/reference/css/structure.html

Cascading Style Sheets

9 / 21

CSS Selector
http://www.w3schools.com/css/css syntax.asp http://www.blooberry.com/indexdot/css/syntax/ selectors/selectors.htm http://www.w3.org/TR/REC-CSS2/selector.html http://www.xml.com/pub/a/2003/06/18/ css3-selectors.html browser table
http://www.westciv.com/style master/academy/ browser support/selectors.html

identies the element to which a style applies variety of forms for selector element selector: refers to HTML element can be grouped together, seperated with comma, and applies therefore to all the listed elements -> H1 {color: purple;} H1, H2, P {color: purple;}
Cascading Style Sheets 10 / 21

CSS Selector (cont.)


contextual selector: species style for HTML element based on context in which they appear -> LI B {color: purple;} class selectors: HTML element can be grouped into a class -> .warning { color: red;} pseudo-class and pseudo-element selector: for anchor tag, rst-line, rst-letter ID selectors: assigns a unique identier to a particular HTML element -> #rst-para { font-weight: bold;}

Cascading Style Sheets

11 / 21

CSS Declaration
reference
http://www.htmlhelp.com/reference/css/ all-properties.html

index
http://www.w3.org/TR/REC-CSS2/propidx.html

declaration is combination of property and value enclosed in curly braces divided by a colon syntax
property: value;

property names are not case-sensitive declaration can contain several property/value pairs pairs divided by semicolon

Cascading Style Sheets

12 / 21

CSS positioning and sizing


pages employ streaming protocol so page content treated as a single block relative, absolute use DIV, SPAN containers size, overlap with z-index helpful to reduce the number of tables which are still heavily used for formatting

Cascading Style Sheets

13 / 21

CSS pseudo elements


anchor (visited), paragraphs (rst-letter), ... example
a:active { color: red }

Cascading Style Sheets

14 / 21

CSS Grouping
grouping of rules makes many rules more manageable example
h1, h2, div.class5, blockquote { background: black }

Cascading Style Sheets

15 / 21

CSS Inheritance
properties propagate to nested elements can be overridden there style information is inherited downwards the document tree

Cascading Style Sheets

16 / 21

CSS Media
support for various media: screen, print, projection, braille, speech

Cascading Style Sheets

17 / 21

CSS1
rst and meanwhile deprecated version http://www.w3.org/TR/REC-CSS1 simple style sheet mechanism that allows to attach style to HTML documents history
dened 1996, 1999

Cascading Style Sheets

18 / 21

CSS2
builds on CSS1 with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets supports media-specic style sheets -> tailor the presentation of document to visual browsers, aural devices, printers, braille devices, handheld devices, .. supports: content positioning downloadable fonts table layout features for internationalization (right-to-left text) automatic counters and numbering table formatting bidirectional text text shadows cursor control printing properties, other media dependies (OS colors, fonts) aural representation (speech synthesizer) history
dened 1998

http://www.w3.org/Style/Examples/007/ demo site


Cascading Style Sheets 19 / 21

CSS2 (cont.)
http://www.csszengarden.com/

tutorial
http://www.w3schools.com/css/

reference
http: //zvon.org/xxl/CSS2Reference/Output/index.html

specication
http://www.w3.org/TR/CSS21/

Cascading Style Sheets

20 / 21

CSS3
under development includes level 2 new selectors vertical text user interaction http://www.w3.org/Style/CSS/current-work

Cascading Style Sheets

21 / 21

You might also like