1 / 18

Making Things L ook N ice: Visual Appearance and CSS

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.

mandar
Download Presentation

Making Things L ook N ice: Visual Appearance and CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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. …or this?

  7. …or this?

  8. …or this?

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

  12. CSS syntax

  13. CSS syntax 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 • <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>

  16. 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>

  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…

More Related