INFT132 093 05 Cascading Style Sheets
Download as PPTX, PDF0 likes445 views
This document discusses cascading style sheets (CSS) which define how HTML elements are displayed. CSS separates presentation from semantics, improves page load times, and allows consistent styling across devices. There are three types of CSS style sheets - external, embedded, and inline. CSS follows a cascading order of precedence and uses selectors and declarations to apply styles. CSS is a W3C standard for controlling layout, fonts, colors and more.
INFT132 093 05 Cascading Style Sheets
- 1. INFT11/71-132 Web Applications Cascading Style Sheets Dr Michael Rees School of Information Technology mrees@bond.edu.au
- 2. 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
- 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 3
- 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 4
- 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 © 2009 Michael Rees Web Applications 5
- 6. 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
- 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 © 2009 Michael Rees Web Applications 7
- 8. 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/ © 2009 Michael Rees Web Applications 8
- 9. 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 © 2009 Michael Rees Web Applications 9
- 10. CSS Selectors • Single element type: • Multiple element types: • All element types: • Specific elements by id: © 2009 Michael Rees Web Applications 10
- 11. Class Selector • Elements belonging to a style class: – Referencing a style class in HTML: • Elements of a certain type and class: © 2009 Michael Rees Web Applications 11
- 12. 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
- 13. 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 © 2009 Michael Rees Web Applications 13
- 14. 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
- 15. Resources • Read Chapter 3 of textbook © 2009 Michael Rees Web Applications 15