web design and databases wd: class 5: html and css part 2gabbay/f27wd/lectures/wdclass5.pdfweb...
TRANSCRIPT
![Page 1: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/1.jpg)
Web Design and Databases WD: Class 5: HTML and CSS Part 2
Dr Helen Hastie Dept of Computer Science Heriot-Watt University
Some contributions from Head First HTML with CSS and XHTML, O’Reilly
![Page 2: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/2.jpg)
Hmm… I need some style
![Page 3: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/3.jpg)
Homework- bad design
![Page 4: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/4.jpg)
![Page 5: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/5.jpg)
![Page 6: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/6.jpg)
![Page 7: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/7.jpg)
![Page 8: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/8.jpg)
Managing the Presentation: Stylesheets
! HTML markup should be about the structure of a document, not how it should be displayed.
! Should ideally keep control of presentation separate:
My heading My heading <h1> My ..
Content Structure Presentation
![Page 9: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/9.jpg)
Managing the Presentation: Stylesheets
! Browsers have default styles (e.g. white background). To change this, use stylesheets
! CSS stands for Cascading StyleSheets
My heading
Presentation
![Page 10: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/10.jpg)
We’ll be looking at CSS3 which is backwards compatible with CSS2
![Page 11: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/11.jpg)
interior{ color: cream;
material: leather; }
Image from mini.co.uk
exterior { color: pale_blue;
}
![Page 12: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/12.jpg)
![Page 13: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/13.jpg)
CSS syntax
! CSS is based on simple rules: selector {property: value;} E.g. p {color:green;}
! Selector is (usually) name of the HTML element ! e.g. h1, body, li
! Property is something like font or color or alignment.
! Value is value you want that property to have, e.g. times,green
![Page 14: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/14.jpg)
p {
color:green;
}
Selector Property Value
![Page 15: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/15.jpg)
More than one property
p {!
color:green,font-family: times;!
}!
Selector Property Value
Property Value
![Page 16: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/16.jpg)
More than one selector
P, h1, h2 {!
color:green,font-family: times;!
}!
Selectors Property Value
Property Value
![Page 17: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/17.jpg)
Let’s work through an example: sweet shop website
![Page 18: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/18.jpg)
……… <!--Link to CSS file in stylesheets directory--> <link rel="stylesheet" type="text/css" href="stylesheets/sweets.css" /> </head>
<body> <h1>SweetStuff Products: Our Lolly Collection</h1>
<h2>Luscious Lime</h2> <p class="lime"> <img src="images/lime_lolly.png" alt="Lime Lolly" /> Bursting with <em>zing</em>. Our lime lolly is one of our best sellers. </p>
<h2>Strawberry Splurge</h2> <p class="strawberry"> <img src="images/strawberry_lolly.png" alt="Strawberry Lolly" /> A classic lolly bringing memories of strawberries and cream in the summer. </p>
<h2>OMG Orange</h2> <p class="orange"> <img src="images/orange_lolly.png" alt="Orange Lolly" /> Super refreshing OMG Orange is an all round favourite. </p>
<h2>Fruit Swirl</h2> <p class="swirl"> <img src="images/swirl_lolly.png" alt="Fruit Swirl" /> Mixing it up with this sumptuous swirl of a lolly. </p> </body> </html>
![Page 19: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/19.jpg)
sweets.css
<!DOCTYPE HTML> <html> <head> <title>SweetStuff Products</title> <!--Link to CSS file in stylesheets directory--> <link rel="stylesheet" type="text/css" href="stylesheets/sweets.css" /> </head>
![Page 20: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/20.jpg)
……… <!--Link to CSS file in stylesheets directory--> <link rel="stylesheet" type="text/css" href="stylesheets/sweets.css" /> </head>
<body> <h1>SweetStuff Products: Our Lolly Collection</h1>
<h2>Luscious Lime</h2> <p class="lime"> <img src="images/lime_lolly.png" alt="Lime Lolly" /> Bursting with <em>zing</em>. Our lime lolly is one of our best sellers. </p>
<h2>Strawberry Splurge</h2> <p class="strawberry"> <img src="images/strawberry_lolly.png" alt="Strawberry Lolly" /> A classic lolly bringing memories of strawberries and cream in the summer. </p>
<h2>OMG Orange</h2> <p class="orange"> <img src="images/orange_lolly.png" alt="Orange Lolly" /> Super refreshing OMG Orange is an all round favourite. </p>
<h2>Fruit Swirl</h2> <p class="swirl"> <img src="images/swirl_lolly.png" alt="Fruit Swirl" /> Mixing it up with this sumptuous swirl of a lolly. </p> </body> </html>
![Page 21: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/21.jpg)
Adding italics and links
![Page 22: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/22.jpg)
……… <!--Link to CSS file in stylesheets directory--> <link rel="stylesheet" type="text/css" href="stylesheets/sweets.css" /> </head>
<body> <h1>SweetStuff Products: Our Lolly Collection</h1>
<h2>Luscious Lime</h2> <p class="lime"> <img src="images/lime_lolly.png" alt="Lime Lolly" /> Bursting with <em>zing</em>. Our lime lolly is one of our best sellers. </p>
<h2>Strawberry Splurge</h2> <p class="strawberry"> <img src="images/strawberry_lolly.png" alt="Strawberry Lolly" /> A classic lolly bringing memories of strawberries and cream in the summer. </p>
<h2>OMG Orange</h2> <p class="orange"> <img src="images/orange_lolly.png" alt="Orange Lolly" /> Super refreshing OMG Orange is an all round favourite. </p>
<h2>Fruit Swirl</h2> <p class="swirl"> <img src="images/swirl_lolly.png" alt="Fruit Swirl" /> Mixing it up with this sumptuous swirl of a lolly. </p> </body> </html>
![Page 23: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/23.jpg)
So how do we decide what these look like?
![Page 24: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/24.jpg)
Inheritance
! Elements inside <p> inherit the properties of the <p>. For example:
html
body
h1 p p h2 p
img a em img img
p
<p> <img src="images/lime_lolly.png" alt="Lime Lolly" /> Bursting with <em>zing</em>. Our lime lolly is one of our best sellers </p>
img
![Page 25: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/25.jpg)
Inheritance
! Elements inside <p> inherit the properties of the <p>. For example:
html
body
h1 p p h2 p
img a em img img
p
<p> <img src="images/lime_lolly.png" alt="Lime Lolly" /> Bursting with <em>zing</em>. Our lime lolly is one of our best sellers </p>
img
![Page 26: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/26.jpg)
What if we want the same font throughout?
![Page 27: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/27.jpg)
html
body
h1 p p h2 p
img a em img img
p
img
Move the font up the tree
![Page 28: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/28.jpg)
Move the font up the tree
![Page 29: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/29.jpg)
Over-riding Inheritance
html
body
h1 p p h2 p
img a em img img
p
img
![Page 30: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/30.jpg)
What if we want it to be different?
![Page 31: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/31.jpg)
Override the em font inheritance
![Page 32: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/32.jpg)
What if we have similar types of content we want to look the same?
![Page 33: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/33.jpg)
Adding a Class
<p class="lime">
<img src="images/lime_lolly.png" alt="Lime Lolly" />
Bursting with <em>zing</em>. Our lime lolly is one of our best sellers.
</p>
![Page 34: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/34.jpg)
Adding a class
![Page 35: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/35.jpg)
Adding more classes
![Page 36: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/36.jpg)
Elements can be in more than one class
HTML <p class="lime specials">
CSS
![Page 37: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/37.jpg)
Elements can be in more than one class
What if all have the same property (e.g. color)? Which rule wins?
HTML
<p class="lime strawberry orange swirl”> CSS
![Page 38: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/38.jpg)
Selector rules
! Is there is a CSS rule with that selector? ! If not, is there a parent element with a
selector? ! If not, then use the default
![Page 39: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/39.jpg)
Selector rules
! But what about our example? What rule breaks the tie? <p class=“lime strawberry orange swirl”>
! Doesn’t matter what order it comes in in the HTML <p class=“strawberry orange swirl lime”>
! It matters about specificity in the CSS file…….
![Page 40: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/40.jpg)
How to apply classes
This rule selects any <p>
This rule selects all members of lime class so a bit more specific
This rule selects <p> of lime class so a bit more specific again
These rules selects <p> of various class so
about the same specificity as above
rule
![Page 41: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/41.jpg)
If there still isn’t a winner?
It’s the last rule in the CSS that wins and is
applied
![Page 42: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/42.jpg)
body
li
p
p.big
em ul
li.big
li
Add elements to the tree an colour in those affected by .big rule
CSS
em
![Page 43: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/43.jpg)
body
p.big ul
em li.big li
p
li
CSS em
Add elements to the tree an colour in those affected by .big rule
![Page 44: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/44.jpg)
body
p.big ul
em li.big li
p
li
HTML: colour in .big
CSS em
p.big and li.big *.big " .big
![Page 45: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/45.jpg)
What’s wrong with this .css
<body>
body { background-color:white
h1, { gray; font-family:sans-serif; } h2,p { color: }
<em> { font-style:italic; }
<body>
No HTML in your .css
No HTML in your CSS.
HTML tag instead of
element name.
Missing property value and semicolon
Missing property
name
Extra comma
Missing semicolon
and }
Head First HTML with CSS and XHTML, O’Reilly
![Page 46: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/46.jpg)
Tables <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>
<table> <caption>Caption: A table with not very much in it </caption> <tr><th>heading1</th> <th>heading2</th></tr> <tr><td>row1 col1 data</td><td>row1 col2 data</td></tr> <tr><td>row2 col1 data</td><td>row2 col2 data</td></tr> <tr><td>row3 col1 data</td><td>row3 col2 data</td></tr> </table>
</body> </html>
Also width, height, text-
align, padding
![Page 47: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/47.jpg)
Validation
! Guess what: you can validate your CSS files too.
! http://jigsaw.w3.org/css-validator/
![Page 48: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/48.jpg)
Comments in CSS
/*Set the font for all the descendents of body*/ body { font-family: sans-serif; }
![Page 49: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/49.jpg)
Let’s take a break
![Page 50: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/50.jpg)
Crossword
v a l i d a t o r t t r i b u t e s
e l e m e n t s
l o w e r c a s e
x m
c a r
e x t e n s i b l e
c l o s i n g
1 2
3
4
6 5
7
8
Across 1. Used to double check your HTML 6. XHTML is this type of mark-up 7. img is one of the HTML _____ 8. We invented an XML language for these
Down 2. These have a name and a value 3. The X in XHTML is for ___ 4. It’s good practice to have ____ tags 5. In elements are _______ (4,4)
Modified from Head First HTML with CSS and XHTML, O’Reilly
e
l
![Page 51: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/51.jpg)
A bit about colours ! http://www.w3schools.com/cssref/css_colornames.asp ! 147 colour names which are supported by browsers ! The 17 standard colours are: aqua, black, blue, fuchsia, gray, grey,
green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
![Page 52: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/52.jpg)
Hex Codes
! 16 million different colours using the Hex code http://www.colorpicker.com
! http://www.w3schools.com/html/html_colors.asp
#CC6633
Always start with
# red green blue
![Page 53: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/53.jpg)
Hex Codes Explained
Head First HTML with CSS and XHTML, O’Reilly
![Page 54: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/54.jpg)
Hex Codes Explained
Head First HTML with CSS and XHTML, O’Reilly
![Page 55: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/55.jpg)
Hex Codes Explained
Head First HTML with CSS and XHTML, O’Reilly Head First HTML with CSS and XHTML, O’Reilly
![Page 56: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/56.jpg)
Hex Codes Explained
Head First HTML with CSS and XHTML, O’Reilly
![Page 57: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/57.jpg)
Hex codes continued
Head First HTML with CSS and XHTML, O’Reilly
! Each character is between 0-15
![Page 58: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/58.jpg)
! FFFFFF is white
! 000000 is black
0% 100%
0 255/255
![Page 59: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/59.jpg)
red green blue
#CC6600
Head First HTML with CSS and XHTML, O’Reilly
![Page 60: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/60.jpg)
Hex Continued (204/255)*100=80%
Head First HTML with CSS and XHTML, O’Reilly
(102/255)*100=40%
![Page 61: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/61.jpg)
Hex code: you try
! CC3399 ! RED: CC= 204/255 = 80% ! GREEN: 33 = (3 + (3*16))/255=51/255= 20% ! BLUE: 99 = (9 + (9*16))/255= 153/255 =60%
![Page 62: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/62.jpg)
Other ways you’ll see colours
! a HEX value - like "#ff0000" ! an RGB value - like "rgb(255,0,0)" ! a color name - like "red"
![Page 63: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/63.jpg)
Summary ! HTML elements gives structure ! CSS adds style ! Rules can apply to one or more selectors
which specify which HTML element to apply rule
! HTML elements can be members of one or more class
! HTML elements can inherit properties ! How CSS rules are applied is based on
specificity and which rules are last in the CSS file
! 3 ways to specify colours
p, h2 { color:green,font-family: times; }
<p class=“lime strawberry orange swirl”>
![Page 64: Web Design and Databases WD: Class 5: HTML and CSS Part 2gabbay/F27WD/lectures/WDClass5.pdfWeb Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer](https://reader033.vdocuments.us/reader033/viewer/2022060306/5f09976f7e708231d42790fa/html5/thumbnails/64.jpg)
Today’s Labs ! Part 1: Your home page in HTML ! Part 2: CSS exercise ! Part 3: Adding style to your homepage
! Next time- Accessibility