Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this


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