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;
