Day5

CSS Review
Self Awareness
Developing

3 Ways " #1:In the Head
to style
<head>

html "
<style type=“text/css”>

with CSS

Selector {

property:value;

property:value;
}

</head>

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>

3 Ways " #3:In a .css ﬁle
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.

CSS for styling text
Awareness
Developing Self
p {!
font-family: Baskerville, "Baskerville Old Face", "Hoeﬂer 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)
}!

CSS for styling text
Awareness
Developing Self
You can group selectors:

p, h1 {

color:green;

font-style:italic;
}

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

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

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

<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

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

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>

Day5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Day5

Semelhante a Day5 (20)

Mais de Ann Foley

Mais de Ann Foley (6)

Último

Último (20)

Day5