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