1 / 11

Introduction to Dreamweaver

Louisa Lambregts , lambrel@algonquincollege.com. Introduction to Dreamweaver. Class Two. Review of Beginner CSS. HTML mark up text with tags t hese tags have default (and boring!) styles! CSS Can use tags as “html selectors” Can create CSS style rules for these html selectors.

mariel
Download Presentation

Introduction to Dreamweaver

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. Louisa Lambregts, lambrel@algonquincollege.com Introduction to Dreamweaver Class Two

  2. Review of Beginner CSS HTML • mark up text with tags • these tags have default (and boring!) styles! CSS • Can use tags as “html selectors” • Can create CSS style rules for these html selectors

  3. Review of Beginner CSS HTML Hyperlink to Facebook.com Hyperlink to <a href=“http://www.facebook.com>Facebook.com</a>Default Style: Blue Text, underline

  4. Review of Beginner CSS CSS We can redefine <a> HTML selector and create a new rule to change how the link looks: Hyperlink to Facebook.com Hyperlink to <a href=“http://www.facebook.com>Facebook.com</a>

  5. Review of Beginner CSS CSS Hyperlink to Facebook.com CSS Style Rule a { text-decoration: none; font-weight: bold; color: #306; }

  6. ID and Class Selectors You can also create your own selectors ID vs Class

  7. ID and Class Selectors You can also create your own selectors Class: rules apply to any element with that class <div id=“red”>content</div> <span id=“red”> content </span> Selector: #textBox

  8. ID and Class Selectors You can also create your own selectors ID: rules apply to a specific element <div class=“red”> </div> <p class=“red”>

  9. Where to Apply CSS Inline red text <p style="color: red"> red text </p> Only make text in this paragraph red.

  10. Where to Apply CSS Internal red text <head> <title>CSS Example</title> <style type="text/css"> p { color: #900; } </style> </head> All paragraph text in this current webpage will be red

  11. Where to Apply CSS External red text <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href=“style.css" /> </head> All paragraph text in this current webpage will be red. Difference: css rules within a separate css document.

More Related