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?
better type & layout controls
less work
smaller documents
and faster downloads
better type & layout controls
less work
smaller documents
and faster downloads
more accessible sites
better type & layout controls
less work
smaller documents
and faster downloads
more accessible sites
reliable browser support
less work
smaller documents
and faster downloads
more accessible sites
reliable browser support
smaller documents
and faster downloads
more accessible sites
reliable browser support
a great example...
http://www.csszengarden.com
where can you use CSS?
inline styles
embedded style sheets
external style sheets
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1 style="color: red;">
Introduction
</h1>
</body>
</html>
inline styles
embedded style sheets
external style sheets
<html>
<head>
<title>Document Title</title>
<style type="text/css">
h1 { color: red; }
</style>
</head>
<body>
<h1>Introduction</h1>
</body>
</html>
inline styles
embedded style sheets
external style sheets
<html>
<head>
<title>Document Title</title>
<link rel="stylesheet"
href="stylesheet.css"
type="text/css" />
</head>
<body>
<h1>Introduction</h1>
</body>
stylesheet.css
</html>
h1 {
color: red;
}
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
HTML
<p class="bold">
<a href="http://www.google.com">
Google
</a>
is an excellent search engine.
</p>
CSS
p.bold {
font-weight: bold;
}
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
HTML
<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>
CSS
.myHappyShoes { color: yellow; }
.myHappyShoes { color: green; }
li.myHappyShoes { color: orange; }
#happyShoe { color: red; }
li#happyShoe { color: violet; }
li#happyShoe a { color: blue; }
about CSS & web standards
http://www.w3.org/Style/CSS
how’s our speed?
email us...
[email protected]
[email protected]
next week...
file:///C:/Users/C
olin.Gourlay/Down
loads/BackToTheF
utureLogo.jpg
