Louisa lambregts lambrel@algonquincollege com
Download
1 / 11

Introduction to Dreamweaver - PowerPoint PPT Presentation


  • 93 Views
  • Uploaded on

Louisa Lambregts , [email protected] 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introduction to Dreamweaver' - mariel


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Louisa lambregts lambrel@algonquincollege com

Louisa Lambregts, [email protected]

Introduction to Dreamweaver

Class Two


Review of beginner css
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


Review of beginner css1
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


Review of beginner css2
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>


Review of beginner css3
Review of Beginner CSS

CSS

Hyperlink to Facebook.com

CSS Style Rule

a {

text-decoration: none;

font-weight: bold;

color: #306;

}


Id and class selectors
ID and Class Selectors

You can also create your own selectors

ID vs Class


Id and class selectors1
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


Id and class selectors2
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”>


Where to apply css
Where to Apply CSS

Inline

red text

<p style="color: red"> red text </p>

Only make text in this paragraph red.


Where to apply css1
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


Where to apply css2
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.


ad