CSS-Web Apps

INFT11/71-132
Web Applications

Cascading Style Sheets
Dr Michael Rees
School of Information Technology

mrees@bond.edu.au

Semantics and Presentation

• HTML markup represents:
– Semantics: <h1> means that an element is a top-
level heading
– Presentation: <h1> elements look a certain way

• Separate semantics from presentation:
– Easier to present on multiple platforms (browser,
cell phone, spoken, …)
– Easier to generate documents with consistent look
– Semantic and presentation defined independently
(division of labor)
– User control of presentation is facilitated
© 2009 Michael Rees Web Applications 2


• Styles sheets define how HTML elements are to be
displayed

• Styles are normally saved in external style sheets
(.css files)

• External style sheets enable you to change the
appearance and layout of all the pages in your site,
just by editing one single CSS document!


CSS - Introduction

• Cascading style sheets improve page load time for
your site as there is less data to transfer

• Normally, a browser has to download all of your
formatting code in each and every one of your pages
on your site

• With CSS, the style sheet is downloaded once and
cached, and every page request-response cycle after
the first page is shorter



• CSS is a vendor-neutral standard defined by the W3C
(World Wide Web Consortium)

• CSS added to HTML 4.0

• CSS is an extension to HTML to give web site
developers fine control over page content display

• CSS offers much more control over content than
HTML tags alone

• CSS is supported by all major browsers

• CSS uses common (electronic) publishing terminology

CSS Style Sheet Types
• External (Linked) style sheet:
– Style rules stored in separate .css file
– A single .css file can be linked to any number of pages
– A single page can link to many external style sheets
• Embedded (Internal) style sheet:
– Stored in the <head> tag of the page
– Enclosed in <style> … </style> tags
– Affects only that page
– Overrides external style sheet
• Inline style:
– Specified in style attribute in individual HTML tags
– Applies only to that tag
– Overrides external and embedded style sheets
• All 3 types of style sheets can be cascaded (mixed) in a single page


Cascading Order
• What style will be used when there is more than one
style specified for an HTML tag?
• All the styles will ‘cascade’ into a new ‘virtual’ style
sheet in the following priority order:
1. Inline style (inside an HTML tag)
2. Embedded style sheet (inside the <head> tag)
3. External style sheet(s); last sheet linked in page
takes precedence
4. Browser default style sheet


CSS Notation

• CSS uses simple declarative syntax to specify a
collection of style rules to control the layout and
typography a page

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


Style Rule Syntax
• A CSS style rule is made up
of two parts:
Example rule:
– Selector: the part of H1 { color: red }
HTML in the page that
CSS style modifies
– Declaration: style setting Selector
applied to selector, again Declaration
in two parts:
• property name H1 { color: red }

• property value
Name Value


CSS Selectors
• Single element type:

• Multiple element types:

• All element types:

• Specific elements by id:


Class Selector
• Elements belonging to a style class:

– Referencing a style class in HTML:

• Elements of a certain type and class:


Link Pseudo-Classes

• a:link {color:#FF0000} /* unvisited link */

• a:visited {color:#00FF00} /* visited link */

• a:hover {color:#FF00FF} /* mouse over link */

• a:active {color:#0000FF} /* selected link */


CSS Colour

• CSS measures colour in two ways, either by a colour
name (like ‘blue’) or by numerical RGB specification:
#99CCFF - hexadecimal for sky blue

• http://www.w3schools.com/css/css_colors.asp



• For inspiration, an essential visit:
– CSS Zen Garden

• Validate your CSS code with:
– The W3C CSS Validation Service

• Learn the basics of CSS with:
– W3Schools, CSS Tutorial


Resources

• Read Chapter 3 of textbook


CSS-Web Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS-Web Apps

Similar to CSS-Web Apps (20)

More from Michael Rees

More from Michael Rees (20)

Recently uploaded

Recently uploaded (20)

CSS-Web Apps