1. Making Things Look Nice: Visual Appearance and CSS CMPT 281

2. Outline Separation of content and appearance

3. How do we get from this…

4. …to this?

5. …or this?

9. Step 1: separate content from appearance

10. Separation of content and appearance HTML originally had little support for control over a page’s appearance – then came HTML 3.2: and attributes BUT: – HTML markup is meant to specify content How to control appearance? Styles – Introduced in HTML 4.0

11. CSS is for styles Cascading Style Sheets Specify how the content should look Stored away from the content – External: a separate file – Internal: the section of the page

12. CSS syntax

13. Note there are two declarations here!

14. CSS selectors Any type of tag can be styled – E.g., h1 tags: h1 {color: blue; font-size:12px;} What if multiple tags should be similar? – e.g., all fonts on the page should be Helvetica – Use class selector What if one item needs special treatment? – Use id selector

15. CSS classes and ids You can group several style attributes together – This is a class You can label HTML elements as that class – This heading will be styled according to the definitions of class myStyle ids are similar to classes, but for a single item – A heading that needs to be different from the standard, just once

16. Where does CSS go in a web page? External style sheet Internal style sheet hr {color:sienna;} p {margin-left:20px;} Inline styles This is a paragraph.

17. NOTE This is not all you need to know about CSS! Do the tutorial on w3schools! – http://www.w3schools.com/css/ – (‘Basic’ and ‘Styling’ modules only) Go to labs!

18. What does CSS control? Colour Text Fonts Images Links Lists Tables And much more…