Day6

Developing Self Awareness
Review
1.  Grouping CSS selectors
2.  Styling links states "
(aka pseudo-class
selectors) using CSS
3.  Generic elements – "
div and span
4.  CSS Class selectors

1.  Grouping CSS selectors
h1, h3, p {
Heading 1

color: orange;" Heading 3

font-weight: bold;" paragraph

}

Create a css style that applies to a group of
items by separating the items with commas

2.  Styling link states
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

3.  Generic Elements
<div>Content here.</div>

Divs are generic block-level elements.
Applied to portions of content, they make that
content easier to style and manipulate. Until HTML5,
divs were the workhorse of web layout.
With HTML5, you’re encouraged to use elements
like <article>, <section> and <aside> before you use
<div> to deﬁne an area.

3.  Generic ElementsAwareness
Developing Self (cont.)
<span> some words </span>

Spans are generic inline elements.
A span element is typically wrapped around a
portion of text in order to style that text differently
than the rest of the paragraph, h1 or whatever.

4.  CSS Class Selectors
Type selectors target every instance of an element.
If you write p{color:green}, all your paragraph text will
be green.
Type selectors select elements such as p, h1.
They’re what we’ve styled before
Class selectors can be used to select and "
style any HTML element by applying the class "
as an attribute.

How?

4.  CSS Class Selectors (cont.)
.redbold{"

color: red;" CSS

font-weight: bold;"
}

<p>Call me <span class=“redbold”> Ishmael.</span>
Some years ago, never mind how long precisely…</p>
HTML

Call me Ishmael. Some years ago, never mind how long Result
precisely…

FANCY" 1.  Create a small bullet in Photoshop
or Illustrator.
BULLETS
2.  It should be a .jpeg, .png or "
(bespoke bullets .gif image.
for your " 3.  Customize your li CSS:
<ul></ul>)
li { "

list-style-image: url(your_bullet.gif); "
}

Email Note: this type of mail link can attract all the

Link
spammers of the whole entire world.
One solution: skip the mailto link and write something
(How to make a like this: “Hey, you can send me an email at
afoley(at)madisoncollege(dot)edu.”
link to an email
Another solution is Enkoder, a tiny, little javascript utility
address that that encrypts your email address: http://hivelogic.com/
starts the email enkoder/

process)

Click"
<a href=“mailto:afoley@madisoncollege.edu”> here</a>
to send me an email!

Centering page content
CSS!
#wrapper {"

width: 800px;"

margin:0 auto;"
}
HTML!
<body>
<div id=“wrapper”>

<h1>I’m the headline</h1>

<p>I’m the content of this one-paragraph web page. "

The headline and I are the only content here!</p>
</div>
</body>

Day6

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Day6

Ähnlich wie Day6 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Day6