1 03 - CSS Introduction
description
Transcript of 1 03 - CSS Introduction
![Page 1: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/1.jpg)
CSS Introduction
Colin Gourlay & Kevin Vanderbeken
![Page 2: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/2.jpg)
CSS=
(the presentation layer)
![Page 3: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/3.jpg)
Today:
What is CSS?
Where can CSS be used?
CSS Syntax - selectors, properties & values
Selecting HTML elements
Inheritance & the cascade
![Page 4: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/4.jpg)
what is CSS?
![Page 5: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/5.jpg)
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.
![Page 6: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/6.jpg)
why do we use CSS?
![Page 7: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/7.jpg)
less work
better type & layout controls
smaller documentsand faster downloads
![Page 8: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/8.jpg)
less work
better type & layout controls
smaller documentsand faster downloads
more accessible sites
![Page 9: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/9.jpg)
less work
better type & layout controls
smaller documentsand faster downloads
reliable browser support
more accessible sites
![Page 10: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/10.jpg)
less work
smaller documentsand faster downloads
reliable browser support
more accessible sites
![Page 11: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/11.jpg)
smaller documentsand faster downloads
reliable browser support
more accessible sites
![Page 13: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/13.jpg)
where can you use CSS?
![Page 14: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/14.jpg)
embedded style sheets
inline styles
external style sheets
![Page 15: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/15.jpg)
<html> <head> <title>Document Title</title> </head> <body> <h1 style="color: red;"> Introduction </h1> </body></html>
![Page 16: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/16.jpg)
embedded style sheets
inline styles
external style sheets
![Page 17: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/17.jpg)
<html> <head> <title>Document Title</title> <style type="text/css"> h1 { color: red; } </style> </head> <body> <h1>Introduction</h1> </body></html>
![Page 18: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/18.jpg)
embedded style sheets
inline styles
external style sheets
![Page 19: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/19.jpg)
<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
![Page 20: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/20.jpg)
CSS syntax
![Page 21: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/21.jpg)
selectors, properties & values
![Page 22: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/22.jpg)
selector { property: value; } selector { property1: value1; property2: value2; property3: value3;}
![Page 23: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/23.jpg)
h1 { color: orange; } p { color: #000000; font-size: 12px; font-family: Arial;}
![Page 24: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/24.jpg)
h1 {}
<h1>Introduction</h1>
![Page 25: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/25.jpg)
#article {}
<p id="article">...text...</p>
![Page 26: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/26.jpg)
.tab {}
<li class="tab">...text...</li>
![Page 27: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/27.jpg)
inheritance & the cascade(a.k.a. the BIG concepts)
![Page 28: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/28.jpg)
inheritance
![Page 29: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/29.jpg)
p.bold { font-weight: bold;}
<p class="bold"> <a href="http://www.google.com"> Google </a> is an excellent search engine.</p>
CSS
HTML
![Page 30: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/30.jpg)
document structure
![Page 31: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/31.jpg)
all elements contained within another element are its descendants
title, style and head are descendants of html
![Page 32: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/32.jpg)
a direct descendant is called a child element
body is a child of html
![Page 33: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/33.jpg)
a containing element is called the parent element
html is the parent of body
![Page 34: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/34.jpg)
the trail of parents leading back to the root are an element’s ancestors
p, body and html are ancestors of img
![Page 35: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/35.jpg)
all elements with the same parent are siblings
h1, p, p, h2, etc are siblings
![Page 36: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/36.jpg)
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.
![Page 37: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/37.jpg)
the cascade
![Page 38: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/38.jpg)
the closer the style sheet is to the content, the more
weight it is given
![Page 39: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/39.jpg)
rules can still conflict...
...but the cascade still applies
![Page 40: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/40.jpg)
<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
![Page 41: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/41.jpg)
![Page 43: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/43.jpg)
how’s our speed?
![Page 45: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/45.jpg)
next week...
![Page 46: 1 03 - CSS Introduction](https://reader030.fdocuments.net/reader030/viewer/2022020718/54bb642e4a79599d1c8b45ac/html5/thumbnails/46.jpg)
file:///C:/Users/Colin.Gourlay/Downloads/BackToTheFutureLogo.jpg