Embed Size (px)
DESCRIPTION
Cascading Style Sheets
Citation preview
Dr Michael Rees
School of Information Technology
INFT11/71-132
Web Applications
Cascading Style Sheets
Web Applications
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 2
© 2009 Michael Rees Web Applications 3
Cascading Style Sheets
• 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!
© 2009 Michael Rees Web Applications 4
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
© 2009 Michael Rees Web Applications 5
Cascading Style Sheets
• 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
© 2009 Michael Rees Web Applications 6
© 2009 Michael Rees Web Applications 7
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
© 2009 Michael Rees Web Applications 8
http://www.w3schools.com/css/
Style Rule Syntax
• A CSS style rule is made up of two parts:– Selector: the part of
HTML in the page that CSS style modifies
– Declaration: style setting applied to selector, again in two parts:• property name• property value
© 2009 Michael Rees Web Applications 9
H1 { color: red }
SelectorDeclaration
Name Value
Example rule:H1 { color: red }
Web Applications
CSS Selectors
• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:
© 2009 Michael Rees 10
Web Applications
Class Selector
• Elements belonging to a style class:
– Referencing a style class in HTML:
• Elements of a certain type and class:
© 2009 Michael Rees 11
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 */
© 2009 Michael Rees Web Applications 12
CSS Colour
© 2009 Michael Rees Web Applications 13
• 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
Cascading Style Sheets
• 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
© 2009 Michael Rees Web Applications 14
Resources
• Read Chapter 3 of textbook
© 2009 Michael Rees Web Applications 15
