Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Making Things Look Nice: Visual Appearance and CSS CMPT 281."— Presentation transcript:

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?

6

7

8

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…


Download ppt "Making Things Look Nice: Visual Appearance and CSS CMPT 281."

Similar presentations


Ads by Google