1 More CSS

<link href="filename"
type="text/css" rel="stylesheet"
/>
 HTML id attribute
2

<p>Coding Horror! Coding Horror!</p>

<p id="mission">Our mission is to combine programming and
<q>human</q> factors with geekiness!</p>
HTML

Coding Horror! Coding Horror!

Our mission is to combine programming and “human” factors with

geekiness! output

 A unique ID for an element on a page

 Each ID must be unique; can only be used once in the page
 Linking to sections of a web page
3

<p>Visit <a href=

"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="#mission">View our Mission Statement</a></p>
HTML

Visit textpad.com to get the TextPad editor.

View our Mission Statement

output

 Link target can include an ID at the end, preceded by a #

 Browser will load that page and scroll to element with given
ID
 CSS ID selectors
4

#mission {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
} CSS

Coding Horror! Coding Horror!

Our mission is to combine programming and “human” factors

with geekiness! output

 Applies style only to the paragraph that has the ID of mission

 HTML class attribute
5

<p class="shout">Coding Horror! Coding Horror!</p>

<p class="special">See our special deal on Droids!</p>

<p class="special">Today only!</p> HTML

Coding Horror! Coding Horror!

See our special deal on Droids!

Today only! output

 A way to group some elements and give a style to only that
group
 Unlike an id, a class can be reused as much as you like
on the page
 CSS class selectors
6

.special {
background-color: yellow;
font-weight: bold;
}
p.shout {
color: red;
font-family: cursive;
} CSS

Coding Horror! Coding Horror!

See our special deal on Droids!

Today only!
output
 CSS class selectors
7

<p class="shout">Coding Horror! Coding Horror!</p>

<p class="special">See our special deal on Droids!</p>

<p class="special shout">Today only!</p> HTML

Coding Horror! Coding Horror!

See our special deal on Droids!

Today only!
output
 CSS ID selectors
8

a:link { color: #FF0000; } /* unvisited link */

a:visited { color: #00FF00; } /* visited link */
a:hover { color: #FF00FF; } /* mouse over link */
CSS

Buy Early Buy Often!

output
 CSS ID selectors
9

class description
:active an activated or selected element
an element that has the keyboard
:focus
focus
:hover an element that has the mouse over it
:link a link that has not been visited
:visited a link that has already been visited
the first letter of text inside an
:first-letter
element
:first-line the first line of text inside an element
an element that is the first one to
:first-child
appear inside another
10 Styling Page Sections
 Why do we need page sections?
11

 Style individual elements, groups of elements,

sections of text or of the page
 Create complex page layouts
 Sections of a page <div>
12

<div class="shout">
<h2>Coding Horror! Coding Horror!</h2>
<p class="special">See our special deal on Droids!</p>
<p>We'll beat any advertised price!</p>
</div> HTML

Coding Horror! Coding Horror!

See our special deal on Droids!

We’ll beat any advertised price!

output
 Tag used to indicate a logical section or area of a page
 Has no appearance by default, but you can apply styles to it
 Inline Sections <span>
13

<h2>Coding Horror! Coding Horror!</h2>

<p>See our <span class="special“>spectacular</span> deal
on Droids!</p>
<p>We'll beat <span class="shout“> any advertised
price</span>!</p>
HTML

Coding Horror! Coding Horror!

See our spectacular deal on Droids!

We’ll beat any advertised price!

output
 has no onscreen appearance, but you can apply a style or ID to
it, which will be applied to the text inside the span
 CSS context selectors
14

selector1 selector2 {
properties
} CSS
 applies the given properties to selector2 only if it is inside a
selector1 on the page

selector1 > selector2 {

properties
} CSS

 applies the given properties to selector2 only if it is directly

inside a selector1 on the page
 Context selector example
15

<p>Eat at <strong>Greasy's Burger</strong>...</p>

<ul>
<li>The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and greasy at the same time!</li>
</ul>
HTML
li strong { text-decoration: underline; }

CSS
Eat at Greasy’s Burger…

• The greasiest burgers in town!

• Yummy and greasy at the same time!
output
 More complex example
16

<div id="ad">
<p>Eat at <strong>Greasy's Burger</strong>...</p>
<ul>
<li class="important">The <strong>greasiest</strong>
burgers in town!</li>
<li>Yummy and <strong>greasy at the same time </strong>!
</li>
</ul>
</div>
HTML
#ad li.important strong { text-decoration: underline; }

CSS
Eat at Greasy’s Burger…

• The greasiest burgers in town!

• Yummy and greasy at the same time!
output
 The CSS Box Model
17

 Every element
composed of:
 content
 a border around the
element
 padding between the
content and the border
 a margin between the
border and other content
 The CSS Box Model (cont.)
18

 width = content width +

L/R padding + L/R
border + L/R margin
 height = content height
+ T/B padding + T/B
border + T/B margin
 IE6 doesn't do this
right
 Document Flow – block elements
19
 Document flow - inline elements
20
 Document flow - a larger example
21
 CSS properties for borders
22

h2 { border: 5px solid red; }

CSS

This is a heading.
output

property description
thickness/style/size of border on all 4
border
sides

 Thickness: px, pt, em, or thin, medium, thick

 Style: none, hidden, dotted, dashed, double,
groove, inset, outset, ridge, solid
 color
 More border properties
23

property description
border-color, border-width, specific properties of border on all 4
border-style sides
border-bottom, border-left, all properties of border on a particular
border-right, border-top side
border-bottom-color, border-bottom-
style,
border-bottom-width, border-left-
color, properties of border on a particular
border-left-style, border-left-width, side
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width
Complete list of border properties
http://www.w3schools.com/css/css_reference.asp#border
 Another border example
24

h2 {
border-left: thick dotted #CC0088;
border-bottom-color: rgb(0, 128, 128);
border-bottom-style: double;
} CSS

This is a heading.
output

 each side's border properties can be set individually

 if you omit some properties, they receive default
 CSS properties for padding
25

property description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties
http://www.w3schools.com/css/css_reference.asp#padding
 Padding example 1
26

p { padding: 20px; border: 3px solid black; }

h2 { padding: 0px; background-color: yellow; }
CSS

This is a first paragraph.

This is a second paragraph.

This is a heading
output
 Padding example 2
27

p {
padding-left: 200px; padding-top: 30px;
background-color: fuchsia;
} CSS

This is a first This is a first paragraph

paragraph.

This is a second paragraph

output

 each side's padding can be set individually

 notice that padding shares the background color of the
element
 CSS properties for margins
28

property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties
http://www.w3schools.com/css/css_reference.asp#margin
 Margin example 1
29

p {
margin: 50px;
background-color: fuchsia;
} CSS

This is a first paragraph

This is a second paragraph

output

 notice that margins are always transparent

 Margin example 2
30

p {
margin-left: 8em;
background-color: fuchsia;
} CSS

This is a first paragraph

This is a second paragraph

output

 each side's margin can be set individually

 CSS properties for dimensions
31

p { width: 350px; background-color: yellow; }

h2 { width: 50%; background-color: aqua; }
CSS

This paragraph uses the first style above

An h2 heading
output

property description
how wide or tall to make this element
width, height
(block elements only)
max-width, max-height, max/min size of this element in given
min-width, min-height dimension
 Centering a block element: auto
32
margins
p {
margin-left: auto;
margin-right: auto;
width: 750px;
} CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
output

 works best if width is set (otherwise, may occupy entire

width of page)
 to center inline elements within a block element, use text-
align: center;