making things l ook n ice: visual appearance and css
DESCRIPTION
Making Things L ook N ice: Visual Appearance and CSS. CMPT 281. Outline. Separation of content and appearance. How do we get from this…. …to this?. …or this?. …or this?. …or this?. …or this?. Step 1: separate content from appearance. Separation of content and appearance. - PowerPoint PPT PresentationTRANSCRIPT
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?
…or this?
…or 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., 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– <h1 class=“myStyle">This heading will be styled
according to the definitions of class myStyle</h1>• ids are similar to classes, but for a single item– <h1 id=“oneTimeStyle”>A heading that needs to
be different from the standard, just once</h1>
Where does CSS go in a web page?
• External style sheet<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
• Internal style sheet<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}</style></head>
• Inline styles<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
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!
What does CSS control?
• Colour• Text• Fonts• Images• Links• Lists• Tables• And much more…