This document provides an introduction to HTML and CSS basics. It covers HTML structure and elements like paragraphs, headings, lists, links and images. It then discusses CSS concepts like style sheets, the box model and formatting text, colors, backgrounds and more. The document is divided into sections covering HTML topics like structure, text formatting and links, followed by sections on CSS topics such as colors, backgrounds, positioning and layout.

1. HTML + CSS Basics
Date: 01/20/2015
The City University of New York
Architectural Technology Dept.
HTML, CSS Manual.
Written by Evgenia Melnikova.

2. HTML l CSS l JS
22
Content
Part l: Hypertext Markup Language (HTML) structure
1. Before you start
A. Preface.........................................................................................................
B. Creating a wireframe and site diagrams.......................................................
C. What would you need to have to start..........................................................
2. Introduction to HTML
A. HTMLdocuments..........................................................................................
B. Creating a new document.............................................................................
C. Entering content...........................................................................................
D. Basic document structure.............................................................................
3. Marking up text
A. Paragraphs...................................................................................................
B. Headings......................................................................................................
C. Thematic break.............................................................................................
D. Lists..............................................................................................................
E. Other content elements................................................................................
F. Organizing page content...............................................................................
G. Emphasized text..........................................................................................
H. Important text...............................................................................................
I. Generic elements.........................................................................................
J. Special characters.........................................................................................
4. Adding links
A. Hypertext link and href attribute...................................................................
B. Linking within a directory..............................................................................
C. Linking to a lower directory...........................................................................
D. Linking to a higher directory..........................................................................
E. Linking to a specific point on a page............................................................
F. Mail/ telephone links.....................................................................................
5. Tables, Division, Span
A. Tables...........................................................................................................
B. Division.........................................................................................................
C.Span..............................................................................................................
6. Adding images
A. Image formats...............................................................................................
B. The img element...........................................................................................
C. Width & height dimensions...........................................................................
7. Video & Audio
A. Adding video to a page................................................................................
B. Adding audio to a page................................................................................
Part ll: Cascading Style Sheets (CSS)
1. Introduction to CSS
A. How style sheets work.................................................................................
B. Big concepts.................................................................................................
C. Conflicting styles...........................................................................................
D. Rule order.....................................................................................................
E. The box model..............................................................................................
F. Grouped selectors.........................................................................................
2. Formatting text
A. Working with fonts........................................................................................
B. Specifying font size......................................................................................
C. Working with keywords.................................................................................
5
5
5
6
6
6
6
6
6
7
7
8
8
9
9
9
9
10
10
10
10
10
10
10
11
12
12
12
12
13
13
15
15
15
15
16
16
16
16
17

3. HTML l CSS l JS
3
D. Font weight...................................................................................................
E. Font style (italics).........................................................................................
F. Changing text color.......................................................................................
G. Selector types..............................................................................................
H. Specificity 101..............................................................................................
I. Line height......................................................................................................
J. Horizontal alignment......................................................................................
K. Underlines and other “decorations”..............................................................
L. Spaced out...................................................................................................
M. CSS Review: Font and text properties.........................................................
3. Colors and backgrounds
A. Color names.................................................................................................
B.Opacity..........................................................................................................
C. First letter and line.......................................................................................
D. Background images......................................................................................
E. External style sheets....................................................................................
4. Thinking inside the box
A. The element box..........................................................................................
B. Specifying box dimensions...........................................................................
C. Padding........................................................................................................
D. Border styles.................................................................................................
E. Margin behavior............................................................................................
F. Assigning display roles..................................................................................
5. Floating and positioning
A. Normal flow..................................................................................................
B. Floating.........................................................................................................
C. Floating multiple elements............................................................................
6 Page layout with CSS
A. Strategies.....................................................................................................
B. Controlling the position of elements.............................................................
C. Containing blocks.........................................................................................
D. Specifying position.......................................................................................
E. Fixed layout..................................................................................................
F. Fluid page layout...........................................................................................
G. Elastic layout................................................................................................
H. Hybrid layout................................................................................................
I. Multicolumn layout using floats......................................................................
7. Transitions, transformations, animations
A. CSS transitions.............................................................................................
B. Transition basics...........................................................................................
17
17
17
17
18
18
18
18
18
18
18
19
19
19
20
20
20
21
21
22
22
22
22
23
23
24
25
25
25
26
27
27
28
28
28

4. Part l:
Hyperlink Markup Language (HTML) Structure

5. HTML l CSS l JS
5
1. Before you start
A. Preface
This tutorial will help you create and maintain a custom web page that you
can use for your online-portfolio, resume or web site. First, we are going to
learn the basics of HTML, i.e. HTML structure, how to add images, links,
create
custom lists, change color or text background and change font styles, add
video and audio to the wed page.
B. Creating a wireframe and site diagram
Wireframe diagrams. A wireframe diagram shows the structure of a web
page using ONLY outlines for each content type and widget (Figure 1). The
purpose of a wireframe diagram is to indicate how the screen real estate is
divided and and where functionality and content such as navigation, search
boxes and and so on are placed, without any decoration or graphic design.
Site diagram. A site diagram indicates the structure of the site as a whole
and how individual pages relate to one another. Figure 2 shows a simple
site diagram.
C. What would you need to have to start
HTML editors: http://jsbin.com/, TextPad (Windows), Sublime Text
(Windows, Mac, Linux), BBEdit (Mac).
Web page authoring: Adobe Dreamweaver, Microsoft Expression Web
(Windows), Nvu (Mac OS X, Windows, Linux).
Internet tools. Because you will be dealing with the Internet, you need to
have some tools specifically for viewing and moving files over the network:
A variety of browsers:
Windows:
Internet explorer
Chrome
Firefox
Safari
Opera
Figure 1.
Figure 2.
Mac OS X:
Safari
Chrome
Firefox
Opera
Mobile browsers:
Mobile Safari (iOS)
Android browser (android)
Blackberry browser (RIM)
Opera mobile (all devices)
Internet explorer (Windows
phone)

