An Intro to HTML & CSS

AN INTRO TO
HTML & CSS
Shay Howe
November 2011
www.shayhowe.com – @shayhowe

An Intro to HTML & CSS
SHAY HOWE
www.shayhowe.com – @shayhowe
@shayhowe

WHAT IS DESIGN?
@shayhowe

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

WHAT IS HTML & CSS?
@shayhowe

HTML
Markup language to give
content structure and
meaning.
@shayhowe
CSS
Presentation language to
give content style and
appearance.

HTML
Content.
@shayhowe
CSS
Style.

HTML
Hyper Text Markup Language
@shayhowe

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
<div
id="shayhowe"
class="awesome"></div>
Tags encompass elements and their corresponding attributes.
@shayhowe

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

DOCUMENT STRUCTURE
<!DOCTYPE
html>
<html>

<head>

<title>Hello
World</title>

</head>

<body>

<h1>Hello
World</h1>

<p>This
is
a
website.</p>

</body>
</html>
@shayhowe

QUIZ
@shayhowe

SAMPLE NAVIGATION HTML
<ul
id="social">

<li
class="tumblr">

<a
href="http://blog.codeacademy.org">

Code
Academy
Tumblr
Blog

</a>

</li>

<li
class="mail">

<a
href="mailto:contact@codeacademy.org">

Email
Code
Academy

</a>

</li>

<li
class="twitter">

<a
href="http://twitter.com/#!/codeacademy">

Code
Academy
Twitter

</a>

</li>

...
</ul>
@shayhowe

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
{

0
-‐81px;
}
ul#social
li.twitter
a
{

0
-‐98px;
}
@shayhowe

TAGS
<ul
id="social">

<li
class="tumblr">

<a

Code
Academy
Tumblr
Blog

</a>

</li>

<li
class="mail">

<a

Email
Code
Academy

</a>

</li>

<li
class="twitter">

<a

Code
Academy
Twitter

</a>

</li>

...
</ul>
@shayhowe

ELEMENTS
<ul
id="social">

<li
class="tumblr">

<a

Code
Academy
Tumblr
Blog

</a>

</li>

<li
class="mail">

<a

Email
Code
Academy

</a>

</li>

<li
class="twitter">

<a

Code
Academy
Twitter

</a>

</li>

...
</ul>
@shayhowe

ATTRIBUTES
<ul
id="social">

<li
class="tumblr">

<a

Code
Academy
Tumblr
Blog

</a>

</li>

<li
class="mail">

<a

Email
Code
Academy

</a>

</li>

<li
class="twitter">

<a

Code
Academy
Twitter

</a>

</li>

...
</ul>
@shayhowe

ID & CLASS
<ul
id="social">

<li
class="tumblr">

<a

Code
Academy
Tumblr
Blog

</a>

</li>

<li
class="mail">

<a

Email
Code
Academy

</a>

</li>

<li
class="twitter">

<a

Code
Academy
Twitter

</a>

</li>

...
</ul>
@shayhowe

REFERENCING A CSS FILE
<!DOCTYPE
html>
<html>

<head>

<title>Hello
World</title>

<link
rel="stylesheet"
href="file.css">

</head>

<body>

<h1>Hello
World</h1>

<p>This
is
a
website.</p>

</body>
</html>
@shayhowe

CSS
Cascading Style Sheets
@shayhowe

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

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

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

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
{

0
-‐64px;
}
ul#social
li.mail
a
{

0
-‐81px;
}
ul#social
li.twitter
a
{

0
-‐98px;
}
@shayhowe

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
{

0
-‐64px;
}
ul#social
li.mail
a
{

0
-‐81px;
}
ul#social
li.twitter
a
{

0
-‐98px;
}
@shayhowe

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
{

0
-‐64px;
}
ul#social
li.mail
a
{

0
-‐81px;
}
ul#social
li.twitter
a
{

0
-‐98px;
}
@shayhowe

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
{

0
-‐64px;
}
ul#social
li.mail
a
{

0
-‐81px;
}
ul#social
li.twitter
a
{

0
-‐98px;
}
@shayhowe

THE BOX MODEL
@shayhowe

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

FLOATS
img
{

border:
1px
solid
#ccc;

float:
right

margin:
10px
0
10px
20px;

padding:
4px;
}
<p>Ut
wisi
enin
ad
minim...</p>
<p><img
src="chicago.jpg"
alt="Chicago"
/>
Lorem
ipsum
dolor
sit
amet...</p>
<p>Mimimum
veniami
ex
ea
con...</p>
@shayhowe

FLOATS
@shayhowe

FLOATS & CLEARS
.col
{

float:
left;

margin:
0
10px;

width:
400px;
}
.clear
{

clear:
both;
}
<p
class="col">Lorem
ipsum
dolor
sit
amet...</p>
<p
class="col">Con
minimim
venami
quis...</p>
<div
class="clear"></div>
<p>Quis
nostrud
ad
nostris
pro
amat...</p>
@shayhowe

FLOATS & CLEARS
@shayhowe

QUESTIONS?
Thank you!
@shayhowe

An Intro to HTML & CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to An Intro to HTML & CSS

Similar to An Intro to HTML & CSS (20)

Recently uploaded

Recently uploaded (20)

An Intro to HTML & CSS