Making Things Look Nice: Visual Appearance and CSS CMPT 281

Outline Separation of content and appearance

How do we get from this…

…to this?

…or this?

Step 1: separate content from appearance

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

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

CSS syntax

Note there are two declarations here!

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

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

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.

NOTE This is not all you need to know about CSS! Do the tutorial on w3schools! – – (‘Basic’ and ‘Styling’ modules only) Go to labs!

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