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
![Page 1: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/1.jpg)
Making Things Look Nice:Visual Appearance and CSS
CMPT 281
![Page 2: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/2.jpg)
Outline
• Separation of content and appearance
![Page 3: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/3.jpg)
How do we get from this…
![Page 4: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/4.jpg)
…to this?
![Page 5: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/5.jpg)
…or this?
![Page 6: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/6.jpg)
…or this?
![Page 7: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/7.jpg)
…or this?
![Page 8: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/8.jpg)
…or this?
![Page 9: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/9.jpg)
Step 1:separate content from appearance
![Page 10: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/10.jpg)
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
![Page 11: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/11.jpg)
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
![Page 12: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/12.jpg)
CSS syntax
![Page 13: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/13.jpg)
CSS syntax
Note there are two declarations here!
![Page 14: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/14.jpg)
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
![Page 15: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/15.jpg)
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>
![Page 16: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/16.jpg)
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>
![Page 17: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/17.jpg)
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!
![Page 18: Making Things L ook N ice: Visual Appearance and CSS](https://reader035.vdocuments.site/reader035/viewer/2022062410/56816254550346895dd29fa3/html5/thumbnails/18.jpg)
What does CSS control?
• Colour• Text• Fonts• Images• Links• Lists• Tables• And much more…