an introduction to cascading style sheets (css)
DESCRIPTION
An Introduction to Cascading Style Sheets (CSS). Paul Chisholm Special Assignment Teacher – Computers Upper Canada District School Board [email protected]. Web Site. You can view all of the materials discussed in today’s workshop session at the following URL: - PowerPoint PPT PresentationTRANSCRIPT
An Introduction to Cascading Style Sheets (CSS)
Paul ChisholmSpecial Assignment Teacher –
ComputersUpper Canada District School Board
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 colon2. 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 selectorcan be grouped into a semicolonseparated 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: link { text-decoration: underline }A: visited { text-decoration: none }A: link, A: visited {text-decoration:
none }A: 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