Slide 1
Slide 1 text
AN INTRO TO
HTML & CSS
Shay Howe
November 2011
www.shayhowe.com – @shayhowe
Slide 2
Slide 2 text
An Intro to HTML & CSS
SHAY HOWE
www.shayhowe.com – @shayhowe
@shayhowe
Slide 3
Slide 3 text
An Intro to HTML & CSS
WHAT IS DESIGN?
@shayhowe
Slide 4
Slide 4 text
An Intro to HTML & CSS
WHAT IS DESIGN?
“In most people’s vocabularies, design is a veneer. It’s
interior decorating. It’s the fabric of the curtains, of the
sofa. But to me, nothing could be further from the
meaning of design. Design is the fundamental soul of a
human-made creation that ends up expressing itself in
successive outer layers of the product.”
– Steve Jobs
@shayhowe
Slide 5
Slide 5 text
An Intro to HTML & CSS
WHAT IS HTML & CSS?
@shayhowe
Slide 6
Slide 6 text
An Intro to HTML & CSS
HTML
Markup language to give
content structure and
meaning.
@shayhowe
CSS
Presentation language to
give content style and
appearance.
Slide 7
Slide 7 text
An Intro to HTML & CSS
HTML
Content.
@shayhowe
CSS
Style.
Slide 8
Slide 8 text
An Intro to HTML & CSS
HTML
Hyper Text Markup Language
@shayhowe
Slide 9
Slide 9 text
An Intro to HTML & CSS
ELEMENTS, ATTRIBUTES, & TAGS
Elements
body,
h1,
p,
div,
strong,
em,
span
Elements are HTML designators that define certain objects.
Attributes
href="http://shayhowe.com"
title="Shay
Howe"
Attributes provide additional information to the given element.
Tags
Tags encompass elements and their corresponding attributes.
@shayhowe
Slide 10
Slide 10 text
BLOCK & INLINE ELEMENTS
Block
Block level elements begin on a new line within the document and occupy the full
available width.
Inline
Inline level elements do not begin on a new line and fall into the flow of the document,
maintaing their necessary width.
An Intro to HTML & CSS @shayhowe
header
footer
article
section
aside
div
h1...h6
p
table
form
ul,
ol,
li
dl,
dt,
dd
span
a
strong
em
img
br
input
abbr
Slide 11
Slide 11 text
An Intro to HTML & CSS
DOCUMENT STRUCTURE
Hello
World
Hello World
This is a website.
@shayhoweSlide 12
Slide 12 text
An Intro to HTML & CSS
QUIZ
@shayhowe
Slide 13
Slide 13 text
An Intro to HTML & CSS
SAMPLE NAVIGATION HTML
@shayhowe
Slide 14
Slide 14 text
An Intro to HTML & CSS
SAMPLE NAVIGATION CSS
ul#social
{
list-‐style:
none;
}
ul#social
li
{
float:
left;
margin:
12px
0
0
0;
padding:
0
3px;
}
ul#social
li
a
{
background:
url("icons.png")
0
0
no-‐repeat;
display:
block;
height:
17px;
text-‐indent:
-‐9999px;
width:
16px;
}
ul#social
li.tumblr
a
{
background-‐position:
0
-‐64px;
}
ul#social
li.mail
a
{
background-‐position:
0
-‐81px;
}
ul#social
li.twitter
a
{
background-‐position:
0
-‐98px;
}
@shayhowe
Slide 15
Slide 15 text
An Intro to HTML & CSS
TAGS
@shayhowe
Slide 16
Slide 16 text
An Intro to HTML & CSS
ELEMENTS
@shayhowe
Slide 17
Slide 17 text
An Intro to HTML & CSS
ATTRIBUTES
@shayhowe
Slide 18
Slide 18 text
An Intro to HTML & CSS
ID & CLASS
@shayhowe
Slide 19
Slide 19 text
An Intro to HTML & CSS
REFERENCING A CSS FILE
Hello
World
Hello World
This is a website.
@shayhoweSlide 20
Slide 20 text
An Intro to HTML & CSS
CSS
Cascading Style Sheets
@shayhowe
Slide 21
Slide 21 text
An Intro to HTML & CSS
SELECTOR, PROPERTY, VALUE
Selector
h1
{
font:
bold
16px/24px
Arial,
sans-‐serif;
}
A selector determines which element to apply style to.
Property
h1
{
font:
bold
16px/24px
Arial,
sans-‐serif;
}
A property is the style that will be applied to the element.
Value
h1
{
font:
bold
16px/24px
Arial,
sans-‐serif;
}
A value is the determines the behavior of a property.
@shayhowe
Slide 22
Slide 22 text
An Intro to HTML & CSS
RULE SETS & DECLARATIONS
Rule Set
h1
{
font:
bold
16px/24px
Arial,
sans-‐serif;
}
A rule set includes a selector and all corresponding declarations.
Declarations
h1
{
font:
bold
16px/24px
Arial,
sans-‐serif;
}
Declarations are individual lines of CSS within a rule set.
@shayhowe
Slide 23
Slide 23 text
An Intro to HTML & CSS
ELEMENT, ID, & CLASS SELECTORS
Element Selector
h1
{
font:
bold
16px/24px
Arial,
sans-‐serif;
}
An element selector targets and element by its name.
ID Selector
#logo
{
background:
url("logo.png")
0
0
no-‐repeat;
}
An ID selector targets and element by its ID. ID’s are to be reserved to one a page.
Class Selector
.column
{
width:
200px;
}
A class selector targets and element by its class. Classes may appear multiple times
within a page.
@shayhowe
Slide 24
Slide 24 text
An Intro to HTML & CSS
QUIZ
@shayhowe
Slide 25
Slide 25 text
An Intro to HTML & CSS
QUIZ
ul#social
{
list-‐style:
none;
}
ul#social
li
{
float:
left;
margin:
12px
0
0
0;
padding:
0
3px;
}
ul#social
li
a
{
background:
url("icons.png")
0
0
no-‐repeat;
display:
block;
height:
17px;
text-‐indent:
-‐9999px;
width:
16px;
}
ul#social
li.tumblr
a
{
background-‐position:
0
-‐64px;
}
ul#social
li.mail
a
{
background-‐position:
0
-‐81px;
}
ul#social
li.twitter
a
{
background-‐position:
0
-‐98px;
}
@shayhowe
Slide 26
Slide 26 text
An Intro to HTML & CSS
SELECTORS
ul#social
{
list-‐style:
none;
}
ul#social
li
{
float:
left;
margin:
12px
0
0
0;
padding:
0
3px;
}
ul#social
li
a
{
background:
url("icons.png")
0
0
no-‐repeat;
display:
block;
height:
17px;
text-‐indent:
-‐9999px;
width:
16px;
}
ul#social
li.tumblr
a
{
background-‐position:
0
-‐64px;
}
ul#social
li.mail
a
{
background-‐position:
0
-‐81px;
}
ul#social
li.twitter
a
{
background-‐position:
0
-‐98px;
}
@shayhowe
Slide 27
Slide 27 text
An Intro to HTML & CSS
PROPERTIES
ul#social
{
list-‐style:
none;
}
ul#social
li
{
float:
left;
margin:
12px
0
0
0;
padding:
0
3px;
}
ul#social
li
a
{
background:
url("icons.png")
0
0
no-‐repeat;
display:
block;
height:
17px;
text-‐indent:
-‐9999px;
width:
16px;
}
ul#social
li.tumblr
a
{
background-‐position:
0
-‐64px;
}
ul#social
li.mail
a
{
background-‐position:
0
-‐81px;
}
ul#social
li.twitter
a
{
background-‐position:
0
-‐98px;
}
@shayhowe
Slide 28
Slide 28 text
An Intro to HTML & CSS
VALUES
ul#social
{
list-‐style:
none;
}
ul#social
li
{
float:
left;
margin:
12px
0
0
0;
padding:
0
3px;
}
ul#social
li
a
{
background:
url("icons.png")
0
0
no-‐repeat;
display:
block;
height:
17px;
text-‐indent:
-‐9999px;
width:
16px;
}
ul#social
li.tumblr
a
{
background-‐position:
0
-‐64px;
}
ul#social
li.mail
a
{
background-‐position:
0
-‐81px;
}
ul#social
li.twitter
a
{
background-‐position:
0
-‐98px;
}
@shayhowe
Slide 29
Slide 29 text
An Intro to HTML & CSS
THE BOX MODEL
@shayhowe
Slide 30
Slide 30 text
An Intro to HTML & CSS
THE BOX MODEL
div
{
border:
4px
solid
#000;
height:
300px;
margin:
20px;
padding:
20px;
width:
300px;
}
Breakdown
Total Width = Width + (Margin x 2) + (Border x 2) + (Padding x 2)
388
Pixels
=
300
+
(20
x
2)
+
(4
x
2)
+
(20
x
2)
Total Height = Height + (Margin x 2) + (Border x 2) + (Padding x 2)
388
Pixels
=
300
+
(20
x
2)
+
(4
x
2)
+
(20
x
2)
@shayhowe
Slide 31
Slide 31 text
An Intro to HTML & CSS
FLOATS
img
{
border:
1px
solid
#ccc;
float:
right
margin:
10px
0
10px
20px;
padding:
4px;
}
Ut wisi enin ad minim...
Lorem
ipsum
dolor
sit
amet...
Mimimum veniami ex ea con...
@shayhoweSlide 32
Slide 32 text
An Intro to HTML & CSS
FLOATS
@shayhowe
Slide 33
Slide 33 text
An Intro to HTML & CSS
FLOATS & CLEARS
.col
{
float:
left;
margin:
0
10px;
width:
400px;
}
.clear
{
clear:
both;
}
Lorem ipsum dolor sit amet...
Con minimim venami quis...
Quis nostrud ad nostris pro amat...
@shayhoweSlide 34
Slide 34 text
An Intro to HTML & CSS
FLOATS & CLEARS
@shayhowe
Slide 35
Slide 35 text
An Intro to HTML & CSS
QUESTIONS?
Thank you!
@shayhowe