Day5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
456
On Slideshare
229
From Embeds
227
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 227

http://bettyopolis.com 220
http://aefoley.wpengine.com 7

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS Review Self Awareness Developing
  • 2. 3 Ways " #1:In the Headto style <head>html " <style type=“text/css”>with CSS Selector { property:value; property:value; }   </head>
  • 3. 3 Ways " #2:Inlineto style <p style=“color:red”>This paragraphhtml " would be red (almost never a greatwith CSS choice L</p>
  • 4. 3 Ways " #3:In a .css fileto style By putting all the styles in a separatehtml " document with a “.css” extension, " and linking to that document in your"with CSS html document. Don’t stress about this one for now.
  • 5. CSS for styling text Awareness Developing Selfp {!font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "TimesNew Roman", serif;font-sizefont-size: you can use pixels, points, ems, percentages and many other units. Emsare the size of the base font you’re working from.font-weight: Bold or normalfont-style: normal or italicText-align: left, right, center, justify, inherit.line-height: distance from baseline to baseline (like leading). Expressed in pixels,points, ems, percentages and many other units. text-shadow: 2em .2em .3 em silver (x-offset y-offset blur color)Text-decoration: none (no underline)}!
  • 6. CSS for styling text Awareness Developing SelfYou can group selectors:p, h1 { color:green; font-style:italic;}
  • 7. Developing Self Awareness Fonts1.  Go to http://www.google.com/webfonts#2.  Choose a font and put it in your collection3.  Review the font to make sure it’s what you want4.  Click use 1.  Put the code from “add this code” in the <head> of your html document 2.  Apply the fonts in your CSS
  • 8. Developing Self AwarenessPseudo-class selectorsMaking your links change color when you mouse over them. a:link {color:red} /* links are red*/ a:visited {color:blue} /* visited links are blue*/ a:hover {color:purple} /* hovering turns them purple*/ a:active {color:red} /* red when clicking*/Note well – the pseudo-class selectors must be in "the above order.LVHA – LoVe before HAte
  • 9. <div></div> <span> </span>   Generic Elements
  • 10. <div> content</div> This is a generic block-level element. It makes an element sort of like a <p> </p> or an "<h1> </h1>, with space above and below.Mostly, you create a <div> to apply styles to it. Divs areused quite a bit in layout.   Generic Elements
  • 11. <span> content</span>This is a generic inline element. It goes around areasof text, the way you’d use <em> or <strong>.Mostly, you use a span to apply styles to it.   Generic Elements
  • 12. Class Step #1: Create a class in the style sheet. You do so by putting a periodselectors Before a name you make up for the class and then putting in your declarations.creating generic styles .bluebold{ font-weight:bold; color:blue; }
  • 13. Class Step #2: Apply the class to an element selectors <p class=“bluebold”>Thiscreating genericstyles paragraph has the bluebold class applied to it, and it is now blue and bold.</p>