CSS Review Self Awareness  Developing
3 Ways " #1:In the Headto style                <head>html "                  <style type=“text/css”>with CSS              ...
3 Ways " #2:Inlineto style                <p style=“color:red”>This paragraphhtml "      would be red (almost never a grea...
3 Ways " #3:In a .css fileto style                By putting all the styles in a separatehtml "      document with a “.css”...
CSS for styling text Awareness       Developing Selfp {!font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", G...
CSS for styling text Awareness      Developing SelfYou can group selectors:p, h1 {   color:green;   font-style:italic;}
Developing Self Awareness          Fonts1.  Go to http://www.google.com/webfonts#2.  Choose a font and put it in your coll...
Developing Self AwarenessPseudo-class selectorsMaking your links change color when you mouse over them.  a:link {color:red...
<div></div> <span> </span>                           	         Generic Elements
<div> content</div> This is a generic block-level element. It makes an element sort of like a <p> </p> or an "<h1> </h1>, ...
<span> content</span>This is a generic inline element. It goes around areasof text, the way you’d use <em> or <strong>.Mos...
Class              Step #1: Create a class in the style                   sheet. You do so by putting a periodselectors   ...
Class              Step #2: Apply the class to an element                   selectors         <p class=“bluebold”>Thiscrea...
Upcoming SlideShare
Loading in...5
×

Day5

383

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
383
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Day5

  1. 1. CSS Review Self Awareness Developing
  2. 2. 3 Ways " #1:In the Headto style <head>html " <style type=“text/css”>with CSS Selector { property:value; property:value; }   </head>
  3. 3. 3 Ways " #2:Inlineto style <p style=“color:red”>This paragraphhtml " would be red (almost never a greatwith CSS choice L</p>
  4. 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. 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. 6. CSS for styling text Awareness Developing SelfYou can group selectors:p, h1 { color:green; font-style:italic;}
  7. 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. 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. 9. <div></div> <span> </span>   Generic Elements
  10. 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. 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. 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. 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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×