Docstoc

An Introduction to CSS _Cascading Style Sheets_

Document Sample
An Introduction to CSS _Cascading Style Sheets_ Powered By Docstoc
					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:
http://www.paul-chisholm.com/obea

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.

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)

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.

The Beauty in CSS Design


Visit the following URL to see an example of CSS in action: http://www.csszengarden.com

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>

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.

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.

Empty HTML Elements


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

HTML Tag Diagram

HTML Tree Structure

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.

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.

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).

CSS Rules (Continued)

CSS Rules (Continued)


A declaration has two (2) parts separated by a colon. 1. Property: The part before the colon 2. Value: The part after the colon

CSS Rules (Continued)

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 }

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; }


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>


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>

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

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>


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

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

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

CSS Tutorial Site


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

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

Reference Books


Cascading Style Sheets – Designing For The Web – Third Edition – Hakon Wium Lie & Bert Bos


				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:5
posted:11/19/2009
language:English
pages:30