1 / 30

An Introduction to Cascading Style Sheets (CSS)

An Introduction to Cascading Style Sheets (CSS). Paul Chisholm Special Assignment Teacher – Computers Upper Canada District School Board paul.chisholm@ucdsb.on.ca. Web Site. You can view all of the materials discussed in today’s workshop session at the following URL:

parry
Download Presentation

An Introduction to Cascading Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. An Introduction to Cascading Style Sheets (CSS) Paul Chisholm Special Assignment Teacher – Computers Upper Canada District School Board paul.chisholm@ucdsb.on.ca

  2. Web Site • You can view all of the materials discussed in today’s workshop session at the following URL: http://www.paul-chisholm.com/obea

  3. What Are Cascading Style Sheets? • Cascading Style Sheets allow for the separation of a web page’s structure and content. • CSS removes the visual instructions out of HTML and places them in a separate cacheable document. • A style sheet is a stylistic guideline that specifies how an HTML document is to be displayed within a web browser.

  4. What Are Cascading Style Sheets (Continued) • Setting colours and backgrounds, fonts, and white space are among the most common tasks of CSS. • CSS is a specification under W3C. (http://www.w3.org)

  5. WWW - CSS History • The world wide web (WWW) was created in 1990 by Tim Berners-Lee • CSS was introduced in 1996 by Hakon Wium Lie & Bert Bos.

  6. The Beauty in CSS Design • Visit the following URL to see an example of CSS in action: http://www.csszengarden.com

  7. HTML – HyperText Markup Language • HTML is a series of elements that define the structure of a web page document. • An HTML element (such as TITLE, BODY, etc.) normally has three parts: 1. Start Tag, 2. Content, 3. End Tag • All HTML Tags start with a “<“ and end with a “>”.<TITLE>Paul’s Web Page</TITLE>

  8. HTML Continued • HTML Elements can be categorized into three (3) groups:- Block Level (<P> and <H1>)- Inline (<STRONG>)- Invisible (<TITLE>) • Block Level elements will have a blank line before and after them.

  9. HTML Continued • Inline elements will not have a blank line before and after their introduction. • Invisible elements will have no visible effect within the web browser window. (i.e. The <TITLE> element will only appear in the browser’s title bar.

  10. Empty HTML Elements • Empty HTML elements will appear by themselves without an end tag. (<HR> and <BR> are examples of empty elements.

  11. HTML Tag Diagram

  12. HTML Tree Structure

  13. Parent Child Relationship • There is a parent child relationship that exists between HTML elements. Parents can also be children of other elements. • There are some restrictions as to which elements can be children of which elements. (A <P> element cannot be a child element of another <P>. You cannot have a paragraph within a paragraph.

  14. Creation Tools • Cascading Style Sheets can be created with a simple text editor or a dedicated tool such as TopStyle Lite Version 3.10 • A style sheet is a set of one or more rules that apply to an HTML document i.e. H1 { color: green }This rule sets the colour of all first level headings.

  15. CSS Rules • A CSS Rule consists of two parts:1. Selector – (The part before the left curly brace).2. Declaration – (The part within the curly braces).

  16. CSS Rules (Continued)

  17. CSS Rules (Continued) • A declaration has two (2) parts separated by a colon.1. Property: The part before the colon2. Value: The part after the colon

  18. CSS Rules (Continued)

  19. Comma Separated List H1 {font-style: italic} H2 {font-style: italic} H3 {font-style: italic} Because all declarations are the same, the rules can be grouped into a comma – Separated list. H1, H2, H3 {font-style: italic }

  20. Semicolon Separated List • A selector may have more than one declaration: H1 {color: green } H1 {text-align: center } Declarations relating to the same selector can be grouped into a semicolon separated list: H1 { color: green; text-align: center;}

  21. Assigning CSS to an HTML Document • You can include a CSS inside a web page document using the following syntax: <style type = “text/css”> h1, h2, p, li {font-style: italic } </style>

  22. Assigning CSS to an HTML Document • A CSS can also be referenced outside of the web document. <head> <link href="my_style_sheet.css" rel="stylesheet"> <title>Introduction to Cascading Style Sheets</title> </head>

  23. Assigning A Default CSS to Internet Explorer • Click on "Tools" • Click on "Internet Options" from the drop down menu • Click on the "Accessibility..." button • Click on the checkbox beside "Format documents using my style sheet" • Click on the "Browse" button and navigate to the .css file that you wish to use • Click on the "Ok" button • Click on the "Ok" button

  24. Inheritance • HTML elements inherit traits (stylistic properties) from their parents. <style type = “text/css”> h1, h2, p, li {font-style: italic } </style> Can be represented as this: <style type = “text/css”> body {font-style: italic } </style>

  25. Inheritance (Continued) • Inherit from ancestor. The BODY element is a common ancestor for all visible elements. Inheritance distributes properties to an elements descendents. • Overriding inheritance – The more specific rule will prevail over the more general rule. i.e. BODY versus H1

  26. CSS URL Link Examples A: link { text-decoration: underline } A: visited { text-decoration: none } A: link, A: visited {text-decoration: none } A: hover {background: black }

  27. CSS Margin Example BODY { margin-left: 15%; margin-right: 10%; }

  28. CSS Tutorial Site • Visit the following URL for a tutorial on using CSS: http://www.w3schools.com/css

  29. TopStyle Lite • TopStyle Lite is a free CSS editor that can be downloaded from the following URL: http://www.computeractive.co.uk/vnunet/downloads/2128545/topstyle-lite

  30. Reference Books • Cascading Style Sheets – Designing For The Web – Third Edition – Hakon Wium Lie & Bert Bos

More Related