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
better type & layout controls
smaller documentsand faster downloads
more accessible sites
less work
better type & layout controls
smaller documentsand faster downloads
reliable browser support
more accessible sites
less work
smaller documentsand faster downloads
reliable browser support
more accessible sites
smaller documentsand faster downloads
reliable browser support
more accessible sites
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>
embedded style sheets
inline styles
external style sheets
<html> <head> <title>Document Title</title> <style type="text/css"> h1 { color: red; } </style> </head> <body> <h1>Introduction</h1> </body></html>
embedded style sheets
inline styles
external style sheets
<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
how’s our speed?
next week...
file:///C:/Users/Colin.Gourlay/Downloads/BackToTheFutureLogo.jpg