Making Things Look Nice Visual Appearance and CSS

Outline • Separation of content and appearance

Step 1: separate content from appearance

Separation of content and appearance • HTML originally had little support for control over

CSS is for styles • Cascading Style Sheets • Specify how the content should

CSS syntax Note there are two declarations here!

CSS selectors • Any type of tag can be styled – E. g. ,

CSS classes and ids • You can group several style attributes together – This

Where does CSS go in a web page? • External style sheet <head> </head>

NOTE • This is not all you need to know about CSS! • Do

What does CSS control? • • Colour Text Fonts Images Links Lists Tables And

Slides: 18

Download presentation

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: <font> and <color> 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 <head> section of the page

CSS syntax

CSS syntax Note there are two declarations here!

CSS selectors • Any type of tag can be styled – E. g. , h 1 tags: h 1 {color: blue; font-size: 12 px; } • 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 – <h 1 class=“my. Style">This heading will be styled according to the definitions of class my. Style</h 1> • ids are similar to classes, but for a single item – <h 1 id=“one. Time. Style”>A heading that needs to be different from the standard, just once</h 1>

Where does CSS go in a web page? • External style sheet <head> </head> <link rel="stylesheet" type="text/css" href="mystyle. css" /> • Internal style sheet <head> </head> <style type="text/css"> hr {color: sienna; } p {margin-left: 20 px; } </style> • Inline styles <p style="color: sienna; margin-left: 20 px">This is a paragraph. </p>

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

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