1 03 - CSS Introduction

CSS Introduction

Colin Gourlay & Kevin Vanderbeken

CSS=

(the presentation layer)

Today:

What is CSS?

Where can CSS be used?

CSS Syntax - selectors, properties & values

Selecting HTML elements

Inheritance & the cascade

what is CSS?

CSS = Cascaded Style Sheets

• A way to customise the presentation of your HTML.

• A language designed to allow us select and style the elements on our page.

• Like HTML, it has gone through various changes.• Also like HTML, it is not a programming language.• It can allow us to present our content in multiple

formats for multiple devices.

why do we use CSS?

less work

better type & layout controls

smaller documentsand faster downloads

less work



more accessible sites

less work



reliable browser support


less work







a great example...

http://www.csszengarden.com

http://www.csszengarden.com/

where can you use CSS?

embedded style sheets

inline styles

external style sheets

<html> <head> <title>Document Title</title> </head> <body> <h1 style="color: red;"> Introduction </h1> </body></html>


inline styles


<html> <head> <title>Document Title</title> <style type="text/css"> h1 { color: red; } </style> </head> <body> <h1>Introduction</h1> </body></html>


inline styles


<html> <head> <title>Document Title</title> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> </head> <body> <h1>Introduction</h1> </body></html>

h1 { color: red;}

stylesheet.css

CSS syntax

selectors, properties & values

selector { property: value; } selector { property1: value1; property2: value2; property3: value3;}

h1 { color: orange; } p { color: #000000; font-size: 12px; font-family: Arial;}

h1 {}

<h1>Introduction</h1>

#article {}

<p id="article">...text...</p>

.tab {}

<li class="tab">...text...</li>

inheritance & the cascade(a.k.a. the BIG concepts)

inheritance

p.bold { font-weight: bold;}

<p class="bold"> <a href="http://www.google.com"> Google </a> is an excellent search engine.</p>

CSS

HTML

document structure

all elements contained within another element are its descendants

title, style and head are descendants of html

a direct descendant is called a child element

body is a child of html

a containing element is called the parent element

html is the parent of body

the trail of parents leading back to the root are an element’s ancestors

p, body and html are ancestors of img

all elements with the same parent are siblings

h1, p, p, h2, etc are siblings

If we wanted all text elements to be shown in verdana font, we apply one rule to the

<body>

body { font-face: Verdana; },

Then all the decendant text elements inside the body tag get that style applied.

the cascade

the closer the style sheet is to the content, the more

weight it is given

rules can still conflict...

...but the cascade still applies

<li class="myHappyShoes"> One of many happy shoes</li><li id="happyShoe" class="myHappyShoes"> A <a href="http://shoe.com/">happy shoe</a></li><p class="myHappyShoes">Happy shoes paragraph</p>

.myHappyShoes { color: yellow; }

.myHappyShoes { color: green; }li.myHappyShoes { color: orange; }#happyShoe { color: red; }li#happyShoe { color: violet; }li#happyShoe a { color: blue; }

CSS

HTML

about CSS & web standards

http://www.w3.org/Style/CSS

http://www.w3.org/Style/CSS

how’s our speed?

email us...

[email protected]

[email protected]

next week...

file:///C:/Users/Colin.Gourlay/Downloads/BackToTheFutureLogo.jpg

Documents

1 03 - CSS Introduction