Day5
•
0 likes•1,134 views
This document discusses various ways to style HTML with CSS, including using the <head>, inline styles, and external CSS files. It provides examples of CSS properties for styling text like font, color, size, and links. It also introduces CSS selectors like class selectors and pseudo-class selectors. Generic elements like <div> and <span> are covered as well as using Google Web Fonts.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Day5
Similar to Day5 (20)
More from Ann Foley
Recently uploaded
Recently uploaded (20)
Day5
- 1. CSS Review Self Awareness Developing
- 2. 3 Ways " #1:In the Head to style <head> html " <style type=“text/css”> with CSS Selector { property:value; property:value; } </head>
- 3. 3 Ways " #2:Inline to style <p style=“color:red”>This paragraph html " would be red (almost never a great with CSS choice L</p>
- 4. 3 Ways " #3:In a .css file to style By putting all the styles in a separate html " 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 Self p {! font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;font-size font-size: you can use pixels, points, ems, percentages and many other units. Ems are the size of the base font you’re working from. font-weight: Bold or normal font-style: normal or italic Text-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 Self You can group selectors: p, h1 { color:green; font-style:italic; }
- 7. Developing Self Awareness Fonts 1. Go to http://www.google.com/webfonts# 2. Choose a font and put it in your collection 3. Review the font to make sure it’s what you want 4. 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 Awareness Pseudo-class selectors Making 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 are used quite a bit in layout. Generic Elements
- 11. <span> content</span> This is a generic inline element. It goes around areas of 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 period selectors 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”>This creating generic styles paragraph has the bluebold class applied to it, and it is now blue and bold.</p>