6. HTML l CSS l JS
6
2. Introduction to HTML
A. HTML documents
Adding descriptive tags to a text documents is
known as “marking up” the document. Web pages
use markup language called Hyper Text Markup
Language, or HTML in short, which was created
especially for documents with hypertext links.
B. Creating a new document
Exercise 1:
For this tutorial we will be using http://jsbin.com/. Go
ahead and create a new HTML document.
C. Entering content
Figure 3. explains how all HTML elements
structured. Always start with an opening tag, then
enter the content and then close it off with a closing
tag. Think of it as parentheses brackets.
Remember, if you forget to put closing or opening
tag the browser would not be able to run your web
page.
D. Basic document structure
Figure 4 illustrates the basic recommended
structure of an HTML 5 document which is the latest
markup language used for the world wide web.
1st line: Doctype declaration (identifies this
document as an HTML5 document)
2nd line: The entire document contained
within an html element.
<elementname> Content here </elementname>
Opening tag Content (text and/or
other HTML elements)
Closing tag
Element
Figure 3.
<!DOCTYPE html>
<html>
<head>
<title>John Smith portfolio</title>
<meta charset=”utf-8”>
</head>
<body>
Page content goes here
</body>
</html>
Figure 4.
1
2
3
6
4
5
Tip: Correct terminology is to say that the title is
nested within the head element.
The html element is called root element because
it contains all the elements in the document and it
may not be contained within any other element.
3rd line: Within the html element, the document is
divided into a head and a body. The head element
contains descriptive information about the docu-
ment itself (such as its title, the style sheets it uses,
scripts, and other type of “meta” data.
4th line: The meta elements within the head element
provide information about the document itself.
5th line: In the head there is a mandatory
element - title.
6th line: Finally, the body element contains
everything that we want to show up in the browser
window.
3. Marking up text
A. Paragraphs.
Paragraphs are the most rudimentary elements of a
text document. You indicate a paragraph with the p
element by inserting an opening <p> and a closing
</p> tag after it.
<p> ... </p>
Exercise 2:
Start by inserting a paragraph in the body element
starting with <p> and then closing your paragraph
with </p> tag.
The output window will show you how your
paragraph would appear in a browser. You should
have something like this in your HTML editor side
and the output side (Figures 5 and 6):
Figure 5.
Figure 6.
B. Headings.
There are 6 levels of headings, from h1 to h6.
It is important to use headings markup to create
hierarchy of the text with <h1> being the most im-
portant and <h6> being the least important. Think
of it as line weights in AutoCad.
<h1> ... </h1>
Exercise 3:
After <p> tag insert a <h1> tag to see how your
paragraph text changes. Play with other headings
to see the difference. You should have something
similar to Figures 7 and 8.

7. HTML l CSS l JS
7
Figure 7.
Figure 8.
C. Thematic break
If you want to indicate that one topic or thought is
complete and athother one is beginning, you can
insert a paragraph-level thematic break <hr>. It
is an empty element - you just drop it into a place
where where you want the thematic break to occur
(Figure 9).
D. Lists
• Unordered lists
• Ordered lists
• Description lists
Figure 9.
Unordered lists.
Any list of examples, components, thoughts, or
options qualifies as an unordered list. To identify an
unordered list, mark it up with ul element. The open-
ing tag <ul> goes before the first list item, and the
closing tag </ul> goes after the last list item. Each
item in the list gets maked up as a list item li by
enclosing it in opening and closing li tags.
<ul>
<li> ...</li>
<li> ...</li>
</ul>
<p>My favorite fruits:</p>
<ul>
<li> strawberries </li>
<li> mango</li>
<li> kiwi</li>
</ul>
Figure 10.
Exercise 4.
Create an unordered list in your jsbin.com HTML
editor. The output should look similar to Figure 10.
Ordered lists.
Ordered lists are for items that occur in a
particular order, such as step-by-step instructions
or driving directions. The mark up is similar to
unordered lists only insted of <ul> and </ul> tags
you use <ol> and </ol>.
<ol>
<li> ...</li>
<li> ...</li>
</ol>
Exercise 5.
Create an ordered list in your jsbin.com HTML edi-
tor. The output should look similar to Figure 11.
<p>Driving directions:</p>
<ol>
<li>Take I-95 south</li>
<li>Take exit 15</li>
<li>Merge into Dillard
Rd</li>
</ol>
Figure 11.
Description lists.
Description lists are used for any type of name/
value pairs, such as terms and their definitions,
questions and answers or other types of terms
and their associated information.
<dl>
<dt> ...</dt>
<dd> ...</dd>
</dl>
Exercise 6.
Create a description list in your jsbin.com HTML
editor. Refer to Figures 12 and13.

8. HTML l CSS l JS
8
Figure 12.
Figure 13.
E. Other content elements
Long quotations.
Preformatted text.
Browsers ignore whitespace such as line returns
and character spaces in the source document. But
in some types of information, such as code ex-
amples or poetry, the whitespace is important for
conveying meaning. For these purposes, there is
the preformatted text element - pre. Use <pre> and
</pre> tags to create preformatted text element.
<blockquot> ...</blockquote>
Figure 14.
Figure 15.
Compare the output of <pre> and <p> as shown on
Figures 14 and 15.
Figures.
The figure element is used for content that illus-
trates or supports some point in the text. A figure
may contain an image, a video, a code snippet, text,
or even a table. Using <figure> tag would allow you
to apply special styles to figures but not to other im-
ages on the page. As you probably already figured
out <figcaption> tag adds a caption for the element
you wrapped in <figure>, </figure> tags. Look at the
example in Figures 16 and 17. (We will learn how to
insert an imaged later in the tutorial)
<figure> ...</figure>
<figcaption>...</figcaption>
Figure 16.
Figure 17.
F. Organizing page content
<aside> ...</aside>
<nav>...</nav>
<header>...</header>
<footer>...</footer>
- Identifies content
that is related but
tangential to the
surrounding content.
- gives a semantic
way to identify
navigation for a site.
- used for introductory
material that typically
appears at the top of a
web page
- used to indicate the
type of information
that typically comes
at the end of a page,
such as author,
copyright information
etc.

9. HTML l CSS l JS
9
G. Emphasized text
Use the em element to indicate which part of a
sentence should be stressed or emphasized. By
default <em> element displays in italics, but of
course you can make them any way you like with a
style sheet.
If you just want to make text italic use <i>, </i>
tags.
H. Important text.
The strong element indicates that a word or phase
is important. By default <strong> element displays in
bold. Mark text as strong only when it makes sense
semantically, not just to make text bold.
If you just want to make text bold use <b>...</b>
tags.
I. Generic elements
The div element indicates a division of content and
is used to create a logical grouping of content
elements on the page. A span element indicates a
word or phrase for which no text-level element
currently exists.
The div and span elements have no inherent
presentation qualities of their own, but you can use
a style sheets to format them however you like.
<em> ...</em>
<strong> ...</strong>
<div> ...</div>
<span> ...</span>
<span class=”tel”>718.260.5000</span>
In the example above we can use a span element
to give meaning to telephone numbers (there is no
telephone element in HTML).
Identification with id.
The id attribute is used the asign a unique identifier
to an element in the document. The value of id must
be used only once in the document. Example:
<div id=”ISBN0881794096”>
Classification with class.
The class attribute classifies elements into
conceptual groups; therefore, unlike the id attribute,
multiple elements can share a class name. By
marking elements part of the same class, you can
apply styles to all of the labeled elements at once
with a single rule or manipulate them all with a
script.
Tip: The id attribute is used to identify.
The class attribute is used to classify.
J. Special characters
Some common characters, such as a copyright
symbol ©, are not part of the standard set of charac-
ters, which contain only letters, numbers and a few
basic symbols. Other characters, such as the less-
than symbol (<), are available, but if you put one in
an HTML document, the browser will interpret it as
the beginning of a tag. Characters such as these-
must be escaped in the sourse document. Escaping
meant that instead of typing in the character itself,
you represent it by its numeric or named character
reference.
Figure 18.
Figure 19.
Figures 18 and 19 illustrate the use of special
characters.
Table 1. Common special characters and their
character references.
Character Description Name Number
non-breaking
characte
space
&nbsp; &#160;
& Ampersand &amp; &#038;
‘ Apostrophe &apos; &#039;
< Less-than
symbol
&lt; &#060;
> Greater-than
symbol
&gt; &#062;
© Copyright &copy; &#169;
® Registered
trademark
&reg; &#174;
™ Trademark &trade; &#8482;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
€ Euro &euro; &#8364;
– En-dash &ndash; &#8211;
— Em-dash &mdash; &#8212;
“ Left curly
double quote
&ldquo; &#8220;
” Right curly
double quote
&rdquo; &#8221;
• Bullet &bull; &#8226;
… Horizontal
elipsis
&hellip; &#8230;
Tip: Remember that indenting each hierarchical
level in your HTML source consistently makes the
document easier to scan and update later.

10. HTML l CSS l JS
10
4. Adding links
A. Hypertext link and href attribute
To make a section of text a link, simply wrap it in
opening and closing <a>...</a> tags and use href
attribute to provide the URL of the target page. The
content of the anchor element becomes the hyper-
link text. Here is an example that creates a link to
the Designboom website:
<a href = ”...” > </a>
<a href=”http://www.designboom.com”></a>
To make an image a link, put the img element in the
anchor element:
<a href=”http://wp.architecture.com.au” ><img
src=”http://wp.architecture.com.au/venicebiennale/
wp-content/uploads/sites/16/2013/06/Formations.
jpg”></a>
Tip: Remember, the URL must be always entered in
quotation marks.
B. Linking within a directory
Below is a simple web site scheme:
John Smith portfolio
logo image about.html home.html projects
design5.html
design4.html
design6.html
Let’s say, you want to link from a HOME page to
ABOUT page (Figure 20). Since both of those files
are in the same directory (John Smith Portfolio) you
can make a link to the about page by simply provid-
ing its filenbame in the URL:
<a href=”about.html”>about the site...</a>
C. Linking to a lower directory
In Figure 20, we can see that design5.html is one
directory lower than home.html. To link to a lower
directory you have to give the browser directions by
including the path name in the URL.
If I want to make a link from my home page to
design5.html page the HTML would look like this:
Figure 20.
<li><a href=”projects/design5.html”>Design 5
project</a></li>
D. Linking to a higher directory
What about linking the other way around? Lets
make a link that would bring us from design4.html to
home page. To do that we would need to use “dot-
dot-slash” - browser would read it as “back up one
directory level”. The HTML would look like this:
<a href=”../home.html”>[Back to the home page]</a>
E. Linking to a specific point on a page
Linking to a spot within a page is a two-part
process: first, you identify the destination, then
you make a link to it.
Step 1. Identifying the destination.
I like to think of it as planting a flag in the docu-
ment so that I can easily come back to it. To cre-
ate a desitination, use the id attribute to give the
target element in the document a unique name
(name that appears only once). Example:
<h1 id=”startH”>H</h1>
Step 2. Linking to the destination.
With the identifier in place, now I can make a link
to it. To indicate that I’m linking to a fragment, I
use the octothorpe symbol (#) before the fragment
name:
<p>...<a href=”#startH”>H</a>...</p>
F. Mail/telephone links
By using mailto protocol in a link, you can allow
linking to an email address. When the user clicks
on a mailto link, the browser opens a new mail
message preaddressed to that address in a desig-
nated mail program. Here is an example:
<a href=”mailto:jsmith@example.com”>Contact
John Smith</a>
Telephone links.The syntax uses the tel: scheme
is very simple. It is especialy useful on mobile
devices. Example:
<a href=”tel:+17182605000”>Call us at (718) 260-
5000</a>
5. Tables, div, span
A. Tables
HTML tables were created for instances when you
<table> ...</table>

11. HTML l CSS l JS
11
need to add tabular material (data arranged into
rows and columns) to a web page. Tables may
be used to organize calendars, schedules, statistics,
or other types of information.
<tr> ...</tr>
<th> ...</th>
<td> ...</td>
- Table row
- Table header
- Table cell data
place inside those tags table cell data tags <td> and
</td>. We also declared table border size.
Figure 21.
Figure 22.
Figure 23.
Figure 24.
Figures 23 and 24 show how to add a header row to
a table.
Figure 25.
Figure 26.
To add a row that runs across all of the columns we
added colspan to the <th> tag, the number indicates
through how many columns should this row span.
(Figures 25 and 26).
In Figures 27 and 28 we added styling to some
elements.To style colspan simply add style right
after colspan=”2” inside the <th>...</th> tags.
(Figures 29, 30).
Figure 27.
Figure 28.
Figure 29.
Figure 30.
Figures 21 and 22 illustrate a simple table creation:
We enter first table row tags <tr> and </tr>, then
B. Division
One of the most versatile structure tags available
to you is the <div></div> tag. Short for “division,”
<div> allows you to divide your page into contain-
ers (that is, different pieces). This will come in
handy when you begin learning CSS in the Part ll:
you’ll be able to style different parts of your web-
site individually.
<div> ...</div>

12. HTML l CSS l JS
12
Figure 31.
Figure 32.
In Figures 31 and 32 we’ve created division groups,
each of them has a style with the only difference in
background color.
Figure 35.
C. Span
While <div> allows you to divide your webpage up
into pieces you can style individually, <span> allows
you to control styling for smaller parts of your page,
such as text. For example, if you always want the
first word of your paragraphs to be red, you can
wrap each first word in <span></span> tags and
make them red using CSS.
6. Adding images
A. Image formats
It is important to know that you can’t just put any
image on the web. In order to be displayed, images
must be GIF, JPEG or PNG file format. In addition
<span> ...</span>
to being in an appropriate format, image files need
to be named with the proper suffixes - .gif, .jpeg (or
.jpg), .png respectively - in order to be recognized
by the browser.
Providing the location with src.
The value of the src attribute is the URL of the
image file. To point an image that reside on your
server you will use relative URLs.
src=”URL”
<img src=”icon.gif’ alt=’’’’>
To place an image from other websites use
absolute URLs like this:
<img src=”http://cdni.condenast.co.uk/646x430/
a_c/catskillmountains_cnt_24nov09_iStock_b.jpg”
alt=””>
Figure 33.
Figure 34. Figure 36.
B. The img element
The img element tells the browser “place an image
here”. Figures 35 and 36 illustrate how to make an
image appear in the flow of the text:
<img>
Alt provides alternate text. (When browser for
some reason cannot display your image the site
user will be able to see the alternate text).
C. Width and height dimensions
width=”number px”
height=”number px”
The width and height attributes indicate the dimen-
sions of the image number of pixels. These at-
tributes can speed up the time it takes to load the
final page by seconds. This is great when you are
using one version of your website with one fixed
image size.
Adding and linking images:
<img src=”http://cdni.condenast.co.uk/646x430/
a_c/catskillmountains_cnt_24nov09_iStock_b.jpg”
alt=”mountain view” width=”400” height=”200”>

13. HTML l CSS l JS
13
7. Video & Audio
A. Adding a video to a page
Let’s look at an example first:
<video>...</video>
In the example above width and height attributes
specify the size of the box the embedded media
player takes up on the screen. It is the best to set
these dimentions to match exactly the pixel dimen-
sions of the movie. The movie will resize the match
the dimensions set here.
Poster provides the location of a still image to use
in place of the video before it plays.
Adding the controls attribute prompts the browser
to display its build-in media controls, generally a
play/pause button, a “seeker” that lets you move to
a position within the video, and volume controls.
Autoplay makes the video start playing
automaticcally once it has downloaded enough of
the media file to play through without stopping.
You can use WebM instead of of Ogg. As a fall-
back for users with browsers that don’t support
HTML5video, you can embed a Flash player on the
page or use a service like Youtube or Vimeo and let
them handle the conversion, and you just copy the
embed code.
In the markup, a series of source elements inside
the video element point to each video file. Browsers
look down the list untill they find one they support
and download only that version. The Flash fallback
gets added with the traditional object and embed el-
ements, so if a browser can’t make heads or tails of
video and source, chances are high it can play it in
<video src=”highlight_reel.mp4” width=”640”
height=”480”
poster=”highlight_still.jpg” controls autoplay>
</video>
Flash. The following example is based on the code
in Kroc Camen’s article “Video for Everybody”.
Each sourse element contains the location of the
media file (src) and information about its file type
(type). In addition to listing the MEME type of the file
container (e.g., video/ogg), it is helpful to also list
the codecs that were used. This is especially
important for MPEG-4 video because the H.264
codec has a number of different profiles, such as
baseline (used by mobile devices), main (used by
baseline (used by mobile devices), main (used by
desktop Safari and IE9+), extended, and high (these
two are generally not used for web video). Each
profile has its own profile ID.
Technically, the order of the source elements
doesn’t matter, but to compensate for a bug on early
IPads, it is best to place the baseline MPEG-4 first
in the list.
After the source elements, an object element is
used to embed a Flash player that will play the
MPEG-4 video for browsers that have the Flash
plug-in. There are many Flash players available, but
I recomment using JW Player, which is easy to in-
stall (just put a JavaScript .js file and the Flash .swf
file on your server). If you use JW Player, replace
your_flash_player.swf in the example with player.
swf.
<video id=”yourmovieid” width=”640” height=”360” controls>
<source src=”yourmovie-baseline.mp4” type=”video/mp4; codecs=”avc1.42E01E, mp4a.40.2” ‘/>
<source src=”yourmovie.ogv” type=”video/ogg”; codecs=”VP8, vorbis” ‘/>
<object width=”640” height=”360” type=”application/x-shockwave-flash” data=”your_flash_player.swf”>
<param name=”movie” value=”your_flash_player.swf” />
<param name=”flashvars” value=”controlbar=over&amp;image=poster.jpg&amp;file=video.mp4” />
<img src=”video.jpg” width=”640” height=”360” alt=”title”
title=”No video playback capabilities, please download the video below” />
</object>
</video>
<p> <strong>Download Video:</strong></p>
<ul>
<li><a href=”yourmovie.mp4”MPEG-4 format</a></li>
<li><a href=”yourmovie.ogv”>”Ogg format”</a></li>
</ul>
Tip: Single quotation marks (‘) were used to
enclose the long string of values for the type at-
tribute and the source element. That is because
the codecs must be enclosed in double quotation
marks, so the whole attribute requires a different
quotation makr type.
B. Adding audio to a page
The audio element uses the same attributes as
the video element, with the exception of width,
height, and poster (because there is nothing to
display). Here is an example:
<audio>...</audio>
<audio id=”soundtrack” controls preload=”auto”>
<source src=”soundtrack.mp3” type=”audio/mp3”>
<source src=”soundtrack.ogg” type=”audio/ogg”>
<source src=”soundtrack.webm” type=”audio/
webm”>
</audio>
<p><strong>Download Video:</strong></p>
<ul>
<li><a href=”yourmovie.mp4”MPEG-4
format</a></li>
<li><a href=”yourmovie.ogv”>”Ogg for-
mat”</a></li>
</ul>
One video format isn’t going to cut it in the real
world. At the very least, you need to make two
versions of your video: Ogg Theora and MPEG-4
(H.264 video).

14. Part ll: Cascading Style Sheets (CSS)

15. HTML l CSS l JS
15
1. Introduction to CSS
A. How style sheets work
The benefits of CSS:
• Precise type and layout controls
• Less work
• More accessible sites
• Reliable browser support
It is as easy as 1-2-3!
1. Start with a document that has been marked up in
HTML.
2. Write style rules for how you’d like certain ele-
ments to look.
3. Attach the style rules to the document. When the
browser displays the document, it follows your rules
for rendering elements (unless the user has applied
some mandatory styles)
1. Marking up the document
Having an understanding of your document’s
structure and the relationships between elements is
central to your work as a style sheet autor.
2. Writing the rules
The following example contain two rules. The first
makes all the h1 elements in the document green,
the second specifies that the paragraphs should be
in small, sans-serif font.
h1 { color: green;}
p {font-size: small; font-family: sans-serif;}
Selectors.
In CSS terminology, the two main sections of a
rule are the selector that identifies the element or
elements to be affected, and the declaration that
provides the rendering instructions. Here are a basic
rule parts:
selector { property: value; }
declaration
selector {
property1: value1;
property2: value2;
property3: value3;
}
declaration block
Declarations.
The declaration is madeup of a property/value pair.
There can be more than one declaration in a single
rule; for example, the rule for the p element shown
earlier in the code example has both the font-size
and font-family properties. Each declaration must
end with a semicolon to keep it separate from the
following declaration. The curly brackets and the
declarations they contain are often referred to as the
declaration block.
p {
font-size: small;
font-family: sans-serif;
}
Above is an example of a typical declaration. Values
are dependent on the property. Some properties
take length measurements, some take color val-
ues, and others have a predefined list of keywords.
When using a property, it is important to know which
values it accepts; however, in many cases, simple
common sense will serve you well.
B. Big concepts
Every HTML document has a structure (Figure 37.),
keep in mind that structure when applying CSS. For
example, when you write a font-related style rule the
p element as a selector, the rule applies to all of the
paragraphs in the document as well as the inline
text elements they contain. In figure 37 see how the
<em> elements inheriting the style properties ap-
plied to their parents p. Note that the <img> element
is excluded because font-related properties do not
apply to images.
Figure 37.
HTML
head
title style meta
body
h1 p h2 h2
p p p
em em em img
Tip: Some style sheets inherit and others do
not. In general, properties related to the styling
of text - font size, color, style, etc. - are passed
down. Properties such as borders, margins,
backgrounds, and so on that affect the boxes are
around the element tend not to be passed down.
C. Conflicting styles
CSS allows you to apply several style sheets
to the same document, which means there are
bound to be conflicts. The cascade refers to what
happens when several sources of style informa-
tion view to control of the elements on a page:
style information is passed down (“cascades
down”) until it is overridden by a style command
with more weight (See Figure 38.).
D. Rule order
Finally, if there are conflicts within style rules of
identical weight, whichever one comes last in the
list “wins”. Below is an example:
<style>
p { color: red; }
p { color: blue; }
p { color: green; }
<style/>
In this scenarion, paragraph text will be green be-
cause the last rule in the style sheet - that is, the

16. HTML l CSS l JS
16
one closest to the content in the document - over-
rides the earlier ones. The same thing happens
when conflicting styles occur within a single declara-
tion stack:
<style>
p { color: red;
color: blue;
color: green; }
<style/>
Style Sheet Hierarchy
(items lower in the list will override items above
them):
1. Browser default settings (“reader style sheet”)
2. Linked external style sheet (added with the link
element
3. Imported style sheets (added with the @import
function)
4. Embedded style sheets (added with the style
element)
5. Inline style information (added with the style at-
tribute in an opening tag)
6. Any style rule marked !important by the author
7. Any style rule marked !important by the reader
(user)
Figure 38.
E. The box model
The easiest way to think of the box model is that
browsers see everey element on the page (both
block and inline) as being contained in a little rect-
angular box. You can apply properties such as bor-
ders, margins, padding and backgrounds to these
boxes, and even reposition them on the page.
F. Grouped selectors
Here is a handy style rule shortcut. If you ever need
to apply the same style property to a number of ele-
ments, you can group the selectors into one rule by
separating them with commas.
h1, h2, p, em, img { border: 1px solid blue; }
2. Formatting text
A. Working with fonts
Font-related properties:
• font-family
• font-size
• font-weight
• font-style
• font-variant
• font
Use the property to specify a font
or list of fonts (known as a font stack) by name, as
shown in the example below.
font-family
body { font-family: Arial; }
var { font-family: Courier, monospace }
p { font-family: “Duru Sans”, Verdana, sans-serif; }
Remember these important requirements:
• All font names, with the exception of generic
font families, must be capitalized. (Example:
“Arial”)
• Use commas to separate multiple font names.
• Notice that font names that contain a charac-
ter space (such as Duru Sans in the example
above) must appear within quotation marks.
Example above also illustrates how to specify font
types in case web browser can’t find the original font
type that you specified. For the p part for the CSS
the browser will first look for Duru Sans font, then if
it cannot find it it will use Verdana, and so on.
Generic font families:
SERIF
FANTASY
Examples: Times, Times New Ro-
man, Georgia
Serif typeface has decorative slap-
like appendages (serifs) on the
ends of certain letter strokes.
MONOSPACE
CURSIVE
Examples: Arial, Arial Black, Ver-
dana, Helvetica, Geneva.
Sans-serif typeface have straight
letter strokes that do not end in
serifs.
Examples: Courier, Courier New,
Andale Mono.
In monospace, also called con-
stant width, typefaces all charac-
ters take up the same amount of
space in line.
Example: Apple chancery, Comic
Sans
Cursive fonts emulate a script or
handwritten appearance.
Example: Impact, Western.
Fantasy fonts are purely decora-
tive and would be appropriate for
headlines and other display type.
SANS-
SERIF
Tip: Remember, that you can always use free dis-
play fonts from Goggle Web Fonts (www.google.
com/webfonts) by using a link in your HTML (Ex-
ample below).
<head>
<title> Architecture portfolio </title>
<link href=”http://fonts.googleleapis.com/
css?family=Marco+One” rel=”stylesheet”>
</head>
B. Specifying font size
Use the font-size property to specify the size of
the text. There are several ways to specify text

17. 17
size of the text. Examples:
h1 { font-size: 1.5em; }
h1 { font-size: 150%; }
h1 { font-size: x-large; }
strong { font-size: larger; }
CSS units of measurement:
Figure 39.
- pixel (varies with display resolution)
- a unit of measurement equal to the
current font size
- x-height, approximately the height of
a lowercase “x” in the font
- root em, equal to the em size of the
root element (html)
- zero width, equal to the width of a
zero (0) in the current font and size
- viewport width unit, equal to 1/100 of
the current viewport (browser window)
- viewport height unit, equal to 1/100 of
the current viewport height
- viewport minimum unit, equal to the
value of vw or vh, whichever is smaller.
px
em
ex
rem
ch
vw
vh
vm
Figure 39 illustrates different units of measurements
available for CSS.
C. Working with keywords
The remaining way to specify font-size using is one
of the predefined absolute keywords:
xx-small,
x-small,
small,
medium,
large,
x-large,
xx-large.
These keywords do not correspond to particular
measurements, but rather are scaled consistently in
relation to one another. The default size is medium
in current browsers.
The relative keywords, larger and smaller, are used
to shift the size of text relative to the size of the par-
ent element text.
D. Font weight
Use the font-weight property to adjust the boldness
of type. You can use predefined values, including
descriptive terms:
normal,
bold,
bolder,
lighter.
Making text bold:
Use dt (definition term) element to make mul-
tiple items bold at once.
E. Font style (italics)
The font style property affects the posture of the
text - that is whether the letter shapes are verti-
cal (normal) or slanted (italic and oblique). Italic
and oblique are both slanted versions of the font.
The difference is that the italic version is usually a
separate typeface design with curved letter forms,
whereas oblique text takes the normal font design
and just slants it.
dt { font-weight: bold; }
strong { font-style: italic;}
HTML + CSS Basics
G. Selector Types
Element selector:
p { color: navy; }
Grouped selectors:
p, ul, p, td, th { color: navy; }
Descendant selectors:
A descendant selector targets elements that are
contained within (and therefore are descendants
of) another element. Descendant selectors are
indicated in a list separated by a character space.
This example targets emphasized text (em) ele-
ments, but only when they appear in list items (li).
Emphasized text in paragraphs and other ele-
ments would be unaffected. Example:
Here’s another example that shows how contex-
tual selectors can be grouped in a comma-sepa-
rated list, just as we saw earlier. This rule targets
em elements, but only when they appear in h1, h2,
and h3 headings. Example:
h1 em, h2 em, h3 em { color: red; }
li em { color: olive; }
Child selector:
A child selector is similar to a descendant selector,
but it targets only the direct children of a given ele-
ment. There may be no other hierarchical levels in
between. They are indicated with the greater-than
symbol (>). The following rule affects emphasized
text, but only when it is directly contained in a p
element. An em element inside a link (a) within the
paragraph would not be affected.
p > em {font-weight: bold;}
F. Changing Text Color
Using the color property is very straightforward.
The value of the color property can be a predefined
color name or a numeric value describing a specific
RGB color. Here are a few examples of different ap-
proaches/ways to make, all of which make the h1
h1 { color: gray; }
h1 { color: #666666; }
h1 { color: #666; }
h1 { color: rgb(102,102,102); }

18. HTML l CSS l JS
18
3. Colors and
backgrounds
A. Color names
For web we only going to use RGB colors (compos-
ite colors based on adding Red, Green and Blue to
create all other colors). Below are 17 basic colors that
you call call out by the name. Example: ).
color: silver;
Adjacent sibling selector:
An adjacent sibling selector targets an element that
comes directly after another element with the same
parent. It is indicated with a plus (+) sign. This rule
gives special treatment to paragraphs that follow an
h1. Other paragraphs are unaffected.
h1 + p {font-style: italic;}
H. Specificity 101
The term specificity, which refers to the fact that
more specific selectors have more weight when it
comes to handling style rule conflicts.
List of selector types from most to least specific:
• ID selectors are more specific than (and will over-
ride)
• Class selectors, which are more specific than (and
will override)
• Contextual selectors, which are more specific than
(and will override)
• Individual element selectors
I. Line height
The line-height property defines the minimum dis-
tance from baseline to baseline in text. Example:
p { line-height: 2; }
p { line-height: 2em; }
p { line-height: 200%; }
J. Horizontal alignment
You can align text for web pages just as you would
in a word processing or desktop publishing program
with the text-align property.
text-align: left - aligns text on the left margin
text-align: right - aligns text on the right margin
text-align: center - centers the text in the text block
text-align: justify - aligns text on both right and left
margins
K. Underlines and Other “Decorations”
If you want to put a line under, over, or through text,
or if you’d like to turn the underline off under links,
then text-decoration is the property for you.
text-decoration: underline - underlines the element
text-decoration: overline - draws a line over the text
text-decoration: line-through - draws a line through
the text
text-decoration: blink - makes text flash on and off
L. Spaced Out
The final two text properties in this chapter are used
to insert space between letters (letter-spacing) or
words (word-spacing) when the text is displayed.
Example:
p { letter-spacing: 8px; }
M. CSS Review: Font and Text Properties
Table 2. summarizes the properties used to format
text elements.
Property Description
font A shorthand property that com-
bines font properties
font-family Specifies a typeface or generic
font family
font-size The size of the font
font-style Specifies italic or oblique fonts
font-variant Specifies a small-caps font
font-weight Specifies the boldness of the
font
letter-spacing Inserts space between letters
line-height The distance between base-
lines of neighboring text lines
text-align The horizontal alignment of
text
text-decoration Underlines, overlines, and
lines through
text-direction Whether the text reads left-to-
right or right-to-left
text-indent Amount of indentation of the
first line in a block
text-shadow Adds a drop shadow under the
text
text-transform Changes the capitalization of
text when it displays
unicode-bidi Works with Unicode bidirec-
tional algorithms
vertical-align Adjusts the vertical position of
inline elements relative
to the baseline
visibility Whether the element is ren-
dered or is invisible
white-space How whitespace in the source
is displayed
word-spacing Inserts space between words
Table 2.
Specifying Color Values
Color names
The most intuitive way to specify a color is to call it by name. Unfortunately,
you can’t make up just any color name and expect it to work. It has to be
one of the color keywords predefined in the CSS Recommendation. CSS1
and CSS2 adopted the 16 standard color names originally introduced in
HTML 4.01. CSS2.1 tossed in orange for a total of 17 (Figure 13-1). CSS3
adds support for the extended set of 140 (rather fanciful) color names. Now
we can specify names like “burlywood” and my long-time favorite, “papay-
awhip”! The extended colors are shown in (Figure 13-2), but if you want
a more accurate view, point your browser at www.learningwebdesign.com/
colornames.html.
Black
#000000
Gray
#808080
Silver
#C0C0C0
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
NOTE
The extended color names, also known
as the X11 color names, were originally
provided with the X Window System
for Unix.

19. HTML l CSS l JS
19
Figure 40.
Exercise 7:
Got ahead and plug in similar HTML and CSS into
Jsbin webpage (Jsbin.com). Change the text, border
size, color and background. Use Figure 40. as an
example.
B. Opacity
To assign a valu to opacity use opacity property.
h1 {color: blue; background: white; opacity: .25;}
C. First letter and line
Use these properties to change style of a first letter
and a first line in a paragraph:
:first-line
:first-letter
Example of chaging style of a first letter: Figure 41.
Figure 41.
p:first-line {letter-spacing: 8px;}
Following is an example of changing CSS of a first
line of a paragraph.
Here is another example of how to change style of
a part of a paragraph (Figure 42.):
Figure 42.
D. Background images
Use a single rule to set up background properties:
body {
background-color: white;
background-image: url(place your url here);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
All of the property values for background are
optional and may appear in any order. The only
restriction is that when providing the coordinates
for the background-position property, the horizon-
tal value must appear first, immediately followed
by the vertical value. Be aware that if a value is
omitted, it will be reset to its default.
tion
a more accurate view, point your browser at www.learningwebdesign.com/
colornames.html.
Black
#000000
Gray
#808080
Silver
#C0C0C0
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#0000FF
Orange (CSS2.1)
#FFA500
Figure 13-1. The 17 standard color names in CSS2.1.
Color names are easy to use—just drop one into place as the value for any
color-related property:
color: silver;
background-color: gray;
border-bottom-color: teal;
www.it-ebooks.info
III, CSS for Presentation
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#0000FF
Orange (CSS2.1)
#FFA500
Figure 13-1. The 17 standard color names in CSS2.1.
Color names are easy to use—just drop one into place as the value for any
color-related property:
color: silver;
background-color: gray;
border-bottom-color: teal;
www.it-ebooks.info
Part III, CSS for Presentation
266
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#0000FF
Orange (CSS2.1)
#FFA500
Figure 13-1. The 17 standard color names in CSS2.1.
Color names are easy to use—just drop one into place as the value for any
color-related property:
color: silver;
background-color: gray;
border-bottom-color: teal;
www.it-ebooks.info
You can use this link to access a full range color
generator: http://paletton.com
on
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#0000FF
Orange (CSS2.1)
#FFA500
Figure 13-1. The 17 standard color names in CSS2.1.
Color names are easy to use—just drop one into place as the value for any
color-related property:
color: silver;
background-color: gray;
border-bottom-color: teal;
www.it-ebooks.info
Ways to specify background-position:

20. HTML l CSS l JS
20
Usinng the link element.
The best-supported method is to create a link to the
.css document using the link element in the head of
the document, as shown here:
<head>
<title>Titles are required.</title>
<link rel=”stylesheet” href=”/path/stylesheet.
css”>
</head>
Use href attribute to provide the location of the .css
file.
You can include multiple link elements to different
style sheets and they’ll all apply. If there are con-
flicts, whichever one is listed last will override previ-
ous settings, due to the rule order and the cascade.
Importing with @import:
<head>
<style>
@import url(“/path/stylesheet.css”);
p { font-face: Verdana;}
</style>
<title>Titles are required.</title>
</head>
Property Description
background A shorthand property that
combines background prop-
erties
background-attach-
ment
Specifies whether the back-
ground image scrolls or is
fixed
background-clip Specifies how far the back-
ground image should extend
background-color Specifies the background
color for an element
background-image Provides the location of an
image to use as a back-
ground
background-origin Determines how the back-
ground-position is calculated
(from edge of border, pad-
ding, or content box)
background-posi-
tion
Specifies the location of the
origin background image
background-repeat Whether and how a back-
ground image repeats (tiles)
background-size Specifies the size of the
background image
color Specifies the foreground
(text and border) color
opacity Specifies the transparency
level of the foreground and
background
E. External style sheets
External style sheets are by far the most power-
ful way to use CSS because you can make style
changes across an entire site simply by editing
a single style sheet document. That is the ad-
vantage to having all the style information in one
place, and not mixed in with the document source.
An external style sheet is a plain-text document
with at least one style sheet rule. The style sheet
should be named with the .css suffix. There are
two ways to refer to an external style sheet: the
link element and an @import rule. Let’s look at
both of these attachment methods.
Ways to specify background-attachement:
background-attachement: fixed;
background-attachement: scroll;
Table 3.
Table 3. is a summary of the properties covered in
this chapter, in alphabetical order.
background-position: right top;
background-position: right bottom;
background-position: left 50%;
background-position: center 100px;
4. Thinking inside a box
A. The elemental box
Figure 43. is a diagram of an elemental box of an
HTML document.
Figure 43.
Content area - content itself.
Inner edge - the edge of the content area are typi-
cally invisible.
Padding - the border is a line (or stylized line) that
surrounds the element and its padding. Borders
are also optional.
Margin - the margin is an optional amount of
space added on the outside of the border. Margins
are always transparent, allowing the background
of the parent element to show through.
Outer edge - the outside edges of the margin area
make up the outer edges of the element box. This
is the total area the element takes up on the page,
and it includes the width of the content area plus
the total amount of padding, border, and margins
applied to the element. The outside edges are
usually invisible.
B. Specifying box dimensions
Figure 44. is an example of how to specify all the
values of a box. Go ahead an plug in the same
CSS into Jsbin (Jsbin.com).
outer edge border inner edge
padding area
content area
margin area

21. HTML l CSS l JS
21
Figure 44.
height
=
150
px
width = 200 px
Lets count the width of the resulting visible box:
20px + 2px + 20px + 200px width + 20px + 2px +
20px = 284 pixels.
You can also give your box a specific size (including
padding and border) by using the border-box model.
p {
background: #c2f670;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 500px;
height: 150px;
}
Handling overflow.
When an element is set to a size that is too small
for its contents, it is possible to specify what to do
with the content that doesn’t fit, using the overflow
property.
Examples:
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: inherit;
Exercise 8:
Type a long paragraph and specify small box size,
then try plugging in different overflow property val-
ues introduced in the example above.
C. Padding
Padding is the space between the content area and
the border (or the place the border would be if one
isn’t specified). I find it helpful to add padding to ele-
ments when using a background color or a border.
It gives the content a little breathing room, and
prevents the border or edge of the background from
bumping right up against the text.
Here is an example of how to specify padding val-
ues:
blockquote {
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 3em;
background-color: #D098D4;
}
There is also a shortcut to it. When you supply four
padding values, they are applied to each side in
clockwise order, starting at the top. Here is an ex-
ample:
blockquote {
padding: 1em 3em 1em 3em;
background-color: #D098D4;
}
Tip: Shorthand Values.
1 value
padding: 10px; - Applied to all sides.
2 values
padding: 10px 6px; - First is top and bottom;
Second is left and right.
3 values
padding: 10px 6px 4px; - First is top;
Second is left and right; Third is bottom.
4 values
padding: 10px 6px 4px 10px; - Applied clockwise
to top, right, bottom, and left edges consecutively.
D. Border styles
Using a border-style (border-top-style, border-
right-style, border-bottom-style, border-left-style)
property you can assign different styles to a bor-
der. Below is a list of border values you would use
for that (you would use one of them at once):
blockquote {
border-top-style: none;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;
border-top-style: inherit;
}
You can also specify border color by using

22. HTML l CSS l JS
22
border-width property (border-top-color, border-right-
color, border-bottom-color, border-left-color).
To assign thickness of a border use border-width
property (border-top-width, border-right-width,
border-bottom-width, border-left-width).
E. Margin behavior
The most significant margin behavior to be aware
of is that the top and bottom margins of neighboring
elements collapse. This means that instead of
accumulating, adjacent margins overlap, and only
the largest value will be used.
F. Assigning display roles
The display property defines the type of element
box an element generates in the layout. In addition
to the familiar inline and block display roles, you can
also make elements display as list items or the vari-
ous parts of a table.
Here is a list of values that you can assign to the
display property:
inline
block
list-item
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
none
run-in
compact
ruby
ruby-base
ruby-text
ruby-base-container
ruby-text-container
5. Floating and positioning
Floating an element moves it to the left or right, and
allows the following text to wrap around it. Position-
ing is a way to specify the location of an element
anywhere on the page with pixel precision.
Here is how you would assign float property value
and give it a margin so that it doesn’t bump right
agains another element:
img {
float: right;
margin: 10px;
}
Floating block elements.
Let’s look at what happens when you float a block
within the normal flow. In the example below (Figure
Figure 45.
Tip: Rememeber that elements do not float higher
than their reference in the source. If you’re go-
ing to be floating elements around, it’s important
to know how to turn the text wrapping off and get
back to layout as usual. This is done by clearing
the element that you want to start below the float
(see example below).
img {
float: left;
margin-right: 10px;
}
h2 {
clear: left;
margin-top: 2em;
}
B. Floating
Simply stated, the float property moves an element
as far as possible to the left or right, allowing the fol-
lowing content to wrap around it.
Values:
left
right
none
inherit
A. Normal flow
Objects in the normal flow affect the layout of the
objects around them. This is the behavior you’ve
come to expect in web pages—elements don’t over-
lap or bunch up. They make room for one another.
We’ve seen all of this before, but in this chapter
we’ll be paying attention to whether elements are
in the flow or removed from the flow. Floating and
positioning change the relationship of elements to
the normal flow in different ways. Let’s first look at
the special behavior of floated elements (or “floats”
for short).
45), a whole paragraph element is floated to the
left.

23. HTML l CSS l JS
23
Figure 47.
C. Floating multiple elements
Floating multiple elements is the only way to turn a
list of links into a horizontal menu. Figure 46. shows
what happens when a series of sequential para-
graphs are floated to the same side. The first three
floats start stacking up from the left edge, but when
there isn’t enough room for the fourth, it moves
down and to the left until it bumps into something—
in this case, the edge of the browser window.
Figure 46.
a web page. As you know, web pages appear on
browsers of all sizes, from tiny phone screens
to cinema displays. In addition, users can resize
their text, which has an impact on the layout of the
page. Over time, several standard page layout ap-
proaches have emerged that address these issues
in various ways:
• Fixed layouts stay put at a specific pixel width
regardless of the size of the browser window or
text size.
• Fluid (or liquid) layouts resize proportionally
when the browser window resizes.
• Elastic layouts resize proportionally based on
the size of the text.
• Hybrid layouts combine fixed and scalable
areas.
6. Page layout
A. Strategies
let’s talk about the various options for structuring a
CSS treats each HTML element as if it is in its own
box. This box will either be a block-level box or an
inline box. Below (Figure 47) is an example of a
block-level elements - Every element starts on a
new line. Block-level boxes start on a new line and
act as the main building blocks of any layout, while
inline boxes flow between surrounding text. You
can control how much space each box takes up by
setting the width of the boxes (and sometimes the
height, too). To separate boxes, you can use bor-
ders, margins, padding, and background colors.
Containing elements. If one block-level element
sits inside another block-level element then the
outer box is known as the containing or parent ele-
ment. See example in Figure 49.
Inline elements flow between surrounding text.
(See example below - Figure 48).
Figure 48.
Figure 49.
The orange lines in this diagram represent <div>
elements. The header (containing the logo and
navigation) are in one <div> element, the main
content of the page is in another, and the footer
is in a third. The <body> element is the contain-
ing element for these three <div> elements. The
second <div> element is the containing element
for two paragraphs of Latin text and images (rep-
resented by crossed squares).

24. HTML l CSS l JS
24
B. Controlling the position of elements
CSS has 3 positioning schemes that allow you to
control the layout of the page: normal flow, relative
positioning, and absolute positioning. To specify
the positioning scheme you would use the position
property in CSS. Example:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Let’s look at the examples of different schemes.
Normal flow.
Every block-level element appears on a new line,
causing each item to appear lower down the page
than the previous one. Even if you specify the width
of the boxes and there is space for two elements to
sit side-by-side, they will not appear next to each
other. This is the default behavior, unless you tell the
browser to do something else. (Figure 50).
Figure 50.
Relative Positioning.
This moves an element from the position it would be
in normal flow, shifting it to the top, right, bottom, or
left of where it would have been placed. This does
not affect the position of surrounding elements; they
stay in the position they would be in in normal flow.
(Figure 51).
Figure 51.
Absolute positioning.
This positions the element in relation to its contain-
ing element. It is taken out of normal flow, meaning
that it does not affect the position of any surrounding
elements (as they simply ignore the space it would
have taken up). Absolutely positioned elements
move as users scroll up and down the page. (Fig-
ure 52).
Figure 52.
Figure 53.
When you move any element from normal flow,
boxes can overlap. The z-index property allows
you to control which box appears on top. For ex-
ample, an element with a z-index of 10 will appear
over the top of one with a z-index of 5. Example:
h1 {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
width: 100%;
background-color: #efefef;
z-index: 10;}
Fixed Positioning.
This is a form of absolute positioning that positions
the element in relation to the browser window,
as opposed to the containing element. Elements
with fixed positioning do not affect the position of
surrounding elements and they do not move when
the user scrolls up or down the page. (Figure 53).

25. HTML l CSS l JS
25
C. Containing blocks
If the positioned element is not contained within
another positioned element, then it will be placed
relative to the initial containing block (created by the
html element).
But if the element has an ancestor (i.e., is contained
within an element) that has its position set to rela-
tive, absolute, or fixed, the element will be posi-
tioned relative to the edges of that element instead.
If, for example, we want to turn the p element into a
containing block, all we would have to do is apply
the position property to it; we don’t have to actually
move it. The most common way to make an element
into a containing block is to set the position to rela-
tive, but don’t move it with offset values. Example
below:
p {
position: relative;
padding: 15px;
background-color: #DBFDBA;
border: 2px solid #6C4788;
}
#wrapper {width: 750px;
position: absolute;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
padding: 0px;}
#extras {position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: orange; }
#main {margin-left: 225px;
background-color: yellow;}
img#A {
position: absolute;
top: 50%;
left: 0%; /* the % symbol could be omitted for a 0
value */
}
div#a {
position: relative; /* creates the containing block */
height: 120px;
width: 300px;
border: 1px solid;
background-color: #CCC;
}
div#b {
position: absolute;
top: 20px;
right: 30px;
bottom: 40px;
left: 50px;
border: 1px solid;
background-color: teal;
}
D. Specifying position
Pixel measurements.
As mentioned previously, positive offset values push
the positioned element box away from the specified
edge and toward the center of the containing block.
If there is no value provided for a side, it is set to
auto, and the browser adds enough space to make
the layout work. In this example, I’ve used pixel
lengths for all four offset properties to place the po-
sitioned element at a particular spot in its containing
element. See the following example (Figure 54).
Figure 54.
Figure 55.
You can also do the same by spicifying a percent-
age value. For example (Figure 55):
E. Fixed layout
Fixed layouts, as the name implies, are created at a
specific pixel width as determined by the designer.
Akin to print, they allow the designer to control the
relationship of page elements, alignment, and line
lengths.
When you design a page to be a specific width,
you need to decide a couple of things:
1. You need to pick the width, usually based
on common monitor resolutions. Most sites are
designed to be 960 pixels - to fit nicely in the most
common 1024px × 768px monitor resolution.
2. You also need to decide where the fixed-width
layout should be positioned in the browser win-
dow. By default, it stays on the left edge of the
browser, with the extra space to the right of it. You
can also center the page, splitting the extra space
over left and right margins, which may make the
page look as though it better fills the browser win-
dow. One of the main concerns with using fixed
layouts is that if the user’s browser window is not
as wide as the page, the content on the right edge
of the page will be hidden. Although it is possible
to scroll horizontally, it may not always be clear
that there is more content there in the first place.
In addition, although the structure of the page
doesn’t change, if a user has text set to a very
large size to make it easier to read, there may be
very few words on a line and the layout may look
awkward or break altogether. Below is an example
of a fixed layout CSS and a snapshot of how
would that look in a browser wondow (Figure 56).

26. HTML l CSS l JS
26
Figure 56.
Figure 57.
Let’s review pros and cons of the fixed layout.
Advantages:
• The layout is predictable and offers better con-
trol over line length.
• It is easier to design and produce.
• It behaves the way the majority of web pages
behave as of this writing, but that may change
as users visit the web primarily on devices other
than the desktop.
Disadvantages.
• Content on the right edge will be hidden if the
browser window is smaller than the page.
• There may be an awkward amount of left over
space on large screens.
• Line lengths may grow awkwardly short at very
large text sizes.
• Takes control away from the user.
How to create fixed-width layouts:
Fixed-width layouts are created by specifying width
values in pixel units. Typically, the content of the
entire page is put into a div (often named “content,”
“container,” “wrapper,” or “page”) that can then be
set to a specific pixel width. This div may also be
centered in the browser window. Widths of column
elements, and even margins and padding, are also
specified in pixels.
F. Fluid page design
In fluid page layouts (also called liquid layouts), the
page area and columns within the page get wider or
narrower to fill the available space in the browser
window. In other words, they follow the default
behavior of the normal flow. There is no attempt
to control the width of the content or line breaks;
the text is permitted to reflow as required and as is
natural to the medium. W3.org is an example of a
liquid layout. See Figure 57.
You can see in Figure 57 how content of each
element changes with the changing width of the
browser window.
Fluid layouts are a cornerstone of the responsive
web design technique. Now that web designers
are coming to terms with the vast variety of brows-
er window and screen sizes, particularly those
smaller than the traditional desktop monitor, many
are moving to designs that flex to fill the browser
width, whatever that might be. Because it is futile
to try to build a fixed-width design for every screen
size, I think fluid layouts will see a resurgence.
Let’s look at advantages and disadvantages of a
fluid layout:
Advantages:
• Fluid layouts keep with the spirit and nature of
the medium.
• They avoid potentially awkward empty space
because the text fills the window.
• On desktop browsers, users can control the
width of the window and content.
• No horizontal scrollbars.
Disadvantages:
• On large monitors, line lengths can get very
long and uncomfortable to read.
• They are less predictable.
• Elements may be too spread out or too
cramped at extreme browser dimensions.
• It may be more difficult to achieve whitespace.
• There is more math involved in calculating
measurements.
How to create fluid layout:
Create a fluid layout by specifying widths in
percentage values. You may also simply omit the
width attribute, in which case the width will be
set to the default auto setting and the element
will fill the available width of the window or other
containing element. In the example in Figure 58.
two-column layout, the width of each div has been
specified as a percentage of the available page

27. HTML l CSS l JS
27
width.
Figure 58.
Figure 59.
G. Elastic layout
A third layout approach marries resizable text with
predictable line lengths. Elastic layouts expand or
contract with the size of the text. If the user makes
the text larger, the box that contains it expands pro-
portionally. Likewise, if the user likes her text size
very small, the containing box shrinks to fit. The
result is that line lengths (in terms of words or char-
acters per line) stay the same regardless of the text
size. This is an advantage over liquid layouts, where
line lengths can get too long, and fixed layouts,
where very large text may result in awkwardly few
characters per line. Figure 59 shows the Elastic
Lawn design by Patrick Griffiths at CSS Zen Garden
(http://www.csszengarden.com/063/), an oldie-but-
goodie for showing elastic layout at work.
The full-page zoom feature offered by most cur-
rent browsers has stolen some of elastic design’s
thunder. Now, all web pages appear to scale up
proportionally, but elastic layouts can still address
issues caused by users making changes to their
default browser font size.
Advantages:
• Provides a consistent layout experience while
allowing flexibility in text size.
• Tighter control over line lengths than liquid
and fixed layouts.
Disadvantages.
• Images and videos don’t lend themselves to
automatic rescaling along with the text and
the rest of the layout (but there are methods to
achieve this).
• The width of the layout might exceed the width
of the browser window at largest text sizes.
• Not as useful for addressing device and
browser size variety.
• More complicated to create than fixed-width
layouts.
How to create elastic layouts:
The key to elastic layouts is the em, the unit of
measurement that is based on the size of the text.
For example, for an element with 16-pixel text,
an em is 16 pixels. It is common to specify font-
size in ems. In elastic layouts, the dimensions of
containing elements are specified in ems as well.
That is how the widths can respond to the text
size. For example, if the body text size is set to
16 pixels (the default size on most browsers), and
the page is set to 40em, the resulting page width
would be 640 pixels (40em x 16px/em). If the user
resizes the text up to 20 pixels, the page grows to
800 pixels.
H. Hybrid layout
Layouts that use a combination of pixel, percent-
age, and em measurements are sometimes called

28. HTML l CSS l JS
28
hybrid layouts. In many scenarios, it makes sense to
mix fixed and scalable content areas. For example,
you might have a sidebar that contains a stack of ad
banners that must stay a particular size. You could
specify that sidebar at a particular pixel width and
allow the column next to it to resize to fill the remain-
ing space.
I. Multicolumn Layout Using Floats
Floats are the primary tool for creating columns on
web pages. As a tool, it is flawed, but it’s the best
that we’ve got as of this writing. The advantages
that floats have over absolute positioning for layout
are that they prevent content from overlapping other
content, and they make it easier to keep footer con-
tent at the bottom of the page. The drawback is
that they are dependent on the order in which the
elements appear in the source, although there is a
workaround using negative margins, as we’ll see
later in this section.
7. Transitions,
transforms, animations
A. CSS transitions
Picture in your mind, if you will, a link in a naviga-
tion menu that changes from blue to red when the
mouse hovers over it. The background is blue…
mouse passes over it…BAM! Red! It goes from
state to state instantly, with no states in between.
Now imagine putting your mouse over the link and
the background gradually changes from blue to red,
passing through several shades of purple on the
way. It’s smoooooth. And when you remove the
mouse, it fades back down to blue again. That’s
what CSS Transitions do. They smooth out other-
wise abrupt changes from state to state over time by
filling in the frames in between. Animators call that
tweening.
B. Transitions basics
Transitions are a lot of fun, so let’s give them a
whirl. When applying a transition, there are a few
decisions to make, each of which is set with a CSS
property:
• Which CSS property to change (transition-
property)
• How long it should take (transition-duration)
• The manner in which the transition accelerates
(transition-timingfunction)
• Whether there should be a pause before it starts
(transition-delay)
•
You also need something to trigger the transition.
A state change such as :hover, :focus, or :active
makes a good trigger, and that’s what we’ll be us-
ing for the examples in this chapter. You could use
JavaScript to change the element (such as adding
a class attribute) and use that as a transition trigger
as well.
Here is an example markup and the CSS.
The markup:
<a href=”” class=”smooth”>awesomesauce</a>
a.smooth {
display: block;
text-decoration:none;
text-align: center;
padding: 1em 2em;
width: 10em;
border-radius: 1.5em;
color: #fff;
background-color: mediumblue;
transition-property: background-color;
transition-duration: 0.3s;
}
a.smooth:hover, a.smooth:focus {
background-color: red;
}
The CSS:
Diagram on Figure 60 illustrates how the back-
ground color of a link gradually fades from blue to
red when a transition is applied.
Figure 60.

29. Appendix A:
Graphics

30. HTML l CSS l JS
34
A. Image formats
Once you have your hands on some images, you
need to get them into a format that will work on a
web page. There are dozens of graphics file formats
out in the world. Only use JPEG, GIF and PNG-8
file formats. Never use PNG because it can bloat
your files sizes by 5-10 times. Prepare your images
in Photoshop to be exact size and resolution (i.e.
500x350px at 100ppi).

31. HTML l CSS l JS
35
References:
1. Niederst Robbins, Jennifer. Learning Web Design.
Sebastopol: O’Reilly Media, 2012. Print.
2. Duckett, Jon. HTML & CSS Design and Build Websites.
Indiapolis, John Wiley & Sons, Inc., 2011. Print.
3. CodeAcademy.com and JSbin.com