94% found this document useful (17 votes)

5K views

HTML5 & CSS3 The Complete Manual 2014

HTML

Uploaded by

George-Alexandru Ioana

Available Formats

Download as PDF, TXT or read online on Scribd

94% found this document useful (17 votes)

5K views

HTML5 & CSS3 The Complete Manual 2014

HTML

Uploaded by

George-Alexandru Ioana

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 132

NE

HTML5
& CSS3
The Complete Manual

The essential handbook for web designers

WorldMags.net

Welcome to

HTML5
& CSS3
The Complete Manual

HTML5 & CSS3 were first implemented in 2012.

Since then, web design has excelled, becoming
an art form that almost seems like technical
wizardry. In fact, all of these sites has been created
using the written craft of HTML and CSS, with the
added help of Javascript and jQuery. In this book
we aim to take you from the early stages of web
design, all the way to adding responsive elements
to your website with the use of brilliant tools such
as Bootstrap and Foundation. In no time, youll be
creating web wizardry yourself, so lets get started.

WorldMags.net

HTML5
& CSS3

The Complete Manual

Imagine Publishing Ltd
Richmond House
33 Richmond Hill
Bournemouth
Dorset BH2 6EZ
+44 (0) 1202 586200
Website: www.imagine-publishing.co.uk
Twitter: @Books_Imagine
Facebook: www.facebook.com/ImagineBookazines

Publishing Director
Aaron Asadi
Head of Design
Ross Andrews
Production Editor
Jen Neal
Senior Art Editor
Greg Whitaker
Designer
Perry Wardell-Wicks
Photographer
James Sheppard
Printed by
William Gibbons, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT
Distributed in the UK, Eire & the Rest of the World by
Marketforce, Blue Fin Building, 110 Southwark Street, London, SE1 0SU
Tel 0203 148 3300, www.marketforce.co.uk
Distributed in Australia by
Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street, Sydney, New South
Wales 2000, Australia, Tel +61 2 8667 5288
Disclaimer
The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is
the copyright of Imagine Publishing Ltd. Nothing in this bookazine may be reproduced in whole or part without the written
permission of the publisher. All copyrights are recognised and used specifically for the purpose of criticism and review.
Although the bookazine has endeavoured to ensure all information is correct at time of print, prices and availability
may change. This bookazine is fully independent and not affiliated in any way with the companies mentioned herein.
HTML5 & CSS3 The Complete Manual 2014 Imagine Publishing Ltd
ISBN 9781910439418

Part of the

bookazine series

WorldMags.net

WorldMags.net
Contents
What you can find inside the bookazine
Style. CSS

Introducing HTML

Introducing CSS

An introduction
to HTML
Get to know HTML5

An introduction to CSS
Customise with CSS

HTML glossary
Learn the basic terms

Styling with CSS

Get to know CSS terms

Create a basic layout

Get started with design

22
23

Add a background
image
Add photos and images

Style a two-column
layout
Create your own layout

Create a header
Code yourself a header

Code a link
Add links to your site

Create a list
Use <ul> and <ol> tags

Centre your page

Change the position

Create a sidebar
Add a sidebar to your site

Define body and

heading styles
Add CSS styling

Add content to your

website
Fill up your website pages

Style lists with CSS

Change the appearance

Add content to your footer

Create your sites footer

Turn lists into

navigation bars
Make your list navigate

Format images
using CSS
Edit where your images
sit on the page

All about div tags

Contain your content

Create a three-column
layout
Make a different layout

WorldMags.net

Create
your ow
websiten

Responsive design
74

Introduction to
Responsive Web Design
Understand what makes
a responsive design

106 Make a responsive menu

for a retina screen
Get device ready

Reference
124 Useful resources
Find everything you
need online

Bootstrap
Responsive design
made easy
112 Techniques for creating
responsive typography
Get to know online font
systems

Build a custom
Foundation template
Make your own
responsive design

118 Create a HTML5

responsive video player
Go beyond simply
embedding videos

126 Useful tools

Get fonts, codes and
other useful tools online

100 Build a responsive

WordPress theme
Create your own
WordPress theme
7

WorldMags.net

An introduction to HTML
WorldMags.net

Introducing HTML

WorldMags.net

An introduction to HTML
Introducing HTML
WorldMags.net

An introduction to HTML
HyperText Markup Language, more commonly know as HTML, is the basic
building block of the web. It provides the structure, content and connection
between pages, allowing web designers to create interactive experiences.
Easy to learn, it offers limitless possibilities
The majority of web pages are made up of one or more files that
are downloaded to a computer, which in turn are interpreted by a
web browser and finally rendered out to screen. At its simplest, a
web page is a plain text file that contains special instructions about
what kind of content is contained within. These instructions are
written in HTML the language used on the world wide web.
HTML, or HyperText Markup Language to give it the full name,
is the core building block of a web page. HTML is a markup-based,
human-readable language thats designed to be simple to write,
and easy to understand. A markup language is one where bits
of data are literally marked as being of a particular type. So, for
example, a piece of data that you want to render as a paragraph
would be marked up with a paragraph marker.

Marking up
Markers are referred to as tags, and they have less-than and greaterthan symbols around them. This paragraph would be marked
up with a <p> tag at the start to denote a paragraph, and a
matching </p> tag at the end to signify the end of the paragraph.
HTML offers many tags for marking up content, and browsers are
programmed to interpret these tags, formatting the contents of
each tag according to a set of preset rules. This allows the <strong>
tag to render text in bold, and the <em> (for emphasis) tag to
render in italics. One of the major benefits of this system of marking
up content is that its easy to read you dont need any special
software to either write or read HTML documents, as theyre just
plain text. This makes it easy to create a functioning web page using
nothing more complex than a text editor.
9

WorldMags.net

An introduction to HTML
WorldMags.net

Introducing HTML

What exactly is HyperText?

Why is the language called HyperText Markup? Because the key
thing that makes the World Wide Web a web, rather than a series of
disconnected pockets of content, is the ability to link one document
to another these links are HyperText because clicking on them
takes you somewhere else in the vast web of pages! As well as a
basic HTML (text) document, web pages can call in external files
(or assets) that include stylesheets, images, audio files, video, flash
and scripts. The web browser looks at the HTML document when it
downloads it, and looks for any external files that are called into the
<right> All websites are built using HTML,
CSS and JavaScript

<right> The simple, user-friendly Calendar

app interface actually works well for
complex agenda management

Above Find a domain name to create an identity for your blog

WorldMags.net

An introduction to HTML
Introducing HTML
WorldMags.net

What is HTML5?
The first requirement of any WordPress installation is the
need for web space. There are thousands of web hosting
companies who will happily supply space for a small
fee. However, to determine what sort of web hosting
package is needed the user needs to decide how much
web space is needed and how much traffic is expected.
Users can get 200MB of web space and gigabytes of
traffic for a very small fee. But if more space is likely to be
needed, ie a photo blog, go for more. Dont worry too
much about traffic to start with. New sites are not likely
to get huge amounts of traffic immediately and this can
be changed at a later date very quickly and easily.
A small UK company that provides cheap and efficient
hosting is Z-Host (www.z-host.co.uk). It provides
packages from as little as 15 a year (100MB of web
space and 10GB of monthly traffic), perfect for first time
bloggers. Alternatively, choose 1GB of web space and
40GB of monthly traffic for 60 a year. At the other end
of the scale there is a popular choice with web designer
Media Temple (www.mediatemple.net). This offers

packages from $20 a month (approx 15) but offers

gigabytes of storage and 1TB network transfer rates.
Other reputable web hosts to consider are Fasthosts
(www.fasthosts.co.uk), 1&1 (www.1and1.co.uk) and
Heart Internet (www.heartinternet.co.uk). Once a
package has been bought and paid for the web host will
send all the details (username, passwords etc) needed to
take control of the web space.
To host a WordPress blog at a desired URL, ie
mywebsite.co.uk, a domain name needs to be
purchased. Try www.123-reg.co.uk, this offers .co.uk
domain names from 2.99 a year and .com domain
names from 9.99 a year. Another well-respected domain
name supplier is Easily (www.easily.co.uk).
If the prospect of finding web space and getting a
domain name seems too much like hard work, there is
the hosted option. Go to www.wordpress.com, click
Sign Up Now and all thats needed is an email address.
This gives a new user a unique WordPress URL, ie
myname.wordpress.com and hosts the account.

WorldMags.net

An introduction to HTML
WorldMags.net

Introducing HTML

<right> Once you know HTML you can

create both websites and web apps for the
likes of iPhone, Android and even Facebook!

Every web browser only has to support

one kind of page structural language,
which is easier for web designers

<right> Apples website typifies what can

be achieved with just HTML and some
scripts and styles

WorldMags.net

An introduction to HTML
Introducing HTML
WorldMags.net
page. If it finds any files called in, the browser will send a message
back to the web server asking for those files. The final result you see
in your web browser window may be the result of more than 20
individual files, brought together by the web browser and rendered
as a single web page!

Recognising an HTML document

Youll notice as you browse around the web that different pages
have different names, and more importantly they have different
extensions at the end of the filename. Some end with .htm or .html,
which are obviously HTML documents, but others might end with
.cfm, .php, .asp or .aspx. What are these file types?
As far as the web browser is concerned, theyre just normal
HTML documents like every other on the web. What these different
extensions signify is that some sort of processing has happened on
the server before the page was sent to your browser, allowing the
website to generate some unique-to-you content.
All the examples weve noted above have similar characteristics.
Theyre scripts, or small computer programs, that run on the server

HTML & mobile browsing

When you access the web from your mobile phone or tablet, youll often
notice special pages that have been formatted especially for these
devices, rather than the full desktop version of a website. You might
have wondered whether these pages use a special language especially
for mobile devices? The good news is that, just like the rest of the web, they
use standard HTML. The only real difference between a page optimised
for a mobile device and one orientated towards a desktop computer is the
CSS styles that have been applied. The content, and often the structure, of
the page remains plain HTML and theres no need to learn special skills or
additional languages to be able to create sites that on these devices. Thats
not to say that you shouldnt consider how your users are accessing the
web page and what information they might need!
Typically, a mobile-optimised website will be presented in one of two ways:
either it will be the full website presented to render nicely on the smaller
screen size that you find on phones and tablets, or it will be a special version
of the website that doesnt contain the same information as the full website.
This latter approach supposes that a mobile visitor to your site is likely to be more
goal-orientated than a desktop visitor, and aims to present the key information quickly,
such as how to find us, or our contact details.

WorldMags.net

An introduction to HTML
WorldMags.net

Introducing HTML

and make some decisions about what content to show. This might
be as simple as including your name at the top of the page when
youre logged in, or as complex as a fully loaded e-commerce web
store, but all these server-side languages output the same final
result plain HTML. Its important that the web works this way, as
every web browser only has to support one kind of page structural
language, which makes it easier for both web designers and
browser vendors, not to mention for users of the web who know
that all they need to access any website is a web browser and an
internet connection.

What are these semantics?

The HTML format is very accommodating; beyond the required
elements of <html>, <head> and <body> you can arrange your
content any way you like. This is both a benefit and a potential
issue as the flexibility to present (and mark up) content in any way
also means that you can quickly end up with a confusing mess! A
movement to present information in a semantic fashion existed at
the birth of the language, and has seen a resurgence in recent years.
The general idea is that content should be marked up according
to its type and importance. <h1> heading tags, for example, should

<below> The new HTML5 specification

has been drawn up by the W3C, an
organisation set up to act as the
gatekeeper for web standards

WorldMags.net

An introduction to HTML
Introducing HTML
WorldMags.net

Every web browser only has to support

one kind of page structural language,
which is easier for web designers
only be used to mark up the most important piece of info on a
page, <h2> for the second most important and so on. If you think
about the analogy of a book, the <h1> tag might be the book or
chapter name, <h2> would be a section header and so on. By using
this approach, the HTML describes the importance of each piece of
info which helps search engines identify what your page is about,
and more importantly special software, such as screen readers that
translate web pages into audio for people with sight problems, can
make more sense of the document.
In the past, content has been marked up using heading and
paragraph tags, but content has been grouped using the same
single nondescript tag, <div>. This tag is, by itself, nothing more
than a method for delimiting different pieces of information so that
it might be used around a navigation bar, or just as likely around
an article on a web page. As HTML5 has been introduced, new
semantically orientated tags have been introduced that allow
designers to mark up navigation with a <nav> tag, headers with a
<header> area and articles with <article>. There are more of these
semantic tags available, but some browsers are still implementing
HTML5 so were in a period of transition where youll still see a huge
number of plain old <div> tags used.

What about Flash?

Up until the launch of the iPhone, the de facto method for
presenting interactive rich content was Adobe Flash. This is a
plug-in that sits inside an HTML document, but runs as a separate
program within the web browser. When Apple released the iPhone
it decided not to support Flash, largely because of the problems
Flash had with crashing browsers, and the lack of support for touch
screens. This decision helped kick-start a movement away from the
plug-in towards the combination of HTML, CSS and JavaScript.
Whereas five or six years ago most interactive image galleries
were created using Flash, today the majority are rendered using
15

WorldMags.net

An introduction to HTML
WorldMags.net

Introducing HTML

Theres been an explosion in smartphone use over the

past few years which has led increasingly to the web being
accessed on the move
standard HTML and either CSS, JavaScript or most commonly both.
Flash is still useful for certain types of content its a very popular
method for showing video on the web, and games are currently
easier to code in Flash.
Flash isnt nearly as accessible as HTML, either from a developer
point of view or from a user perspective, especially with regard to
disability access. Adobe has worked to improve this over the years,
but the technology isnt ever going to be as accessible as a plaintext-based system such as HTML.

HTML: function, not form

In the early days of the internet, HTML included a large variety of
methods for changing the way content displayed. For example, an
early option was the <font> tag which allowed you to specify the
typeface that youd like the content and information to be rendered
in. This allowed designers to very precisely choose how their
content was displayed, but when a website consisted of 50 pages
and the designer wanted to change the font, it was a mammoth
task to work through every page and replace every single reference
to the choice of font.
As a solution, CSS was introduced. CSS, as youll see elsewhere
in this book, is a system for applying styles defining the form and
aesthetic of a page. This means that now we can treat HTML as a
structural language only we dont define the way a web page
looks using HTML, just how its structured and content arranged in
a semantic hierarchy. The net result is that by separating form and
function we can now change a font thats used throughout a big
website with just a single change to the CSS stylesheet, saving time
and ensuring design consistency throughout.

Whats next for HTML?

HTML has come a long way since its invention in a computer lab in
Switzerland, and its continuing to develop. The HTML5 specification
16

WorldMags.net

An introduction to HTML
Introducing HTML
WorldMags.net
is already partially implemented in browsers, but other elements
of the language are still being discussed, and theres a good
probability that well see further enhancements in the coming
years such as the ability to specify different resolution images
to be downloaded to desktop computers from those sent to
mobile devices.
Theres been an explosion in smartphone use over the past few
years which has led increasingly to the web being accessed on
the move. These devices have a different screen orientation to the
traditional computer, often have less bandwidth and computing
power, but expect to have a fantastic browsing experience. The
HTML language, through HTML5, is already adapting to meet this
challenge, but as the specification matures you can expect to see
further enhancements with this usage scenario in mind. Its an
exciting time to be a web designer!

<below> The new features in HTML5 allow

you to embed video and audio directly in
your pages, and when combined with CSS
can provide amazing special effects

WorldMags.net

HTML glossary
WorldMags.net

Introducing HTML

HTML glossary
We demystify the definition of the most popular HTML jargon
a
The a tag defines a hyperlink, which
is used to link to another web page.
The <a> tag is typically coupled with
the href attribute which will include
the links destination. For example, <a
href=about.html>link text</a>

aside
This is a tag that was introduced in
HTML5 and refers to content that is an
aside to the main content. The content
in the aside tag should be relevant to
its surrounding content.

audio
The <audio> tag allows for the
inclusion of audio files which can be
read directly by the browser without
the need for a plug-in. Between the
audio tags will be the source od the
audio and any related attributes

body

canvas tag can be styled eg width,

height, border, to make it fit better
with the graphics that are placed
upon your web page.

This will include elements that need

to be seen on every page and will
typically have navigation and link to an
about page and contact page

class

form

The class attribute can be applied to

the div tag eg div class=. This will have
a unique name that is not in the HTML
specification. Unlike the id option the
class identifier can be applied to more
than one element.

The <form> tag is a container that will

contain all the necessary elements
to create a form. This could be text
fields, checkboxes, labels and submit
buttons, your usual form garb.

div

head

The div tag is used to create blocks

of content in a web page. These are
known as block elements. The tag
will be coupled with id eg div id= to
create a unique name which typically
reflects what the content block is eg
leftcol for left column.

This tag contains a host of information

that is typically hidden from the user,
but is important for the browser
to read. It will include the page
title, keywords, scripts and links to
stylesheets. The head tag comes
immediately after the html tag and
before the body tag.

footer

header

The footer is the part of a page that

typically sits at the bottom of a page.

A web page is typically split into

different parts including the header.

The body tag is where all the content

seen on screen is stored. It sits after the
head tag and between the html tag.

br
Br is short for break, or more
specifically line breaks. It is an empty
tag which means it isnt a set of tags
just a single tag. It is used to split long
headlines or long sentences.

canvas
The <canvas> tag is a container where
the necessary code is placed to show
the graphics created by the code. The

<above> The canvas tag is a container for dynamic graphics

WorldMags.net

HTML glossary
Introducing HTML
WorldMags.net
The header is typically at the top of
the page and includes elements that
will typically be seen on every page eg
the site title, logo and navigation. For a
tutorial on how to create your header,
go to page 60.

html

(ordered) tag and a set of li tags are

required for each item. If three items
are needed in a list then three sets of
li tags are needed. The text inside the
each list item will be displayed on a
web page. It is important to close each
of the li tags.

nav

The html tag is the tag that defines a

HTML document. It is the tag that all
other tags live within. You will find a
HTML tag at the beginning and end of
a document

img
Img is short for image and defines
where an image will go in a web page.
The img tag is typically paired with src,
which shows the source of the image
and alt. Alt text is what will show in the
browser if the image is not available.

li
The li tag is sort for list. These are
found inside the ul (unordered) or ol

A tag introduced in HTML5, nav

is a semantic tag that is short for
navigation. These are used to store any
navigation or menus that are typically
found at the top of a web page,
usually within the header.

p
This is the HTML tag for paragraph.
This works exactly as a paragraph
would in a book. The paragraph of
text would be surrounded by an
opening and closing set of tags eg
<p></p>.

script
Web pages often include code
beyond HTML and CSS that add
dynamic elements. A simple example
is Google Analytics code and other
code written in JavaScript. The code is
stored inside a set of <script> tags to
help identify the code.

section

<above> The video tag is a placeholder for

adding video into a web apge

The section tag was introduced in

HTML5 and is a generic section of a
web page that will contain general
content such as text and images. It can
have its own id (name) to help identify
the section, and is able to have a CSS
class added. It is often has a title as well.

table

<above> The elements of a HTML form are

stored inside the <form> tags

Tables are made up of rows and

columns and were used to create
page layouts before CSS became
popular. They are now used to show
off tables of data.

<above> The script tag is where code, or link to

the code source is placed

tag
The term tag refers to all the elements
of the HTML specification. The HTML
language is made up of tags that
are contained in a set of brackets
eg <body>.

title
The title tag is stored inside the head
tag and determines the title of the
page. This title will appear in the
title bar or tab in a web browser. It
is important that the title is concise
and informative as it will be read by
the user and search engines. Do not
include notes within the tag as this will
also show in your title.

ul
Lists are an integral part of web pages
and there are several options for
creating lists. ul is short for unordered
list which means the list is bullet
pointed by default. The alternative
option is ol, ordered list, which adds
numbers or letters eg a,b,c

video
The <video> tag is a set of tags,
which will contain any related video
information. For example, a basic
version would contain width and
height attributes along with the
source of the video.
19

WorldMags.net

Create a basic layout

WorldMags.net

Introducing HTML

Create a basic layout

Code up your first basic skeleton for a webpage using HTML5 its really quite
simple to do
In this tutorial well make an HTML5 layout for a simple webpage. While initially HTML may look
confusing, theres a relatively small amount of code that youll need to remember. There are a few basic
building blocks such as <div> which you will find yourself using regularly, then others such as <caption>
which you will use much less often.
If you have made pages before in the past using HTML4 then you should feel at home, just be
aware of the new tags. If youve not written any HTML before then good news, as its now easier to
understand! HTML5 has added in a lot of new elements which help the browser interpret the layout
of the page easier. <header> and <footer> are two examples, and describe common top and bottom
elements of a page respectively.
When starting out in web design its important to remember to open and then close tags correctly.
Every time you open a new command, get into the practise of having your end tag ready, so you dont
end up with any loose bits messing with your code.
Open your text editor of choice and lets get started!
The head tag
While usually invisible to
the website visitor, the head
tag contains important
information for the browser,
such as CSS styles as well as
search engine information

Header tag
The header differs from the head, as its
contained within the body of the HTML
page, meaning it gets displayed in the
browser. The header usually contains
company insignia, navigation and
possibly an introductory image

Footer
The footer tag denotes an element
that usually goes at the bottom of
the content, and contains items such
as author, contact info, telephone
numbers etc

Div tag
A div is used to
group content
together, in this
case we use it
to display our
content and
sidebar. Divs can
be nested within
each other and
can have IDs and
classes applied to
them so they can
be identified

WorldMags.net

Create a basic layout

Introducing HTML
WorldMags.net

Set up your first HTML page

The HTML base

Add the header

Add the footer

The <header> is typically

used to hold the main site
image, with a title and possibly site
navigation. You can have multiple
<header> tags on a page.

001
002
003
004
005
006
007
008
009
010
011

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017

First up, the doctype tells the

browser what kind of content
to expect. In HTML5 its simple:
001 <!DOCTYPE html>
002 <html lang="en">
003 </html>

Create the head

Next up is the <head>

element, where we place all
the files we wish to include within our
page, eg CSS style sheets, which well
learn about later.
001
002
003
004
005
006
007

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Example Page</title>
</head>
<body>
<header>
</header>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Example Page<title>
</head>
</html>

The <footer> element

usually contains quick links
to common areas of the site such
as Contact us, and sometimes has
copyrights or addresses.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Example Page</title>
</head>
<body>
<header>
</header>
<div class='content'>
</div>
<div class='sidebar'>
</div>
<footer>
</footer>
</body>
</html>

Add the body

The <body> is where all the

viewable page content goes.
In it well add the header, the main
content area, sidebar and a footer
perhaps for a sitemap.

001
002
003
004
005
006
007
008
009

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Example Page</title>
</head>
<body>
</body>
</body>

Sidebar and content

The main content can be

placed within a div, then a
class applied to it, place it after the
closing header tag, but before the
closing body tag:
001 <div class='content'>
002 </div>

The sidebar can be placed after it, also

with a class:
004 <div class='sidebar'>
005 </div>

When starting
out in web design
its important to
remember to
open and then
close tags
21

WorldMags.net

Code a link
WorldMags.net

Introducing HTML

Code a link
Adding in links to other pages is a key part of web design
While links may seem like a simple element to add to a webpage, they
are the key building blocks of the entire internet. Similar to pages within
a book, separate webpages within a website help to break up content
by topic or purpose. Then, by adding in a navigation bar, it means that
visitors will be able to quickly between content.
Links are also one of the most important elements that Google and other search engines use to find
and index your site. The kind of content that you link out to, and the kind of content contained within
sites that link to your pages, are vital in informing the search engine on how to categorise your site for its
search results.
This tutorial will take you through adding in links leading to other pages in your website, and how to
link out to other peoples sites. Once you have added some links, your site can start to function how its
intended to, with visitors being able to view all the content contained with ease.

The basic a tag

Internal links

Open a new page

To link to another page in your

own site, you simply add the
name of the page:

001 <a href="contact.html" ></a>

001 <a href="gallery.html" target="_

blank"> See My Gallery</a>

Adding a hyperlink to your

webpage is really simple, but
there are a couple of customisations
to take into consideration. A link is
denoted using the a tag, short for
anchor. To start off your link, enter in:

This assumes that the contact.html

page is within the same folder as
the page we are working on. See
the Relative paths boxout for
more information.

001 <a> </a>

However, unlike some other HTML

tags, an anchor needs a little more
information for it to work properly.

If you want your link to open in

a new tab or window, you can
see a target to the link:

Add link text

Href

To make the link visible to

the user, add in some text
between your opening and closing
<a> tags. For example:

The link needs a destination

so that when its clicked, the
browser knows where to go. This is
added in using href. For example:

001 <a href="gallery.html"> See My

Gallery</a>

001 <a href="http://www.webdesigner.

com"></a>

Open the page in your browser, and

assuming the gallery.html page exits
in the same directory, clicking the text
will take you there.

would send the browser to that

external website.

Links are the

key building
blocks of the
entire internet

WorldMags.net

Create lists in your website

Introducing HTML
WorldMags.net

Create lists in your website

Learn how to quickly create various lists within your webpages using HTML
Lists are an effective way of presenting important information in a way
thats quick to read and digest. They are also a good method for giving a
brief description or introduction into content to follow, to help your users
find what it is they are looking for.
Coding up a list in HTML is quick and very straightforward, and once
youve got the hang of the basics you can start to apply your own styles
using CSS to make them really stand out from the crowd, which well
come to later
There are two main types of lists in HTML: ordered and unordered. An ordered list stars at 1 and then
increases. This is useful when you need to give preference to the higher items, or you want to display a
step-by-step guide.
An unordered list is simply bullet-pointed and is useful when you just need to display a list where
the order is irrelevant. By default, lists will be indented from the surrounding content and have a circular
bullet point. This tutorial will show you how to add lists to your pages, both ordered and unordered, and
also how to create lists within lists.

Unordered list

Nested lists

An unordered list by default is

shown slightly indented with
a bullet point denoting each item. To
add in an unordered list you use the
<ul> tag.

Add list items

Within your list, items are added

using the list item tag like so:

001 <ul>
002 <li> </li>

Text can go between the open and

close li tags; for example:
003
004
005
006

</ul>
<li> Tea </li>
<li>Coffee</li>
</ul>

Lists can be embedded within

other lists just by opening and
closing a new <ul> within another
<ul>, and then list items can be added
to that too. They will then be indented
again within that <ul>.
001
002
003
004
005
006
007
008
009
010

<ul>
<li> Tea </li>
<ul>
<li>Breakfast</li>
<li>Earl Grey</li>
<li>Coffee</li>
<ul>
<li>Latte</li>
</ul>
</ul>

Ordered lists

If you wish to number your list

items then you can use the

<ol> tag in place of the <ul>. This will

then replace the bullet points with
ascending numeric values for you list
of items.

Definition lists

There is one other type of list

in HTML the definition list.
Its quite rarely used but allows an
indented description to be added to
each list item. An example definition
list would be:

001 <dl>
002 <dt>Snowboard</dt>
003 <dd>- Great for freestyle tricks
</dd>
004 <dt>Cross Country Skis</dt>
005 <dd>- Ideal for exploring on
</dd>
006 </dl>
007
23

WorldMags.net

All about div tags

WorldMags.net

Introducing HTML

All about div tags

Use a div tag to create consistency on your website
An HTML page is made up of a series of tags which tell the web browser what to display and where.
The main building block of a page is a div tag, short for division. If you look at a newspaper page, you
will see that text is grouped together in columns. Images with captions are also together with a margin
around them. A div in HTML is similar to this, and its usual to group together content in a similar way.
While HTML5 has added a few new tags with more semantic names such as header and footer, the
main body of most pages is still constructed using divs.
There is no limit on how many divs you have within a page and most webpages you visit online will
contain many, all nested within each other. Divs can contain text, images, video and audio, as well as
other HTML elements such as articles and sections.
This tutorial will show you how to make your first divs and then how to apply an ID or class to them
so when youre ready you can apply CSS styles, or use JavaScript on them. Well be using plenty of them
throughout the book, and they are really simple. Dont forget to close each and every div tag that you
use else you will find your website takes a wonky look to it.

Properties of the div

The basic div

Closing the div

Adding an ID

Once you have inserted all the

content, you need to make
sure you close off the div by using </
div>. Note the forward slash denoting
the ending of the current div:

001 <div>
002 This is where you will add your
div content.
003 </div>

001 <div id"mydivID">

002 This is where you will add your
div content.
003 </div>

A div is started by using this

simple piece of code: <div>.
Following on from that, you can then
insert all the content you want to
contain within the div.
001 <div>
002 This is where you will add your
div content.

A div can have a unique

identifier so it can be
recognised in a style sheet
or by any JavaScript you may add. To
apply an ID to a div, use:

Divs can contain text, images, video and

audio, as well as other HTML elements
24

WorldMags.net

All about div tags

Introducing HTML
WorldMags.net
Adding a class

Nesting divs

Classes are similar to IDs, but

many items on a page can
have the same class. To apply a class
to a div, use:

001 <div id"mydivID">

002 This is where you will add your
div content.
003 </div>

Using classes makes styling multiple

elements much easier. It allows you to
create CSS coding in one place that
will then apply to all of the specified
classes rather than having to input the
styling information into each individual
div tag.

Div classes
Classes are widely used in web
development to allow CSS styles to
be associated with elements within
your HTML page

Many webpages are made up

of a few main elements such as
a header and footer, and then a main
content div. Within a div its possible to
have other divs. For example:

001 <div id=content>

002
<div class=leftColumn
003
</div>
004
<div class=rightColumn
005
</div>
006 </div>

Doing this allows you to have a

universal style to the content div, and
then apply different styles to the divs
contained within.

There is no limit
on how many
divs you have
within a page and
most webpages
you visit online will
contain many

IDs

Indenting divs

Code highlighting

IDs are used in a similar way to

classes, but there should only be
one element on a page with a
particular ID. IDs allow you to target
specific elements using JavaScript
for manipulation

Once your pages get more

complicated they can feature many
divs all nested within each other.
This can make it hard to track where
one opens and another closes. Its
standard practice to indent the
content of a div using the tab button

Most HTML editors offer code

colour highlighting of some sort.
This can help you when checking
which divs have classes applied etc

WorldMags.net

Create a three-column layout

WorldMags.net

Introducing HTML

Create a three-column layout

Make a three-column webpage structure using HTML5
HTML and CSS essentially allow for a huge range of freedom when designing your pages, but there are
a few layout principles that have developed over the years which its a good idea to follow.
If you have a quick look at some of your favourite sites on the internet its quite likely that they will
use a column layout, akin to a newspaper. A common layout for a site is to have the site or company
logo at the top of the page, then have a column down the left for navigation or links, a main content
section in the centre, and then a sidebar on the right with supplementary information or Facebook
and Twitter feeds. This is then commonly rounded off with a site-wide footer containing copyright
information, the name of the site designer, site links and sometimes a contact address. This tutorial
will show you how to code up the HTML scaffolding for a three-column layout using modern HTML5
elements. Once you have mastered this, it can then be adapted into a two- or more-than-three-column
layout if you so wish.

WorldMags.net

Create a three-column layout

Introducing HTML
WorldMags.net
Set up your HTML page

To start off, open up your

favourite editor and create the
initial HTML elements as usual.
The first thing we need to add is the
HTML5 doctype declaration:
001 <!DOCTYPE html>

This tells our browser that we are using

the HTML specification within the
page, and it should be placed right at
the top of your HTML file.

There are many different ways of

displaying characters, and a few different
standards depending on language
displayed to the user, but is used
to include your CSS stylesheets,
JavaScript and metadata. Within your
<html> tags, place <head>, then </
head> to close it off.
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <!-- CSS Styles and javascript
be used
005 </head>
006 </html>

Open HTML tag

Add a title

Next up we need to start

off our HTML by entering
the HTML tag <html> and
then making sure we close this
with </html>.
This tag tells the browser that
contained within this section is HTML
code. All the page content that we
will be creating will need to go within
these tags.

001 <!DOCTYPE html>

002 <html>
003 </html>

<head>
<title>
3 Column Layout
</title>

Define character set

There are many different

ways of displaying
characters in computing, and a
few different standards depending
on language; eg Greek or Arabic
text looks very different from
Chinese. Luckily for us, almost
all the web uses the UTF-8
standard, which we define within
our head with:

001 <meta charset="utf-8" />

UTF-8 does a good job of

displaying most characters
correctly on your website.

The body tag

All the content you wish to

be displayed to the user is put
within a body tag. This goes after
your head tag has been closed, but
within your <html> tag. Start it off
with <body>, then close it off in the
normal way: </body>. We will now
place all code within the body tag.

Insert the head

The head tag is an important

one in HTML, and shouldnt
be confused with the header tag.
Content within the head is not
27

WorldMags.net

Create a three-column layout

WorldMags.net

Introducing HTML
Adding comments

Sometimes you may wish to

add a note to a location within
your page, perhaps as a reminder or
to make it easier to see where certain
elements start or finish. Comments
are started using . For example:
001

The container

Its quite common to wrap

all the main content within
the body in a container div. This can
make styling and centring easier when
you start to write up your CSS. Add
a container div within the body with
<div> and </div>, then give it an ID so
we can style it later:

</header>. A page can have multiple

headers, although they cannot be
contained within each other.

Nav tag

Nearly all pages contain a

navigation or menu bar of
some sort to allow visitors to get
around the site. HTML5 now has a
tag specifically for this. The nav tag
is where to place links to other items.
Lets add one to our page <nav>
and then close off again with </nav>.

001 <body>
002 <div id="container">
003 </div>

001
002
003
004

The header

also be used to target a specific div

within a page.
001 <header>
002 <nav>
003 <a href="home.html">Home</a> |
<a hef="products.html">Products</a> |
<a
href="gallery.tml">Gallery</a>
004 </nav>
005 </header>

Navigation items

The top element to our page is

usually referred to as a header
and contains the site title, logo,
navigation, and sometimes adverts.
To create a header we use the header
tag, which is new in HTML5. To open
it enter <header> and then to close,

To add links to the navigation

we use the <a> or anchor tag.
Eg <a href=products.html> Products
</a>. If you dont yet know your exact
site layout, its common to use a # in
place of the link. A hash symbol can

The top element to our page is usually

referred to as a header and contains the
site title, logo, navigation, and adverts

First column

Now we can add our first

left column. This goes after
the header tag, but still within our
container div. Add this in with <div>
and then dont forget to close: </div>.
Again, you can give it an ID or class,
such as:
001 <div id="col1">
002 </div>

This column might contain a menu or

adverts, for example.

WorldMags.net

Create a three-column layout

Introducing HTML
WorldMags.net
Second column

The second column is usually

the widest in the centre, and
normally houses the main page
content. Add it to the page the same
way as before, but give it a different
ID this time.

The second column is usually the widest

in the centre, and normally houses the
main page content
footer>. Place this after your sidebar
column in the code.

001 <div id="col2">

002 </div>

Dont be concerned if you cant see

any content within your browser as
without styling, divs are essentially
invisible and only the content
contained is displayed.

001 <footer>
002 Footer
003 </footer>

Metadata (optional)

If you know what content

is going into the pages and
wish to improve search engine
optimisation, you can add meta
information to the head. Meta
information helps Google and other
search engines to index and organise
sites by content. The meta description
tag is used to give a short account of
the page content:

Third column

The third and final column is

then added in exactly the same
way, with a unique ID:

001
002
003
004
005
006
007
008
009

<div id="sidebar"></div>
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="sidebar">
Sidebar
</div>

This column might contain a menu or

adverts, for example.

Stopping Google
indexing (optional)

The footer element

001 <meta name=description"

content=Fishing in
Dorset">

The footer is used to mark

the bottom of the page, and
often contains a list of common links,
along with copyright and/or contact
information. To add a footer we simply
use the HTML5 footer tag <footer>
and as always, close it off using </

To stop Google and other

search engines indexing your
page, you can add the following code
to your head:

001 <meta name="robots"

content="noindex">

This means the page will not be shown

in Googles search results. This can be
useful on client login pages, or out-ofdate pages that you wish to archive.

The end result

Save the file now, making sure

to have the .html extension
at the end. Open the file within a
browser to see the result. As there is
no styling applied yet, it wont look
particularly attractive by any means,
but youve created a basic web page
layout thats now ready for CSS and
content to be added.

001 <!DOCTYPE html>

002 <html>
003 <head>
004 <title>
005 3 Column Layout
006 </title>
007 <meta charset="utf-8" />
008 <meta name="description"
content="Fishing in Dorset">
009 <meta name="robots"
content="noindex">
010 </head>
011 <body>
012 <div id="container">
013 <header>
014 <nav>
015 <a href="home.html">Home</a> | <a
hef="products.html">Products</a> | <a
href="gallery.tml">Gallery</a>
016 </nav>
017 </header>
018 <div id="col1">
019 Column 1
020 </div>
021 <div id="col2">
022 Column 2
023 </div>
024 <div id="sidebar">
025 Sidebar
026 </div>
027 <footer>
028 Footer
029 </footer>
030 </div>
031 </body>
032 </html>

WorldMags.net

Introducing CSS
An introduction to CSS
WorldMags.net
Style. CSS
ANDROID LANDSCAPE 320 X 240

ANDROID PORTRAIT 240 X 320

KINDLE LANDSCAPE 1024 X 600

IPAD LANDSCAPE 1024 X 768

WorldMags.net

An introduction to CSS
Introducing CSS
WorldMags.net

NEW ANDRIOD LANDSCAPE 515 X 295

ANDROID LANDSCAPE 515 X 295

ANDROID PORTRAIT 295 X 515

IPHONE LANDSCAPE 480 X 320

An introduction to CSS
If HTML provides the structure for a website, CSS provides the form. This is the
language that will make your site stand out

ascading Style Sheets, commonly abbreviated to CSS, is a language used for

describing how HTML should be presented. CSS documents provide all the format,
colour, positioning and other characteristics of a design that you will see on virtually
any webpage.
Originally introduced alongside HTML4, the language was designed to separate the structure of
a document from the presentation, improving the control of a design for web designers. CSS also
helped to improve accessibility of web pages, reduce HTML code complexity and crucially the
amount of repetition of markup that had to be created to describe how a page should look.
As well as these benefits, the separation of form and function allows different designs to be
displayed to users according to their device, simply by providing a different stylesheet. This means
that, for example, a mobile phone can load the same web page as a desktop browser, but present
the content within the page in a different manner. Similarly, CSS can be used to present page
content one way on screen and a second when printed, or to provide direction to screen reader
software over areas for emphasis.
Additionally, CSS is user-configurable, so while the designer might specify that text should be
shown in 18pt red Arial, the visitor to their site can load their own stylesheet to show the text in
12pt blue Times instead, should they wish to. As you can see, CSS offers a great deal of flexibility by
design. To fully understand what its capable of, we need to look a bit more at what CSS is, why
31

WorldMags.net

Introducing CSS
An introduction to CSS
WorldMags.net

CSS offers absolute positioning of an

element according to set co-ordinates
and how it came about, and
examine how the
implementation of the
language works across
different web browsers.

The cascading bit

CSS is designed to use a
priority scheme that
determines how styles should
be applied to HTML elements.
The cascading bit of the
language name refers to how

this scheme works. Broadly,

styles are applied in
chronological order, but also
according to specificity. If a
style property is declared
more than once for a
particular element, the last
chronological declaration
will be used, unless the
earlier declaration was more
specific about the elements
it should apply to than the
latter. This sounds really

confusing, but in practice it

allows you to apply a set of
broad styles that provide basic
properties for the font that
text should be rendered in, for
example, and use more
specific selectors to
subsequently set the size,
colour or font weight. To
help make sense of it all, lets
take a look at what CSS looks
like in code.

CSS syntax
Just like HTML, CSS is
designed to be humanreadable in its raw form.
English keywords are used
with a simple syntax to

Recent versions of web browsers have vastly improved their implementation of CSS standards

WorldMags.net

An introduction to CSS
Introducing CSS
WorldMags.net

CSS3 opens
the web up
to more users
by allowing
individual
stylesheets
on pages

The advantages of CSS

CSS offers many benefits over
the previous idea of pairing
visual characteristics into HTML.
The most obvious one is that by
separating content from
presentation, the aesthetic of a
web page or entire website can
be tailored to individual user
profiles or devices with ease. A
single HTML page can be
rendered in many different ways,
as amply demonstrated by the
CSS Zen Garden experiment
(csszengarden.com), and this
characteristic can be used to
ensure that mobile devices
see a layout appropriate to their

form while a desktop computer

sees a different rendering more
aligned to the larger screen estate.
CSS supports many different
usage scenarios including print
and audio.
As well as the ability to tailor
the presentation according to
device, user characteristic or
location, CSS also helps to ensure
consistency across an entire
website. Where multiple pages
reference the same CSS sheet, a
change in the CSS is instantly
reflected across all those pages,
saving the designer time and
reducing the risk of

inconsistencies. Along the same

vein, CSS allows multiple
elements to be selected
and styled with a single selector.
This reduces the amount of code
required to achieve a design.
CSS makes the web more
accessible; a user can choose to
load their own stylesheet onto
any document. Useful for
visually-impaired users this
characteristic also allows
designers to separate styles into
multiple stylesheets with each
applying an additional layer of
styling for easy organisation and
adaptation of a design.

WorldMags.net

Introducing CSS
An introduction to CSS
WorldMags.net
describe a list of rules, style
properties and style values.
Each rule in a stylesheet is
defined by means of a
selector, which identifies the
HTML elements the rule
should apply to. Within the
rule, a series of properties and
values are defined so that the
visual characteristics for an
element are built up property
by property. Lets take a quick
look at an example:
h1
font-family: arial, helvetica,
sans-serif;
font-weight: bold;font-size: 18pt;
color:
red;
margin: 10px;
}

available), bold 18pt red text.

The entire <h1> would have a
ten-pixel margin around it.

More complicated
selectors
In the previous example we
used a simple selector to
establish which elements
the rule should apply to.
Selectors can be nested so
that only specific elements
have the rule applied. An
example might look like the
code that follows:

In the code above weve

defined the rule using the h1
{ } selector. This specifies that
the style properties within
should apply to all <h1> tags
found on the page. Within
the curly brackets we define
a series of properties, such
as font-family, font-size etc,
and the values wed like
to set for each. As a result,
every heading 1 on our page
would be rendered in Arial
(or Helvetica if Arial wasnt

#content article h1 {
color: blue;
}

Here, the rule would only

apply to HTML <h1> elements
that are nested inside an

Selectors can be nested so that only

specific elements have the rule applied

<article> element, itself

within any other element
that has an ID attribute of
content. Our page would
now show all <h1> tags as
red, bold, 18pt Arial, with the
exception of those headings
inside an <article>, itself
inside an element with an
ID of #content where the
colour would be blue instead.
This works because the CSS
sheet cascades the styles and
also has the priority scheme
we discussed earlier. As our
second rule is more specific
in its selector, it takes priority
over the more generic rule we
created first. We could have
also positioned our second
rule chronologically after our
first to ensure it would take
priority, but sometimes the
specificity rules that are a part
of CSS would prioritise over
chronology. By combining
specific selectors with

WorldMags.net

An introduction to CSS
Introducing CSS
WorldMags.net
different rules, and using
specificity and priority its
possible to style a document
with a few SS rules.

Different ways to
load a style
There are three different
ways a style can be applied
to an HTML element. The first
is through an external file
that is loaded into the HTML
document in the <head>
section. The second is to
include a <style> declaration
in the <head> section of the
document, writing your rules
and properties directly inside
the <style> area, and the third
is directly onto an element
using the style attribute. The
latter is referred to as an
inline style.
When calculating the style
properties of an element,
CSS is loaded first from any
external files and applied,
then from the <head> section
of the page, and finally from
any inline styles. Where the
same property is set by more
than one of these three
methods, they apply in the
order as described above.

CSS offers absolute positioning of an

element according to set co-ordinates
is how elements can be
positioned on the page. CSS
offers a number of different
positioning systems, and
these can be mixed and
matched within a single
page design. The first, and
default, positioning scheme
is relative positioning.
This operates on the basis
that an HTML document
is chronological. Much like
a word processor, content
that appears beneath other
content has its position on the
page dictated by the content
above which pushes it down
into position.
In addition to relative
positioning, CSS also offers
absolute positioning where
an element is positioned

according to a set of coordinates relative to the

container element. This allows
elements to be very precisely
positioned on the page,
relative to the whole page.
Similar to absolute
positioning is fixed
positioning. This works, as
with absolute, using a series of
co-ordinates but rather than
being positioned relative to
the page, position: fixed
elements are always relative to
the viewport (the visible
portion of the browser
screen). As you scroll, position
fixed elements remain in
the same place in the
browser window.
The final, and often the
most confusing, system is the

Positioning
elements
One of the most common
areas of CSS that new
designers struggle to grasp
35

WorldMags.net

Introducing CSS
An introduction to CSS
WorldMags.net
positioning, and especially
float, works.

floating element. This system

allows elements to push to
one side or the other of the
containing element, with
content and other elements
automatically flowing around
it. This takes some
understanding and
experimentation, but is
fundamental to achieving
some common layouts so its
worth spending a little extra
time getting to know how

History and
potential hiccups
By now youre starting to see
the value and potential of CSS,
but its not all as perfect as it
might at first seem. There are
a number of problems that
web designers have to
overcome when using CSS to
style their web pages, and to

CSS offers absolute positioning of an

element according to set co-ordinates

fully understand those issues

its worth taking a quick trip
down memory lane.
When HTML3.2 was
released, a series of new tags
were added that allowed web
designers to specify different
visual characteristics for their
content. These included the
likes of <font>, <b> (for bold
text), <color>, <center> and
many more. These tags
provided the control over
presentation that web
designers were craving, but a
problem quickly emerged: by
mixing style with content the
pages designers worked on

WorldMags.net

An introduction to CSS
Introducing CSS
WorldMags.net
quickly became
unmanageable, especially
when a web site had lots of
pages. Something as simple as
changing the font a website
used might have taken days to
change, working through
each HTML page in the
website and changing
references from one font
to another.
As a consequence, the W3C
quickly realised that content
should be separate from
presentation, and developed
CSS. CSS1 debuted alongside
HTML4 in 1996, but it wasnt
until some years later that web
browser vendors had
managed to fully implement
the language. In the
meantime, a newer version of
CSS had been created in 1998,
and Netscape and Internet
Explorer version 6 had both
partially implemented CSS2.
As well as the slow
implementation, from the
start there were issues with
the way the CSS specification
had been written, leaving
room for individual
interpretation over what each
part of the specification
meant. This resulted in
Internet Explorer rendering
styles in one way, while the
other popular browser of the
day, Netscape, rendered
differently. As well as

differences in opinion, both

these popular browsers had
their own bugs and quirks
that resulted in strange
behaviours when interpreting
and rendering CSS. To further
compound the issue, as the
web was taking off and
becoming mainstream, once
the damage had been done
there was no easy way to
backtrack. The net
consequence of these
unfortunate events was
that web designers had to
start using workarounds to
code different style rules
for different browsers,
taking into account the
bugs, quirks and differences
in rendering.

The arrival of
HTML5
As the web has matured, so
have the technologies used to
create it and CSS is no
different. HTML is now just
about at version 5, and CSS3
first came into existence at the
beginning of the century. Its
only in the last couple of years
that either technology has
started to be properly
implemented by browser
vendors however, and the
combination of HTML version
5, CSS version 3 and JavaScript
is often referred to collectively
as HTML5 (erroneously it must
be said!).
As mobile devices have
become increasingly popular,

Its only in the last few years that

technology has been implemented
properly by browser vendors
37

WorldMags.net

Introducing CSS
An introduction to CSS
WorldMags.net
driving the desire for access
to the web on the move,
and across different screen
sizes, so the browser vendors
have been coaxed into
accelerating their
implementations. This has
provided quite a relief to web
designers who only a year ago
were still implementing
workarounds for Internet
Explorer version 6 a
decade-old piece of software!

Differences of
opinion
Despite the recent strides
towards adoption of CSS3, and
the retirement of Internet
Explorer 6 by Microsoft, there
continues to be quite a lot of
differences between the way
different browsers render CSS.
The most common issue
today is where browsers
implement CSS properties
that havent yet been fully

ratified by the W3C. To ensure

compliance, vendors prefix
these properties with a name
that represents the browsers
maker. So, for example, to
create a CSS drop shadow we
currently have to have a rule
that specifies properties for
box-shadow, -webkit-boxshadow, -moz-drop-shadow,
ms-drop-shadow and
o-drop-shadow. The first
property is the actual CSS3

WorldMags.net

An introduction to CSS
Introducing CSS
WorldMags.net

<above> CSS allows websites to be tailored according the device upon which the website is accessed

specification property,
while the others are the
early implementations by
Safari and Chrome, Firefox,
Internet Explorer, and
Opera respectively.
Vendor prefixes are the
subject of much debate
currently as theyve become
more prevalent in recent
years as vendors rush to
outdo each other in their
CSS implementations. For

web designers the new

opportunities CSS3
presents are slightly offset by
the continuing need to
provide browser-specific
properties for most of the
modern properties.

What does the

future hold?
As youve read, CSS3 is still
being implemented and
defined by both the W3C and

browser vendors. And as for

the future? Dont expect to
see it any time soon, but CSS4
has been in development
since 2009. Its still in early
draft of course, but promises
all manner of exciting new
styling options and properties.
If were all still designing
websites in another ten years,
no doubt well be discussing
matching selectors and
reference combinators!
39

WorldMags.net

Introducing CSS
Styling with CSS
WorldMags.net

Styling with CSS

Understand the essential properties and values needed to style pages
background
Background is a property that will
determine how the background of an
element is styled. It has many associated properties eg background-color,
background-size.

border
The border property, as its name
suggest adds a border to the
associated element. Borders can be
added to all sides of an element or a
specific element such as the top, right,
left or bottom. There are several styles
eg solid, dotted etc and the option to
chose a width.

box-shadow
The box-shadow property allows
for the implementation of multiple
drop shadows on box elements, ie
div elements. It can specify values for
color, size, blur and offset. Text-shadow
uses the same principles but applies
the drop shadows to text.

font-family

The background property

allows for background
images which can enhance
any design

another element. Float has two main

values left and right. Selecting left
will position an element to the left.
Conversely, if assigned the right value,
it will be positioned to the right.

height
This is as simple as the name
suggests. The height of an element is
determined by the height property.
This can be a fixed height using pixels
or a flexible height using percentages.

letter-spacing

Fonts can be styled individually or

as part of a family. The font-family
property is used should the first
choice font not be available then a
replacement option can be called
upon. These will be set out in the
value. Eg verdana has a font family that
includes a bold and light option.

To improve legibility and add flexibility

to web typography the letter-spacing
property can be used. The value eg
2px will add the stated space between
each letter of the styled text.

line-height
Line height is the space between the
lines in text. The line-height property
can use a fixed value with pixels or
alternatively use a number value eg

float
The float property is used to position
an element specifically within

2. The default option is normal and is

often the preferred choice.

margin
Margins help create space between
content. When adding a 5px margin to
an element it will create a 5px space all
around the element. Margins can be
separated so it is only applied to one
part of an element eg margin-top.

max-height
The max-height property ensures that
an element does not exceed a specific
height. It is often used in conjunction
with max-width, which ensures that
an element doesnt exceed a specific
width. Both properties are typically

Margins help
create space
between content

WorldMags.net

Styling with CSS

Introducing CSS
WorldMags.net
is contained within. A fourth value,
justify, will spread text across the full
width of its containing element.

text-decoration
The text-decoration property specifies
what can be added to text. You can
add under- and overlines and a strike
through to your text.

value
<above> The width and height property determine how every element on a page is sized

used in responsive designs to ensure

that a design display as intended.

position

overflow

There are four values for the position

property, the default is static. The
others are absolute, relative and fixed.

If an element has content that extends

beyond its containing element, for
example, an image, the overflow
property can be called into action. If
the hidden value is used the image
outside of the element will be hidden.
Using scroll will add scroll bars so all
the image can be seen.

property

The value element is associated

with a property and selector. It will
specifically determine how a property
is styled. For example, if backgroundcolour is the property the value
will be the appropriate code colour
eg #CCCCCC.

width

There are hundreds of properties

in CSS, these are accompanied by
a selector and value. They tell the
browser how a certain part of the
related HTML element will be styled.

The width property is typically used in

combination with the height property.
A fixed width can be determined by
using pixels. To makes sure an element
is full width of an element or page its
can be set to 100%.

padding

selector

z-index

Padding is very similar to margin,

except the padding is applied to the
inside of an element. If text is to close
to the top of an element adding
padding will give it breathing space.

A CSS selector is the identifier that is

link to HTML. The selector will refer to a
HTML element eg h1, h2. The browser
will then read the style information
(property and value) in the selector
and apply it to the HTML element.

The z-index property determines

the stack order of an element. An
element with greater stack order, for
example 100, is always on top of an
element with a lower stack order.
Note that the z-index property only
works with positioned elements such
as position:fixed;.

syntax
To understand CSS you need to
understand the syntax that is used. CSS
is made up of three parts the selector,
property and value. Typically written
as follows:
001 selector {property: value}

text-align
<above> The spacing between lines of text can
be adjusted with line-height making the text
more legible

Text can be aligned to the left, right

or centre of the element the text

<above> Adding shadows to text is simple using

the text-shadow property

WorldMags.net

Introducing CSS
Centre your page
WorldMags.net

Centre your page

Wrap your pages content in div tags to give control over the way its displayed
When youre designing a webpage, you have to remember that a browser window can be almost any
shape and size. Desktop computers have a wide range of screen sizes, and mobile phone and tablets
are used to browse the web too. Your nicely designed page could be ruined if you simply allow it to
flow into the browser window regardless of the latters size or shape. By creating a wrapper you can
specify the width of the webpage content and its position in the browser window. It is an essential part
of the design process.
Wrapper is a commonly used name for a piece of CSS code that is used with a div tag to
size and position the content of a webpage. A div tag is placed at the start of the page content just
after the opening body tag and again just before the closing body tag, thereby enclosing or wrapping
the content.
In CSS we can define how everything between the div tags is displayed. It can be centred on the
page, positioned a certain number of pixels from the left, a border can be added, its width can be fixed
or variable and so on. It is an essential component of any webpage and its quite straightforward.

Set the width

Set the colour

How wide do you

want the page
content to be? You
can either set a
width in pixels, as
shown here, or use
a percentage. 100%
would be the full
browser width

You can choose

whatever colour
you want for the
background. If
you choose a dark
colour, though,
youll need to
change the text to
white and thats
for another tutorial!

Set the
margins
Without margins
the page content
is displayed on
the left. You can
manually set them
by entering the
number of pixels,
but a good option is
to set them to auto
to centre the page

Borders or
borderless?
This page has
borders, but they
are optional and
leaving out these
parameters will
remove them.
Its your choice.
Padding, just
above, is used for
extra spacing, but
it isnt needed

WorldMags.net

Centre your page

Introducing CSS
WorldMags.net
The CSS link

Flexible page width

CSS definitions can be stored in

a webpage or a separate file. If it
is in a separate file then any webpage
can access it and it saves having to
add it to each new page. Add a link in
the HTML <head> tag to a file called
style.css.
001 <link rel="stylesheet" type="text/
css" href="style.css" />

Add div tags

Set the page width using

absolute dimensions and
it may not fit on small screens like
mobile phones or tablets, or it may
look tiny on computers with large
monitors. An alternative is to set it
to a percentage of the browser
width instead.

is set to solid. Alternatives include

dotted, dashed, double and ridge.
001 div#wrapper {
002
width: 80%;
003
margin-left: auto;
004
margin-right: auto;
005
border: 2px;
006
border-style: solid;
007
border-color: #006600;
008 }

001 div#wrapper {
002
width: 80%;
003 }

We want to specify the size

and position of the webpage
content, so we must place div tags at
the start and end of the page, thereby
enclosing all the content. The CSS
definition will be called wrapper and
we refer to it with id=wrapper:
001 <div id="wrapper">

Set the margins

We have specified the width

for the page content, but not
its position. With margin-left you can
specify the number of pixels from the
left the content is to be displayed. An
alternative is to set both margins to
auto to centre it in the browser.

Create the CSS

We dont yet have any CSS, so

create a new file called style.
css and add a div ID called #wrapper.
Set the width to 750 pixels. This value
determines the width of the webpage
content because everything is
contained within the two div tags.

001 div#wrapper {
002
width: 750px;
003 }

001 div#wrapper {
002
width: 80%;
003
margin-left: auto;
004
margin-right: auto;
005 }

Add the borders

Browser compatibility

There are several web browsers,

but unfortunately they all
display webpages in slightly different
ways. Compatibility between browsers
is helped by adding this as the first line
of the HTML file:
001 <!DOCTYPE html PUBLIC -//W3C//DTD
XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd>

Find a copy-and-pastable version at

http://bit.ly/IxdBQ.

Your page design may look

good if there is a border, and
this specifies one that is two pixels
wide. The border colour is set to dark
green (006600) and the border style

You can specify the width of the

webpage content and its position
43

WorldMags.net

Introducing CSS
Define body text and heading styles
WorldMags.net

Define body and heading styles

Create CSS rules for displaying the text on the page
Every webpage contains text and it is frequently the main content. Therefore you should ensure that
it looks good by choosing the fonts and styles to fit your design and the image you want to portray.
There might only be a small amount of text if the main content focuses on images, but even so, there
will be titles, links and captions. Theres no getting away from text on webpages.
You can add CSS code to a webpage to define how the text is displayed, but placing it in a
separate .css file and linking to it in the pages head section means that the same text styles are
applied everywhere in your site. HTML font tags have been replaced by CSS font-family definitions, oldfashioned <i> and <b> tags are no longer needed, and font-style and font-weight enable you to set the
styles to normal, italic, bold and so on. It might seem like extra work for one webpage, but when you
are creating a site with 100 pages it is a considerable time-saver.
Writing the CSS rules for the text is simple and you can create a class that defines a text style
and then use it over and over again in the page. We only look at headings and body text here, but
expanding the CSS yourself should not present any problems.

Heading
style

Style other
headings

This is an h1
heading, the
largest that is
available, so we
have made it big
and bold. The font
has been set to
Arial and the size is
set to 30 pixels

Here you can see

the style settings
for the h3 tag and
the heading in use
on the page. The
font-family, fontsize, font-weight
and margin-bottom
have all been set

Italic text

Keep it simple
Although there
are lots of CSS
parameters that
you can set, you
dont always need
to set them all.
This is a minimal
definition for the
text that sets only
what is needed

WorldMags.net

Define body text and heading styles

Introducing CSS
WorldMags.net

Customise your text

Size and style

The text may be fine at its

default size, but if it isnt, you
can set the size in pixels. The size
you need depends on the font, so
experiment with 10px to 16px. The
font-style can be normal or italic and
the font-weight can be normal, bold,
bolder or lighter.

Pick a font

Using CSS you can set the

font for all the text enclosed
by <p></p> tags on all webpages
with this in your style.css file. Link
to it in the page header using <link
rel=stylesheet type=text/css
href=mystyle.css />. This bit of code
sets the font family to Verdana:

001
002
003
004
005
006

p {
font-family: Verdana, sans-serif;
font-size: 14px;
font style: normal;
font-weight: normal;
}

001 p {
002 font-family: Verdana;
003 }

Define a class

Select a family

When a font name contains

spaces, you must put quotes
around it or the CSS wont work. It is
also a good idea to offer an alternative
font in case the visitor to your site
doesnt have the one you specified.
Choose a family such as serif (fancy) or
sans-serif (plain).
001 p {
002 font-family: Verdana, sans-serif;
003 }

You can create a

class that defines a
text style and then
use it over and
over again

There may be paragraphs

that you want to make bold
or italic, so here are three classes that
define three styles of text. It varies the
font-style and font-weight, but you
could also create small text, large text,
styles for panels, captions for images
and so on.
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018

p.normal {
font-family: Verdana, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
}
p.italictext {
font-family: Verdana, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
}
p.boldtext {
font-family: Verdana, sans-serif;
font-size: 14px;
font-style:normal;
font-weight: bold;
}

Use different classes

Step 4 created three CSS

classes for the <p> tag. When
you want text to appear in one of
these styles, you add a class parameter
to the <p> tag. The style is used for
all the following text until you either
change it with another tag or end it
with </p>.

001 <p class="normal">This is normal

text</p>
002 <p class="boldtext">This is bold
text</p>
003 <p class="italtictext">This is
italic text</a>

Define the headings

In addition to body text, there

are also headings using h1 to
h6 tags. You dont need to define all
of them, just the ones you use. Do
it exactly like the p tag and set the
font, size, style and so on. Weve also
reduced the bottom margin below
the header.
001
002
003
004
005
006
007
008
009
010
011
012

WorldMags.net

h1 {
font-family: Arial;
font-size: 30px;
font-weight: bold;
margin-bottom:-10px;
}
h2 {
font-family: Arial;
font-size: 20px;
font-weight: bold;
margin-bottom:-10px;
}

Introducing CSS
Style your lists to stand out
WorldMags.net

Style your lists to stand out

Standard lists tend to be a bit boring, so spice them up with some CSS styling
Although some web pages may require a lot of text, it is generally best to keep it brief and to the point.
People scan a page for interesting content and then move on if they dont spot anything straight away.
Lists are therefore very useful for drawing the visitors attention to some content and for presenting it in
a way that can be digested quickly.
The HTML <ol> and <ul> tags are used to create ordered (numbered) and unordered (bullet) lists,
which we explored on p22. They are useful if unexciting, but with CSS list-style-type you can change the
bullet to different shapes like a circle or square. It is even possible to replace it with an image specially
created to fit in with your sites design and colour scheme using list-style-image. You can change the
font used to display lists so they match the body text. If you have used HTML lists you will have noticed
that they are indented, but with CSS you have fine control over the positioning using padding and
margins. You can tighten up the layout or space it out its your choice.

Customise
your lists
Create a class

You should have a separate file

called style.css for CSS code, so
load it and create a new class called
liststyle like this:
001 .liststyle {
002
list-style-type: square;
003 }

It contains just one item called

list-style-type, but there are over 20
different possible values. These include
circle, square, lower-roman, disc,
decimal, upper-latin, and others. Try
each one to see what they are like.
46

WorldMags.net

Style your lists to stand out

Introducing CSS
WorldMags.net
tutorial and we can simply add ul to
the p code so it uses the same font
and size as the body text.

Boxed lists

CSS displays each element

of web page content in a
series of boxes. This means that a list
defined by a ul or ol tag is separated
from other elements on the page by
a margin. Inside the margin there may
be a border, but it is optional and not
always used. Between the border and
the content is padding or space.

001 p. ul{
002
font-family: Verdana;
003
padding: 10px;
004
font-size: 14px;
005 }

Choose a background

Many HTML elements can

have a background colour and
it is applied to both the content and
padding areas, but not the border
or margin. A background-color of
#ffd0d0 has been set, but if you are
not familiar with this notation, you can
use common names like red, yellow,
blue and so on. This is less flexible,
though, hex codes can be easily found
on Photoshop or online.

001

Position the list

Inside vs outside

With those boxes in mind, we

can position the list within
the space allocated to it on the page.
Padding and margin have been added
to the liststyle class and set to 10 and
0 pixels respectively. Experiment with
different values to see how they affect
the position of the list.

001
002
003 }

padding: 10px;
margin: 0px;

Youll notice that the bullet

blobs are outside of the
background colour. This is their default
position, but its possible to change
this and make them appear in the
background area. In this step, list-styleposition is set to inside and this makes
the list look more attractive.
001
002 }

Style the text

background-color: #ffd0d0; }

Notice in the last step that the

list text has a different font to
the body text. Thats because no style
is set for lists. We defined the font and
size for the body text in a previous

Add a border

As weve discussed, each HTML

element can have a border. We
havent specified one so far, so one
hasnt been drawn. However, we can
easily define one by setting borderwidth to the number of pixels and
border style to dotted, solid, dashed,
double, groove, ridge, inset or outset.

001
002
003 }

border-style: dotted;
border-width: 2px;

Colour the border

Most parts of the list can be

coloured and this includes the
border. The border-color has been
set to #800000, which is a mediumdark red. Its a good idea to specify
the colour even if its black, because
default settings for one web browser
might be different to the defaults in
another. Better to be safe.

001
002
003 }

border-width: 2px;
border-color: #880000;

list-style-position: inside;

With CSS you

have fine control
over the lists
positioning
using padding
and margins

DIY bullets

Blue squares for bullets? Yes, we

removed the standard bullets
by setting list-style-type to none at
the start of the CSS code. At the end
we have list-style-image:url(bullet.
png), which tells the browser to use
an image called bullet.png that we
created earlier in a paint program and
saved with the web page.

001 border-color: #880000;

002 list-style-image:url(bullet.png);
003 }
47

WorldMags.net

Introducing CSS
Turn lists into navigation bars
WorldMags.net

Turn lists into navigation bars

Every website needs some sort of navigation, so why not use CSS for it?
Website navigation is an important topic and it is something that you need to put some thought into as
you are designing your website. At one time we would have used button images created in a paint or
photo program and then used JavaScript to create a rollover effect when the mouse hovered over one.
But thats yesterdays technology and modern sites use CSS instead.
A CSS navigation bar looks like a regular unordered list in the HTML of the page, but using CSS we
can manipulate the list elements and turn them into the websites navigation. Instead of the list running
down the page, the list elements can be displayed across it instead. We can style the links just like any
other text and create a custom look for the navigation bar. The result looks nothing like its original plain
HTML layout and it really shows off the power of CSS.
You can copy the code into your own web pages and it will work fine. All you need to do is to
change the link text to correspond to the pages or sections on your own site, and style the text to fit
in with the fonts and colours that you use. It is really quite straightforward once you see how it works
for yourself.
STRETCH IT TO FIT
In the finished screen shot the navigation
bar stretches across the full width of the
page. There are several ways to achieve this
and in this case we have simply chosen a
width for the list items that exactly, or near
enough, fit across the page. If you have
more navigation items you will need to
reduce the width or make the page wider.

WorldMags.net

Turn lists into navigation bars

Introducing CSS
WorldMags.net
Create a list

An unordered list (ul) is used to

provide links to other sections
of the website. Its all standard HTML
and its exceedingly dull compared
to CSS. Try it and see. In the ul tag
though, we have added id=navbar
and well use it to change the way the
list is displayed.
001
002
003
004
005
006
007

<ul id="navbar"
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="walks.html">Walks</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>

breaks by using float. Setting the

list elements (#navbar li) to float left
causes them to be displayed one
after the other on the same line, like a
navigation bar.
001 #navbar li {
002 float: left;
003 }

Spread them out

All the links are bunched up

together and step 3 doesnt
look much like a navigation bar. What
we need to do is to make each link a
fixed width. We define the a link within
li of navbar (#navbar li a) as a block and
set its width to 140 pixels.

Make it plain

In the last tutorial we saw how

to style lists and the bullets can
be removed by setting list-style-type
to none. The padding and margin can
also be set to zero. This produces a
very plain list of links at the top of the
page thats not very exciting.

001
002
003
004
005

#navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
}

001 #navbar li a {
002 display: block;
003 width: 140px;
004 }

Style the text

Remember how we styled

some text back on page 44?
We can do the same here. Add the
formatting information to #navbar li

Floating elements

Normally each list item is

displayed on a separate line,
but it is possible to remove the line

Colour and decoration

Three items have been added

and immediately noticeable is
the colour. The text colour has been
set to dark green and the background
has been set to light green with
color and background-color. Finally,
text-decoration:none removes the
underline from the links.
001 #navbar li a {
002 display: block;
003 width: 140px;
004 font-weight: bold;
005 margin: 0px;
006 font-size: 20px;
007 padding: 5px;
008 text-decoration: none;
009 background-color: #99cc66;
010 color: #004000;
011 }

The result looks nothing like its plain

HTML layout and it shows off the
power of CSS
49

WorldMags.net

Introducing CSS
Format images using CSS
WorldMags.net

Format images using CSS

Use CSS to gain precise control over the display of images on your website
A webpage would be pretty dull without any images on it! Some images may appear on every page,
such as a graphical website logo or heading, while others may be specific to each page. You will need
to create the images for your site before you start. Remember to use them sparingly and keep the file
size as small as possible to ensure that webpages load quickly for visitors.
Images are inserted into webpages using the HTML <img> tag and there are attributes to position
it left and right, set the size and so on, but those are dated. If you use CSS to format images instead,
there are many more options available to you. For example, you can add a border, set its thickness
and its colour. The spacing around each side of the image can be individually adjusted, text can be
wrapped around it on the left or the right and so on. The latest web browsers that are up to speed
with CSS version 3 can display advanced image attributes like drop shadows that give the page a
3D look.
Forget the old HTML way of doing things and take advantage of CSS and its powerful features. Our
tutorial will guide you through the process.

WorldMags.net

Format images using CSS

Introducing CSS
WorldMags.net

A guide to CSS images

Create the images

Build a class

Define the margins

Adding img.picright to the CSS

file adds the class we need
to format the image. The float:right;
causes the image to be displayed on
the right float:left; would display it
on the left. In both cases the following
text will wrap around the image on
the left or right:

001 img.picright {

001 margin: 30px;

Load your paint program or

photo editor and create the
images for your webpage. There may
be a graphical logo, as shown here,
and one or more other images to
be displayed in the page. It is usually
best to save photos as JPEGs and
illustrations as 256-colour PNGs.

Insert the images

You may find that the text runs

right up to the image, which
might not look very attractive. It can
be prevented by setting margins.
Weve exaggerated the effect with
a 30-pixel margin; 10 is usually fine.
Margin-top, left, bottom and right can
be set separately if necessary.

Images are inserted into the

HTML of the page using
the img tag, with src pointing to
the filename. Add an alt attribute
as an image title: its useful for
search engines. You want to make
sure that your image sits in a
complimentary place on the layout,
this includes images on the page. Add
class=picright to the img tag:

001 <p><img class="picright"

src="photo.jpg" alt="Grass and tress">

Size the images

Add some borders

If you use CSS to

format images,
there are many
more options
available to you

As with many other HTML

elements, in CSS images can
have borders. The border-style can be
solid, dotted, dashed and so on, the
border-width can be specified in pixels
and the colour selected with bordercolor. Use colour names or rgb(x,y,z)
values where x,y,z are numbers 0-255.
001 img.picright {

If you dont specify a size

for the images, they will
be displayed at whatever size they
are. In some situations, though, you
might want to display an image at a
different size, such as when showing
thumbnails. Set the width and height
to the number of pixels to make the
image that size.
001 width: 350px;
002 height: 200px;

WorldMags.net

Introducing CSS
Add a background image
WorldMags.net

Add a background image

A great image can really enhance your page design
The fewer images your website has, the faster it will load, but plain colours for the background and lots
of text might be a turn off for your visitors. A few key images can greatly enhance the look of a website
and a background image has the advantage of being used on every web page. This means that the
browser only has to download it once and then it caches it ready to be used on the next page. The end
result is a great page design with no time wasted downloading large images.
In this tutorial we will start with a plain coloured background and then show how to add an image.
It can be a large one that fills the browser or a small one that can be stretched to fill or tiled across or
down the screen. Tiled images are great for reducing the size of a page because they are so small (for
more information on how to create your own, check out page 160). If you use a large image you must
bear in mind the size of the file and try to minimise it without affecting the quality.
Create an image

The background colour

Load your photo editor or paint program. Create

an image or find some clipart that you can use as
is or easily modify. Save it as a compressed JPEG or
256-colour PNG

The background colour of the page is set using

CSS definitions in the body tag. It is set to the
same colour as the background for the image so
the two blend in like one

Background
wrapper colour

Set the repeat

In this case we want a single image
that is not repeated in either the
horizontal or vertical directions,
so background-repeat is set to
no-repeat. Tiled images repeat in
both directions

If no background colour
is set for the wrapper, the
background colour of the page
will show through. Its up to you
whether you set a #wrapper
background colour

WorldMags.net

Add a background image

Introducing CSS
WorldMags.net

Impressive backgrounds

A background wrapper
Modify the wrapper

03
Pick a colour

The simplest type of

background is a plain colour.
This is achieved by placing a
background-color style in the body
tag stored in the CSS file, style.css. Use
words like red, yellow, blue, green or
the #RRGGBB hex value.

As well as inserting an
acceptable number of
hyperlinks, you can also flag up certain
content. Place words and rogue
websites, IP addresses and emails in
this box and any posts containing
such content will immediately be
placed in the moderation queue
where you can assess whether or
not to allow it to be published on
your site. If your banned words form
part of larger words, they too will be
picked up.

001 div#wrapper {
002 width: 750px;
003 padding: 0px;
004 margin-left: auto;
005 margin-right: auto;
006 }

Here, the background is solid,

but the text is on an image.
Anything can have a background,
so we can move backgroundimage:url(back2.jpg) from the body
tag to the #wrapper definition. We
chose a paler picture!

001 div#wrapper {
002 background-image:url('back2.jpg');
003 width: 750px;
004 padding: 0px;
005 border: 2px;
006 border-style: solid;
007 border-color: #006600;
008 margin-left: auto;
009 margin-right: auto;
010 }

Change the text

We can change the text colour.

We created some CSS code to
set the font and size in an earlier tutorial.
Now we can add color:white to the p
tag definition. This image has both dark
and light areas, so its not perfect.

Use a photo

Resize the background

What size should the

background image be? The
web page should load quickly so
visitors arent waiting around, so it is
best to create either a small image or
use lots of JPEG compression.

It is easy to use a photo for the

background and we just add
a line to the body CSS that links to it.
Add background-image:url(back1.
jpg), replacing the filename with
whatever your file is called.

001 p, ul {
002 font-family: Verdana;
003 font-size: 14px;
004 color: white;
005 }

001
002
003
004
005

Tiled images are great for reducing

the size of a page

body {
background-color: rgb (128,128, 128);
background-image:url('back1.jpg');
}

WorldMags.net

Introducing CSS
Add a background image
WorldMags.net

Horizontal gradients
Use smaller images

See through wrapper

If you look down the left side

it is clear that the web browser
has repeated the image down the
page because it didnt fill the full
height. It has repeated it across the
page too. It doesnt look too bad on
the left, but the right edge shows
all the joins. Sometimes you can get
away with repeating images and
sometimes not.

By removing the background

colour in the #wrapper, the
background shows through. You can
see that the background image has
tiled nicely across the screen and each
image fits seamlessly with the next.
However, it is ugly where it has been
tiled vertically.

The gradient background

image was loaded back into the
photo editor and rotated through 90
degrees to make a horizontal gradient.
Notice how small it is, both in physical
dimensions and in file size. The image
does not need to fill the whole screen
because it is going to be tiled. This
reduces the file size.

Tile it across
Create a gradient

We have created a small image

that has a simple gradient that
runs from dark green at the top to
white at the bottom. This will be used
as the background for the page and
even when exported at a reasonable
quality it doesnt create a very big
file. Tiled backgrounds are great for
creating fast-loading web pages.

Now this is far better. What

weve done here is to add:

001 background-repeat:repeat-x;

to the CSS in the body definition. This

instructs the browser to repeat the
image across the page only (the x
direction). The background colour is
set to white, which is the final gradient
colour so it blends in.

Tile it down

The image has been tiled down

the screen, but not across it.
This is because of the backgroundrepeat:repeat-y; instruction in the CSS
code for the body tag. It is possible to
repeat either in the x (horizontal) or y
(vertical) directions. If you dont specify
then it is tiled in both directions.

WorldMags.net

Add a background image

Introducing CSS
WorldMags.net

Cover the background

Resize vs stretch
Fixed vs scrolling

The background image is tiled

and the #wrapper background
is white. The main difference, though,
is the background-attachment in the
body CSS definition. If backgroundattachment is set to fixed, the
background stays still when the
page scrolls. Set it to scroll and it scrolls
with the page. You have to try it to see
the difference.

This image is from Background

Labs. It is a small image will not
fill the browser window and it is not
suitable for tiling across or down the
page. You have two choices and you
can either resize it in the photo editor
or resize it within the page using CSS.

Specify a size for the

background and someone with
a laptop may find part of the image is
hidden. Someone with a large monitor
may have a browser width of 1500
pixels and then the background will
be tiled. Use background-size:cover;
and the image is stretched to fit.

Background positioning
Resize the background

Grab a background

If you are not very good at

creating your own backgrounds
in a drawing or paint program you
will find lots of sources of background
images on the web. Background Labs
(www.backgroundlabs.com) and
GRSites (www.grsites.com/archive/
textures/) have lots of images and a
large number of them are textures and
images for tiling on the page.

The CSS code for the body

tag has been modified and
background-size:1280px 1024px; has
been added. This is a CSS 3 feature that
is only supported by the latest versions
of web browsers. This one has ignored
it! In IE9, Chrome and Firefox it will
stretch the image to the size specified.
001 body {
002 background-color: #ffffff;
003 background-image:url('back7.jpg');
004 background-size: 1280px 1024px;
005 }

One final bit of backgroundrelated CSS is the positioning.

In the body code is backgroundposition:center; and this centres the
background image in the browser
window. Other values include left
top, left center, right top, right center,
center bottom and so on, or just use
pixels like 50px.
001 body {
002 background-color: #ffffff;
003 background-image:url('back.jpg');
004 background-size: cover;
005 background-repeat: no-repeat;
006 background-attachment: fixed;
007 background-position: center;
008 }

WorldMags.net

Introducing CSS
Style a two-column layout
WorldMags.net

Style a two-column layout

Use the HTML and CSS skills youve learnt so far to
create and style a two-column page layout
Using HTML and CSS to create and style a two-column website layout one of the most common
layouts is surprisingly straightforward and very flexible. Almost all websites today use some kind of
column layout with at least a sidebar and main content areas. So its one of the basic skills to have when
designing websites, and once you understand these fundamentals you can move on to bigger and
more elaborate designs.
In this tutorial, then, we are going to open up our favourite text editor (we will be using Adobe
Dreamweaver, but the humble NotePad or TextEdit is fine) and learn how we can shorten, lengthen and
swap any column we need just by using CSS. Then we will discuss CSS floats, why we use percentages
and a few other tips along the way.
The header

Main content

The sidebar

Well float the header left and

give it a 100% width to make
sure it spans the full width of
our wrapper

The main content will be floated left as

we want this to be positioned far left of
our page and then some margins will
give us some white space

The sidebar area is floated right

and again we use margins to push
it away at the top, bottom, left and
right sides

WorldMags.net

Style a two-column layout

Introducing CSS
WorldMags.net
Linking the CSS

Now that we have our new

index.html and styles.css files,
we will need to link them up together
within the <head></head> tags of
our HTML. So open up the index.html
file and just underneath the closing </
title> tag, type in your link to your CSS.

First thing we need to do is create new index.html and styles.css files

and place them in the same directory. It is considered best practice to also
place all your CSS files within their own folder called css as some use separate
CSS files for certain things such as Internet Explorer-specific styles. However, we
will keep it simple here and leave them sitting in the same location.

001 <!DOCTYPE HTML>

002 <html>
003 <head>
004 <meta charset=utf-8>
005
<title>3 column layout</title>
006 <link rel=stylesheet hreg=style.
css>
007 </head>
008 <body>
009 </body>
010 </html>

The wrapper

Header

Main content

Getting started

With the index.html file still

open, lets add in a wrapper
div that will be used to centre all our
content on the screen later on using
CSS. What we have done here is use
an ID (<div id=) instead of using a
class because this is going to be a
main part of our pages structure and
will only be used the once throughout
our code.
001 <body>
002
<div id="wrapper">
003
</div>
004 </body>

Firstly, well add the header. We

are going to give it an ID (<div
id= called header) and place this just
underneath our wrapper div. Then we
have added in a title of our section
within an <h1> header tag so we can
know whats what.

001 <body>
002
<div id=wrapper>
003
<div id=header>
004
<h1>header</h1>
005
</div>
006
</div>
007
</div>
008 </body>

Sidebar section

The footer

001 <div id=sidebar>

002
<h2>sidebar</h2>
003 </div>

001
<div id=footer>
002
<h3>footer</h3>
003
</div>
004 </div>
005

The sidebar is next and this is

the area that will be positioned
over to the right and would normally
be used for extra navigation links or a
search field things like that. So again
we will use an ID called sidebar and
add it just under the main_content
closing div </div>.

So next up we need to add a

main content section that will
be positioned on the left side of our
layout (see page 56). Like we did in the
last step we have created an ID tag
and called main_content, to clarify it
from the header class, and added it
in just underneath our header. And
again so we can see what section is
what, we have added in a title using
the <h1> tag.

001 <div id="main_content">

002
<h1>main content</h1>
003 </div>
004

Now the footer speaks for itself and will be our last HTML section we
will be adding. So again lets give it an ID name of footer and add it in
underneath the closing main_content div. Then again place in a header tag
using a <h3>. You will also notice we have added in an HTML comment to every
end div tag (</div>) to give us a clear indication of where each section ends. This
will help you if your HTML mark-up gets very busy.

WorldMags.net

Introducing CSS
Style a two-column layout
WorldMags.net
CSS reset

Now open up your styles.

css file and what we are
going to do first is add what is called
a reset. The reset uses the universal
selector and this just tells all browsers
(including IE) to clear all default styles,
such as padding, margins, line-height
etc. Doing this will give you a clean
slate to work from.
001
002
003
004
005
006
007

Wrapper styles

Now the reason for our wrapper is to wrap everything within a

containing section (element) so we can centre it within the viewpoint
of our screen. So here we have used margin to zero out the top and bottom
margins and allow CSS to automatically calculate the left and right space based
on our width. Our width will be 960px because that aligns up nicely with a screen
resolution of 1080 x 760px (lowest common denominator).

/* reset */
* {
padding: 0;
margin: 0;

001 #wrapper {
002
width: 960px;
003
margin: 0 auto;
004 }

The header

Now, for the header section we are going to float it left and give it a width
of 100%, which will guarantee our header spans the whole width of our
#wrapper. Then we push the header down 10px using margin. Here we have
used what is called shorthand CSS, which enables us to only pick the top margin.
Now give the background a colour and then 100px height.

001 #header {
002
float: left;
003
background: #f1f1f1;
004
margin: 10px 0 0 0;
005
width: 100%;
006
height: 100px;
007 }

The sidebar styles

Main content styles

Now to add some style. First thing is to float it left. Then give it an offwhite background colour and then by using margins we can give it some
breathing space. We then specify its width and height taking into consideration
the overall width of our wrapper so we have enough room for our sidebar.

The sidebar will be positioned

to the right-hand side and
this is at most expected by the user/
visitor. So it makes sense to float to
right. And then use margins again to
give us some white space. Our sidebar
background will be a darker grey than
the rest and it will be a fixed width of
324px, which should give us plenty of
room for any inner content. Then we
give it the same height as the main
content section.

001 #sidebar {
002
float: right;
003
margin: 10px 5px 5px 6px;
004
background: #ccc;
005
width: 324px;
006
height: 630px;
007 }

001 #main_content {
002
float: left;
003
background: #f0f0f0;
004
margin: 10px 5px 10px 0;
005
width: 620px;
006
height: 630px; }
58

WorldMags.net

Style a two-column layout

Introducing CSS
WorldMags.net
The footer styles

The headers

The footer styles should be fairly straightforward now. However, we have

a new property to look at, which is the clear: property. Setting this to
both will make all floated elements pump up over the footer allowing our
footer to sit where it should be. Then we float the footer to the left and give it
some dimensions.

001 #footer {
002
clear: both;
003
float: left;
004
background: #ddd;
005
width: 100%;
006
height: 100px;
007 }

If you view your layout in a

browser you will see we have
two-column layout with a sidebar and
main content area. The only thing we
need to do now is push the headers
of each section away from the edges.
We can easily achieve this by using
padding on all header tags.

001 h1, h2, h3 {

002
padding: 20px;
003 }

Moving the sidebar

To get your sidebar to the

right, change the float value
of the #main_content rule from
left to right. But what you want to
be conscious of is naming your divs.
Name your sidebar something like
<div id=left_side>, something that is
clear to you.

001 #main_content {
002
float: right;
003
background: #f0f0f0;
004
margin: 10px 5px 10px 0;
005
width: 620px;
006
height: 630px;
007 }

Bigger two columns

As you can imagine, its very easy to make two larger content areas and not
have a sidebar at all even though it still can be called sidebar. So in your
CSS, if we think about how much space we have to play with, which is 960px, and
divide that into two. However, then we have to compensate for our margins, so
it may take you some messing about to get the right spacing without pushing
anything out.

Research alternatives

Be inspired

Now youve finished your basic two-column layout, take at look at some
of your favourite websites and see which layout they employ. As shown
above, www.webdesignermag.co.uk uses a two-column layout too.

The two-column layout is in

no way the be all and end all.
Within this book you will find the tools
to create a three-columned layout,
and be able to learn the skills your
acquire to customise any layout to
whatever you have chosen.

WorldMags.net

Introducing CSS
Create a header
WorldMags.net

Create a header
Learn how to create a clean, simple and effective header for your website
Having clean and clear header for your website can be the difference between a successful and userfriendly experience and a cluttered and disorganised website that no one will want to visit again! You
dont want a first-time user coming to your site and not know how your navigation works, or your
company branding (logo) hidden under a load of over-useless graphics or text it doesnt even really
matter how effective the rest of your layout is.
Yes, this sort of thing has been known to happen (more often that web designers would like to
admit!) and this is why so many designers are turning to a relatively new role called user experience
or UX. So in this tutorial we will take a look at how we can create a simple, clean and useful header for
your site.
The logo

The background

The logo can be either a graphic

or just text. You will also notice
we have used the same font for
both the logo and navigation

Creating a textured background will always

help stand your web page out from the crowd
gone are the days of white backgrounds
with nothing but text and images

The hover state

The hover state is nicely styled and
can be easily changed whenever
needed just by changing both the
background colour or font colour

WorldMags.net

Separators
Adding a separator to our
navigation links doesnt need to be
pure CSS as we did, but it is handy
using the border property

Create a header
Introducing CSS
WorldMags.net

Rinse and repeat

To get started with this tutorial,

you need to have set up your
layout; follow the tutorial on page 56
to get started!

Navigation list

Adding the logo

Now lets place our logo within

the header section; you can
use your own or grab ours off the disc.
We are going to use an ID again and
call it logo. Then we will wrap it within
an anchor tag and link it to our page
by adding in the index page within <a
href=index.html>

In this step we are going to add in the navigation. What we will use here
is a standard unordered list and each list item (<li>) will have a link to each
page using the <a href= attribute. Then we will give our unordered list a class
name of navigation.

001 <body>
002
<div id=wrapper>
003
<div id=header>
004
<a href=index.html><div
id=logo></div></a>
005
</div>
006 </body>

001 <body>
002
<div id=wrapper>
003
<div id=header>
004
<a href=index.html><div id=logo></div></a>
005
<ul class=navigation></li>
006
<li><a href=>home</a></li>
007
<li><a href=>about</a></li>
008
<li><a href=>blog</a></li>
009
<li><a href=>portfolio</a></li>
010
<li><a href=>services</a></li>
011
<li><a href=>contact</a></li>
012
</ul>
013
</div> </div>
014 </body>

Main content

The CSS

001
<div id=main_content>
002
<h2>Hi, welcome to my
website</h2>
003
<p>It is a long established
fact that a reader will judge a
website by its layout.
004
</div>

001
002
003
004
005
006
007
008
009
010

We will now finish off our

HTML markup with some
content underneath our header.
Just underneath our closing header
div </div>, lets add in a div ID of
main_content and add in a welcome
title using header tags <h2> and then
some dummy text using <p> tags.

Now open up your styles.css file and at the top put in our simple reset.
The reset does exactly that resets every element to zero, which will clear
all the default styles that most browsers put on. Then, using the body tag we can
give our page a textured background using an image and leaving it to repeat
across the page. And then we set the font-family and size, here we have added
multiple fonts just incase our original chosen font isnt supported.
* {
padding: 0;
margin: 0;
}
body {
background: url(imgs/bg.jpg);
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
61

WorldMags.net

Create a header
Introducing CSS
WorldMags.net

The footer

07
The wrapper

Now we are going to centre our header and content using the wrapper
div. What we are doing here is making sure we have no margin at the
top or bottom and automatically find the difference on the left and right that
is in relation to our fixed width which we set to 960px. 960 pixels is mostly
used because it fits nicely within the lowest common denominator of screen
resolutions (1080 x 760).
001 #wrapper {
002
margin: 0 auto;
003
width: 960px;
004 }

Now for our header we are

going to float it left and give
it a 100% width so it spans the full
width of our wrapper div, then give it
a height of 250px. Lets also add in a
red border so we can see the header
more clearly and get a better visual
idea of where we need our logo and
navigation, which we will add in over
the next few steps then once happy
we will remove it.
001 #header {
002
float: left;
003
width: 100%;
004
height: 250px;
005
border: 1px solid #f00;
006 }

The logo

Adding the logo is going to be

very simple. All we are going
to do is locate our logo that we have
inside our imgs folder and then make
sure it doesnt repeat. Then position it
on the left by floating it left and then
specify its height and width. A thing
to remember here is that if you dont
specify its dimensions you will not see
it on the webpage.

001 #logo {
002
background: url(imgs/sc_logo.
png) no-repeat;
003
float: left;
004
width: 200px;
005
height: 200px;
006 }

001 .navigation {
002
float: right;
003
margin: 150px -50px 0 0;
004
width: 600px;
005 }

The navigation
Now lets style our navigation. We do this by floating the whole element
right then positioning it 150px down and then pulling it over to the
right using a negative margin of -50px. Never be worried about using negative
margins as they work very well. Then we give the navigation a width of 600px.

WorldMags.net

Introducing CSS
Create a header
WorldMags.net
Navigation anchors

To give each anchor tag some

padding, specify the textdecoration as none and then create
a separator using border-right. We
can remove the red border and add
in a hover state that will change the
background and text colour.

Navigation buttons

001 .navigation li {
002
float: left;
003
list-style: none;
004 }

001 .navigation li a {
002
float: left;
003
color: #333;
004
padding: 6px 20px;
005
text-decoration: none;
006
border-right: 1px solid #333;
007
font-size: 16px; }
008
009 .navigation li a:hover {
010
background-color: #333;
011
color: #fff; }

The content

Find Google Fonts

At the moment our navigation looks nothing like a horizontal navigation

bar, more like a basic list of links. So lets make it go horizontal by floating
each <li> item left, which will push them all horizontal. Then we can take away
the default item bullets by specifying the list-style being none.

Now lets style our page content. While were here lets get sneaky and add
some CSS3 properties to make the background have rounded corners by
using border-radius: 6px. We then style the paragraphs give it some padding to
both the paragraph text and header tags.

001 #main_content {
002
float: left;
003
width: 900px;
004
height: 400px;
005
background: #fff;
006
border-radius: 6px;
007 }
008
#main_content p, h2 {
009
line-height: 22px;
010
margin-top: 10px;
011
padding: 20px;
012
}

Apply the Google font

The next step is to click the use grey button located at the very bottom
right and scroll down the page slightly. What we have first is the link tag
line that will link straight to the Google font servers and will always be available.
That way you can guarantee everyone will be able to see your chosen font. Copy
the link to your clipboard. Then paste it into your index.html file just underneath
our other CSS link within the <head> tag.

001
002
003
004
005

Looking at our navigation, we

can clearly see that it doesnt
look very attractive. So lets spruce
it up somewhat by heading over to
Google Fonts www.google.com/
fonts and type in lobster within the
search field and you should see at
least two choices of fonts. The one we
want is the top style. Then click the
blue add to collection button to the
right and now it ready to use.

Google font-family

Now lets copy the font-family

property and then open up
the styles.css file and locate the
.navigation li a rule (a CSS rule is
everything within the curly brackets)
and paste the new font-family
underneath the font-size property.
001 .navigation li a {
002
float: left;
003
color: #333;
004
padding: 6px 20px;
005
text-decoration: none;
006
border-right: 1px solid #333;
007
font-size: 16px;
008
font-family: Lobster, cursive;
009 }

WorldMags.net

Introducing CSS
Create a sidebar
WorldMags.net

Create a sidebar
Learn how to create a clean navigation system for your website
A sidebar is without doubt the area that is most often created by web designers, because its the most
needed. It can hold all sorts of content: things such as extra navigation links, a search field and perhaps
some small thumbnail images that relate to your website it can be anything.
So in this tutorial were going to create a simple page layout that has a functional navigation and a
nice and simple sidebar that includes some content within. Were going to include within the sidebar
a list of links for that extra navigation we mentioned and a search bar above and also some thumbnail
images at the bottom to act as though we have a Flickr section very useful for any photographybased sites. So open up your favourite text editor and lets get started.
The width
A thin-looking sidebar
wouldnt help anyone
unless you have no intention
of anything but small
thumbnail images!

The search field

The sidebar is a great place
to put your search field and
you will see this on most
WordPress themes or other
blogging platforms

Navigation
Having a list of links for an
extra navigation will allow you
to add in links that you may
not have had the room to fit in
the main navigation menu

The thumbnails
We added this feature
because you see it all the time.
People who have a blog can
use a plugin that allows them
to feature their Flickr photo

WorldMags.net

Create a sidebar
Introducing CSS
WorldMags.net
Getting started

Sidebar and search

Follow the first steps from the

Create a header tutorial on page
60. This will help you set up the basic
layout that we will be adding to in this
tutorial, to create the following:

Lets now add in our sidebar section. All we do here is create a div ID with
the name of sidebar just underneath the closing header div </div>. Then,
using the code above, within our sidebar section lets add in a search field that will
just sit there and look pretty. After the  tag add:

001 <div id=sidebar>

002
<form id=search form
action= method=get
003
<input id=search_term type=text value= placeholder=search.../>
004
<input class=submit_button type=submit value=search>
005
</form>
006 </div>

Sidebar navigation

Now what we need to do is

now is add in what will be
our sidebar navigation. This is the
exactly the same code as our top main
navigation so its just a case of copying
and pasting that into the sidebar. But
we will need to give it a different class
name, which can be sidebar_list. After
the </form> tag add:
001 <ul class=sidebar_list>
002
<li><a href=>home</a>
003
<li><a href=>about</a>
004
<li><a href=>blog</a>
005
<li><a href=>portfolio</a>
006
<li><a href=>services</a>
007
<li><a href=>contact</a>
008 </ul>

Sidebar images

Well now add some images to sit below our navigation list. We have
the same image here for both, set to the size of 100x100px. Weve given
them a class name of thumb so we can use CSS to position them better without
relying on the img tag. Also weve given this section a title with the <h3> tag.
After your navigation list add:
001 <h3>My flickr images</h3>
002 <img src=imgs/thumbnail.jpg height=100 width=100 class=thumb>
003 <img src=imgs/thumbnail.jpg height=100 width=100 class=thumb>

The CSS

The wrapper

001
002
003
004
005
006
007
008
009
010

001 #wrapper {
002
margin: 0 auto;
003
width: 960px;
004 }

Open up your styles.css file and at the top add in the universal selector
that will allow you to reset every element(<p>, <h1>, div, etc) to zero
margin and padding. Then using the body tag we can set the background
colour to an off white #f1f1f1 and set our default font style and size.
* {
padding: 0;
margin: 0;
}
body {
background: #f1f1f1;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}

So with our wrapper acting

as a container for all our page
content, we can center everything
using a fixed width and margin. Were
specifying 0 pixels on top and bottom,
with auto margins on the left and
right. This is an easy and most often
the best way of centring your page on
your screen.

WorldMags.net

Introducing CSS
Create a sidebar
WorldMags.net
Stick to the right

The header & logo

If you spend some time surfing

the internet in some detail, the
chances are that you wont see
too many websites with the
sidebar fixed over to the left
side it is far more likely to be
over to the right. Even though it is
relatively easy to swap it over, you
wouldnt be doing anyone any
favours if you thought you would
be clever and original by plonking
it on the left internet users are
now accustomed to seeing this
section on the right-hand side of
their screens. If youre struggling
to add content in the sidebar, then
you can add a short summary
about you or your business or
perhaps even a small YouTube
video about your site.

Were styling our header by giving it a 100% width with a height of 250px.
Adding the logo is also going to be very simple as well only be using text
for now. Weve given ours a drop shadow using the text-shadow property.
001
002
003
004
005
006
007
008
009
010
011
012

#header {
float: left;
width: 100%;
height: 250px;
}
#logo h1{
font-size: 35px;
float: left;
margin-top: 130px;
color: #dac91a;
text-shadow: 1px 1px 3px #333;
}

The navigation

Now lets style our navigation. We can do this by floating the whole element
right, positioning it 150px down and then pulling it over to the right using a
negative margin of -50px. Then we give the navigation a width of 600px. To bump
everything to a horizontal position we float all the <li> left, then create our button
separator by adding a border-right to the navigation li a selector.

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017

.navigation {
float: right;
margin: 150px -50px 0 0;
width: 600px;
}
.navigation li {
float: left;
list-style: none;
}
.navigation li a {
float: left;
color: #333;
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #333;
font-size: 16px;
}

Navigation hover state

At the moment our navigation looks nothing like a functional navigation

menu and it still needs a couple of things added. The hover state will be
the first thing we are going to add here, and then in the next step we will shoot
over to Google fonts to download the lobster font and use that.

001 .navigation li a:hover {

002
003
background-color: #333;
004
color: #fff;
005 }
66

WorldMags.net

Create a sidebar
Introducing CSS
WorldMags.net
The sidebar

We want float the sidebar over

to the right and set a fixed
height and width. Then we can style
the <h3> header tag and just push
that off the left side using padding.
Then give the text a dark grey colour
of #333.

Google fonts

Now lets go to google.com/webfonts and search for lobster. Add it to

your collection and click use. Then add the <link= code to the index.html
file just underneath your main CSS link. Then locate the .navigation li a rule and
add in the font-family property. Do the same for your #logo rule.

001
002
003
004
005
006
007
008
009
010
011
012
013
014

A sidebar can hold all sorts of content:

extra navigation links, a search field, even
some small images
The search field

In this step lets style our search field. First of all we push it down slightly
and then make sure anything underneath it is 50px away. Then we slightly
push it away from the left edge using 20px. And lastly we give the input field
some padding to make it a bit more attractive.

001 #search_form {
002
003
margin: 10px 0 50px 20px;
004 }
005
006
#search_form input{
007
008
padding: 5px;
009 }

001 #sidebar {
002
float: right;
003
width: 300px;
004
height: 100%;
005
background: #fff; }
006 #sidebar h3 {
007
padding-left: 20px;
008
color: #333; }

Sidebar list

Now we are going to style the

sidebar navigation list. We want
to push it away from the edges by
using a 20px margin all round. Then
we add in a nice subtle dotted line
using the border-bottom property.

001
002
004
005
006
007
008
009
010
011
012
013
014

.sidebar_list {
margin: 20px; }
.sidebar_list li {
list-style: none;
margin: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ddd;
}
.sidebar_list li a{
text-decoration: none;
color: #333;
font-size: 13px;
}

Finishing off

No finish, we need to style our

thumbnail images. So we float
them left so they bump up to each
other and then space them out by
using margin.
001 .thumb {
002
float: left;
003
margin: 22px;
004
border: 1px solid #fff;
005
box-shadow: 0px 4px 6px #999;
006 }

WorldMags.net

Introducing CSS
Add content to your website
WorldMags.net

Add content to your website

Learn how you can add content to the main area of your website
Adding content to your website is either done dynamically using a content management system (CMS)
or by hand. Either way, you are going to have to learn how its styled and what options you have. For
instance, will you have just text or text with images? How about a video thats either embedded using
YouTubes, or your own flash or HTML5 player?
Of course your choices should be dependent on what niche your website caters for and thus
knowing who will be visiting your website. So in this tutorial, we will add a few elements of content
where one will include a video (which you can grab whatever video you want, you dont have to use
our one) and also some text and an image. So open up the index.html and styles.css files within your
text editor and lets get cracking!
The top section

The middle section

The bottom section

The width

Its a good idea to add

some text about your
website so users can see
what you are all about
before going any further

We have added a video

from YouTube here, but of
course this could just as easily
be a image of your company
or yourself!

The bottom section is again

used as a text-based section
that describes the middle
section video

You will need to think

about the width of your
main content area(s) and
plan ahead accordingly

WorldMags.net

Add content to your website

Introducing CSS
WorldMags.net
Main content header

Now in this step we are going to give our main content area a title that will
welcome everyone to the website. We do this very easily by adding in a
<h2> tag and a nice message within. What we will do is use CSS later to see what
we can do to make this look a little nicer.
001 <h2>Hi, Welcome to my website</h2>

Getting started

Now you have most of your

template built from the previous
tutorials in this book, you will be able
to add this into the main_content
id tag.

Welcome text

Adding an image

Now we need to add some

welcome text. This is normally
a good way of letting the user know
what your website is all about from
the off. Here we will just wrap about
three or four sentences within some
<p> tags.

Now we can add in an image within our welcome text. The idea here is to
have a small thumbnail image of something that relates to the website. So
place your image tag <img src= above the welcome text just sitting underneath
the header. Then we will use CSS later to float it to the right.

001 <img src="imgs/thumbnail.jpg" height="100" width="100" class="main_thumb">

Content image

Lets open up our styles.css file. We can point to the #main_content div
and then hock onto the p tag. We can then use multiple selectors here
and use the same style properties and values for the<h2> tag.

Now lets float the image over

to the right and add some
styles to it. We are going to use the
same CSS as we did on the sidebar
thumbnails. Then were going to make
sure we have enough white space
around the image.

001 #main_content p, h2 {
002
line-height: 22px;
003
margin-top: 10px;
004
padding: 20px;
005
width: 350px;
006
}

001 .main_thumb {
002
float: right;
003
margin: 40px;
004
border: 1px solid #fff;
005
box-shadow: 0px 4px 6px #999;
006 }

Styling our content

WorldMags.net

Introducing CSS
Add content to your website
WorldMags.net
The main content height

Now first thing you will notice is

that the video is now hanging
out at the bottom of our content area.
This is because on our #main_content
rule we specified a fixed height of
500px; So all we need to do now is
locate that rule within our styles.css file
and change it from height: 500px; to
height: 100%;

Video

Next we want to add the video to our main content area. Now we can get
really technical and use an HTML5 or flash player here, but to keep things
really simple, we can shoot over to youtube.com and copy and paste the embed
code within our index.html page. Then we want to be able to shift this video about
using CSS, so it would make sense to wrap a div around it with an ID of video.

001
002
003
004

Positioning the video

All we are going to do here is position the video using CSS. Now it makes
sense to float the video left. Then we are going to use margin to push it
away from the edges and anything that may be surrounding the video will now
have a generous amount of white space. Then lets add a black 5px border to
finish off our video.

001 #video {
002
float: left;
003
margin: 20px;
004
border: 5px solid #000;
005 }

001 #main_content{
002
float: left;
003
height: 100%;
004
width: 630px;
005
background: #fff;
006
border-radius: 6px;
007
margin-bottom: 40px;
008 }

Horizontal rule

What we are going to do now is

add a separator just above the
video. This will be easily styled using
CSS, so we wont need to depend on
some graphic design software such as
Photoshop or Fireworks. Its simply an
HTML tag called a horizontal rule <hr>
and we can add that just above the
video div within our index.html file.
001 <hr>
002 <div id="video">

Styling the horizontal rule

Styling the horizontal rule <hr>

is going to be a very simple task,
but requires some thought. If you
want to increase its height, you cant
just call height: 10px we have to
instead call upon its border property
border: 5px solid #ddd. We are going
to decrease its width, make it grey and
give it space to the left:
001
002
003
004
005

hr {
color: #ddd;
width: 570px;
margin-left: 20px;
}

Adding more content

So now you should get the idea of how and what we can add for our main
content. To get a real feel of it, lets add something underneath our video.
What we can do then is add in another thumbnail image. So the best way would
be to use the same image but give it a different class name of main_thumb2 and
place this directly under our closing div of our video.

001 <img src="imgs/thumbnail.jpg" height="100" width="100" class="main_thumb2">

WorldMags.net

Add content to your website

Introducing CSS
WorldMags.net
More text

Styling the content

So the next step would be to add in some more text that could be used for
a summary/excerpt of our video. Underneath our new thumbnail image,
place some more dummy text that is wrapped within paragraph tags <p> with a
class name of vid_excerpt so we can style it using CSS.

001
002
003
004
005
006
007

<img src="imgs/thumbnail.jpg" height="100" width="100" class="main_thumb2">

<p class="vid_excerpt">It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using Content here, content here,
making it look like readable English.
</p>

What we need to do now is

style our new content using
some simple CSS. So, open up
your styles.css file and position our
thumbnail image first. We will float it
left and then give it a 40px margin all
around. Then to finish it off we can give
it the same subtle drop shadow as the
other thumbnail we used in the sidebar.
001 .main_thumb2 {
002
float: left;
003
margin: 40px;
004
border: 1px solid #fff;
005
box-shadow: 0px 4px 6px #999;
006 }

Bottom content

16
The excerpt

Now all we need to do is float our video excerpt to the right and give it
some margins with 50px to the right, and 40px to the bottom.

001 .vid_excerpt {
002
float: right;
003
margin: 0 50px 40px 0;
004
}

When looking at our HTML,

it would make more sense
to wrap our bottom thumbnail and
excerpt content within its own div. That
way we can have more control of this
section if at all we need to position it
further. So, create a div with an ID of
bottom_content and make sure you
use an HTML comment to mark the
ending div </div>

001 <div id="bottom_content">

002 </div>

Adding another divider

Now what we want to do is add

in another horizontal rule <hr>
above the excerpt text so we can then
section out the video properly. So just
above the thumbnail image link, place
in your <hr> tag. But before we view it
in the browser, we need to go back into
our CSS and float the hr tags left. This
will push the bottom one underneath
the video.

001
002
003
004
005
006

hr {
color: #ddd;
width: 570px;
margin-left: 20px;
float: left;
}

Going further

As we said in the intro text to this tutorial, its down to you as to what
your content should include. Later in this book we explore adding maps,
newsletters, image sliders and more!
71

WorldMags.net

Introducing CSS
Add content to your footer
WorldMags.net

Add content to your footer

Finish off your first site with a footer to be proud of
In the past, the humble footer was not much more than a slim strip of colour with nothing more
interesting than the copyright text written within. But in many modern websites, we have seen a huge
improvement in footer designs and the content held within them.
These days, they are a lot higher and contain all sorts of content which can include contact forms,
newsletter sign-up fields, social media integration and much more. Ours for instance, in addition to a
newsletter sign-up field and generic About Us text, features another set of links for navigation, so our
readers dont have to scroll back to the top or to the sidebar if they want visit another page.
As crazy as it sounds (and this would have sounded incredibly crazy no more than a few
years ago), the footer has really taken the modern web by storm and has now developed into an area
that needs good planning like all parts of your website, it is important to offer the right amount of
content without confusing the user. So in this tutorial we will build a simple footer and include some
useful content that you would most likely see in a modern layout.

be to create a div with a class name

of about_txt within our footer ID
making sure we add on a HTML
comment to the closing div. For
content, we will start with a <h4>
header tag that includes the words
about us. Then underneath that we
will add in some dummy text that is
wrapped within paragraph tags <p>

Getting started

Open up your index.html

file from the last project and
scroll down to the very bottom of the
document. The first we are going to
do here is just underneath our closing
main_content div, add in a div with
an ID of footer.
001 <div id=footer>
002 </div>

About us

In this step we are going to

add some about us text that
will be positioned to the left of our
footer. So first thing to do would

001 <div class=about_txt>

</div>

Footer links

It is always a good idea to

place your sites navigation
within the footer so the user doesnt
need to scroll all the way up to the
top to navigate your site. So lets use
an un-ordered list and give it a class
name of footer_links and place it just
underneath the about text.

001 <ul class=footer_links>

002 <li><a href=>home</a></li>

003 <li><a href=>about</a></li>

004 <li><a href=>blog</a></li>
005 <li><a href=>portfolio</a></
li>
006 <li><a href=>services</a></li>
007
<li><a href=>contact</a></li>
008</ul>

Newsletter sign up

Many websites would have

either a contact form or
newsletter sign up field within their
footer. What we will do is keep it
simple and add in a newsletter sign
up field. We will give it an ID name
of newsletter and we will place this
straight under the footer links. We
can then position this later over to the
right using CSS.

001 <form id=newsletter action=

method=get>
002<input id=search_term type=text
placeholder=newsletter sign up.... />
003<input class=submit_button
004type=submit value=sign up>
005
</form>

WorldMags.net

Add content to your footer

Introducing CSS
WorldMags.net
Footer background

Now we have finished our

HTML mark-up, but if we
viewed it in the browser now it would
look a bit of a mess! So lets open
up the styles.css file, scroll down to
the very bottom and start adding
some CSS for our footer. First thing
we can do is clear the floats so it
pops underneath everything above
and give it some dimensions and a
background colour of white.

001 #footer {
002 clear: both;
003 height: 200px;
004 width: 100%;
005 background: #fff;
006 margin-bottom: 20px;
007 }

us a horizontal alignment. Then using

margin-left we can create some
space between each other.
001.footer_links li {
002
list-style: none;
003
float: left;
004
margin-left: 20px;
005 }

The links

Finishing the navigation

Now in this step lets style our

footer links so they look more
like a horizontal navigation list. We are
going to float it left and push it down
using margin and give it 20px space at
the bottom. Then lets give it a width
of 370px.
001 .footer_links {
002
float: left;
003
margin: 90px 0 20px 0px;
004
width: 370px;
005 }

001 .footer_links li a {
002 text-decoration: none;

List items

Now were going to finish off

our footer navigation. What
we need to do is remove the default
underline and then give the text a
light grey colour. Then for our hover
state, lets just change the colour of
the text to black #000, giving us a
subtle rollover effect.

Now style the list items<li>.

Here we are removing the
default bullet points and then floating
all the items left, which will push each
one up and next to each other giving

003
004
005
006
007

color: #333;
}
.footer_links li a:hover {
color: #000;
}

About text

Styling the about text is going

to be very simple. We first
float it left and then give it a width
of 250px. We then give it some
padding to allow some white space
all around. One thing to remember by
using padding is it will make the box
element (div) 20 pixels bigger as the
padding effects the inner element, not
the outer element, and pushes it out.
001 .about_txt {
002 float: left;
003 width: 250px;
004 padding: 20px;
005 }

The footer has taken the web by storm

and has now developed into an area that
needs good planning
73

WorldMags.net

Introduction to Responsive Web Design

WorldMags.net

Responsive design

Introduction to
Responsive Web Design
Ultimate guide to discovering responsive web design and
how to start using it today
Responsive web design
With the growing plethora
of internet enabled devices
it is important to ensure
your website is responsive.
Understanding responsive
web design practices will help
you build websites suitable for
every screen size whether large,
medium or small.

<above> More websites, including the popular Mashable news website, are becoming responsive

What is Responsive Web Design?

With the advent and increasing number of users browsing the web on mobile devices and with no
evidence of slowing down the purpose of one design that fits all is more vital than ever before. Responsive
web design is the answer to this problem. Responsive web design is the approach that allows websites to
adapt to users behaviour and environment based on screen size, platform and orientation.
Ethan Marcotte the man who coined Responsive Web Design (checkout his original seminal article on
responsive web design at alistapart.com/article/responsive-web-design) discusses what responsive
web design is. Its not a single piece of technology but rather a collection of ideas and principles and
combination of techniques
allowing your website to
respond to the multitude of
different screen sizes whether
this be phones, tablet devices,
desktop, game consoles, TV or
even wearable.
With new devices and
screen sizes being developed
everyday its important to ensure
your website adapts to these
changing screen sizes today and
for the future.
<above> Ethan Marcottes original article who coined responsive web design back in 2010
74

WorldMags.net

Introduction to Responsive Web Design

Responsive design
WorldMags.net

Examples of Responsive Websites

Many modern websites you see today are actually in-fact responsive. Take the Microsoft website as an
example (www.microsoft.com). When you resize this website in your browser window you will notice the
website responds and adjust to accommodate the website content to fit in your browser window.
Another great example is the Starbucks website (www.starbucks.com). It magically resizes to fit
comfortably in the new width of the web browser. Notice when viewing this on a mobile device the
navigation collapses into drop down navigation activated by the burger menu icon.
Orientation of the screen changes when you view this site portrait and via landscape.

Fluid Layouts

Quick Tip

In the past we had liquid layouts, where only the layout columns
structural elements and text were truly fluid which expands and
contracts as the browser window size changes. But this was not
truly flexible, images were not fluid which could easily break
layouts. This included structural layouts which directly broke the
layout if pushed enough.
This is where fluid grids excels where traditional liquid layouts
failed. Fluid grids are a fundamental key principle of responsive
web design. Rather than designing for rigid pixels or arbitrary
percentage values, we can use grids to provide structure and use
relative units to provide fluidity defined by using maximum width
to carefully design in proportions.
When designing in traditional pixel based unit, there is a formula
we can use to identify the percentage values, by using:

Common responsive
breakpoints you may want to
use http://responsivedesign.
is/develop/browser-featuresupport/media-queries-forcommon-device-breakpoints.

001 Target / Context = Result

To see this formula in action we have a HTML page with:

001
002
003
004

<div class="wrapper">
<section></section>
<aside></aside>
</div>
75

WorldMags.net

Introduction to Responsive Web Design

WorldMags.net

Responsive design

The CSS:
001
002
003
004
005

.wrapper {width: 960px;}

section,
aside {margin: 20px;}
section {float: left; width: 640px;}
aside {float: right; width: 300px;}

To convert the fixed units and turn them relative we can use the
flexible grid formula:
001
002
003
*/}
004

section,
aside {margin: 2.083333333%; /* 20 / 960 = 0.02083333333 */ }
section {float: left; width: 66.666666666667%; /* 640 / 960 = 0.66666666666667
aside {float: right; width: 31.25%; /* 300 / 960 = 0.3125 */ }

We set our context as our wrapper which is 960 and the target value is
either our section, aside and margin. Using this formula we can apply
this throughout our grid to build a dynamic website to scale every
viewport size.

Designing Responsive Websites

Quick Tip

When designing any website, planning and setting out user goals is
essential to crafting the best possible experience; users need to be
able to interact with your website with minimal thinking.
Its beneficial to organise the site structure and mapping out the
architecture and possible framework that dictates the different
break points the site will respond to. Its good to wireframe and map
out your website using traditional tools simply with paper and pen.
Or use helpful digital software such as the online wireframing tool
Balsmiq (balsamiq.com).
After mocking up your website, its not necessary to design pixel
perfect desktop designs. Because it will only be part of one static
snapshot of a layout which is in constant fluid motion. Nor does it
make sense to design every single screen imaginable.
When designing a responsive website it is important to use a
grid system. Typically grids
are measured in pixels but
Setup grids and breakpoints
now each grid will become a
percentage of a page width.
1 Calculate grids and
2 Download
Be aware when the browser
breakpoints
Click download your Gridpack
Head over to http://gridpak.com/
to download the PNG for design
window size changes the
to setup the number of columns
purposes and CSS. Give credit for
column width will too, this will
and breakpoints.
your resources on your site.
vary between resolutions.
Use Responsify to generate your
responsive template including
grids columns, gutter width
and breakpoints http://app.
responsify.it/

WorldMags.net

Introduction to Responsive Web Design

Responsive design
WorldMags.net
Setting up breakpoints
with media queries

1 Setting up mobile
breakpoints This will be set for
screen width of 320px and max
width of 480px.

2 Setting up tablet breakpoints

This will be set for screen width
of 768px up to 1024px.

Modular design
To make your designs more fluid and ensuring it adapts to whatever
environment it is viewed on even on a narrow screens such as
mobile devices you will need to think of each element of your
webpage to be modular.
This includes breaking down the page into components for
example the header, navigation, main content, sidebar and footer.
Imagine this as a puzzle that can be reassembled or re-organised to
fit on smaller screen size.
Its important to keep the information architecture coherent for
example the links need to be grouped together in a navigation and
that content should still be linear and easy to navigate.
Navigation

Navigation changes to a mobile friendly version when

the width reduces from 539px using media queries

The search is hidden on mobile devices and

replaced with a glyphicon to activate it

Responsive Images

Flexible grids

All images are set to max-width: 100%

to ensure they scale when the screen
size changes

Components are neatly structured using

flexible grids so they resize in proportion on
smaller screen

3 Setting up desktop
breakpoints This will be set
for a minimum screen size of
1224px .

4 Adding your custom styles

You can now apply specific
styles for specific devices or
screen widths.

WorldMags.net

Introduction to Responsive Web Design

WorldMags.net

Responsive design

Media Queries

Media queries and

flexible layouts

Once the design of your website becomes more complex for

example spanning across three or more columns. This becomes a
problem as the screen width becomes too narrow for mobile users.
This is where CSS3 media queries comes into play. Media queries
allows you to specify CSS styles to be applied once conditions are
met such as when a browser reaches a specific width.
There are a few methods to incorporate media queries on your
website. First method is by linking this within the HTML <head>:
001 <link href=responsive.css rel=stylesheet media=all and (max-width: 960px)>

1 Style mobile screen To resize

website to fit on less space on a
mobile screen.

Or using the @import rule:

2 Add in media query Add a

media query for screens of a
maximum of 320 pixels.

001 @url(responsive.css) all and (max-width: 960px) {

Most common practice and to avoid further HTTP requests is to just

use @media within your existing style sheet:

001 @media screen and (max-width:

320px) { }

001 @media screen and (max-width: 960px) {

3 Remove floats Within media

query set width to auto on the
section and aside.
001
002
003
004

We can set the media type to either all, screen, print, tv and
even braille. Each media query includes a media type followed by
one or more expression. Logical operators in media queries help
build powerful expressions. We can use the and operator to add
extra conditions:

section, aside {
float: none;
width: auto;
}

001 @media all and (min-width: 600px) and (max-width: 940px) {...}

The above selects all media types between 600px and up to 940px.
Besides setting the min- and max-width we can also use the
orientation media feature to determine if a device in landscape or
portrait mode.

Media support for older browsers

1 Media queries support for
older browsers
Download Respond.js over at
github.com/scottjehl/Respond

4 Widths auto span The widths

on the elements now auto
expand across the viewport on
mobile devices.

2 Link to JavaScript
Link to respond.js in your
<head> right after where you
have put your style sheets.

WorldMags.net

Introduction to Responsive Web Design

Responsive design
WorldMags.net
Retina Images

001 @media screen and (orientation: landscape) {...}

Unfortunately older browsers such as Internet Explorer do not quite

understand media queries. To combat this we can simply add the
only keyword.
001 @media only screen and (min-width: 600px)

User agents using HTML4 algorithm will now simply ignore media
queries that you have inputted.
1 Serve high-res images to
retina displays Download
Retina.js at http://imulus.github.
io/retinajs/.

Viewport
If you built a responsive website and try to view it on a mobile
device you will notice the website has scaled to the desktop size.
By adding a viewport meta tag we can ensure browsers scale the
webpage to fit the screen size its on, with:
001 <meta name=viewport content=width=device-width, initial-scale=1>

Fluid images

2 Copy retina.js to your scripts

folder Copy the plugin to your
JavaScript folder.

Most websites contain some sort of media typically imagery. With

a responsive website content is expected to fluidly change to the
screen resolution, this implies images will need to as well. Luckily
there is a easy solution to scale images when the viewport changes.
In the CSS simply add:
001 img {
001
001 }

3 Add script to <head> In the

max-width: 100%;

Clearfix

Media query

Using the clearfix hack to automatically clear

after itself so it wont be necessary to add
additional markup

Percentage grids are placed in a media query

based on screens with a minimum width
of 450px

4 Reference retina images For

retina images save them as
image@2x.png

Quick Tip

Zoom: 1 fix

Calculated grids

Applying the zoom: 1 to fix old browsers such as

Internet Explorer to fix the hasLayout bug

This grid structure has 12 columns which are

broken down into calculated percentage widths

Its a good idea to add height:

auto; when using responsive
images in case the height
does not resize in proportion
with the width.
79

WorldMags.net

Introduction to Responsive Web Design

WorldMags.net

Responsive design

Applying this fix will allow images to scale down dependent on the
containers width.

Compressing CSS

Mobile first

1 Compress CSS
To reduce file sizes and the
amount of HTTP requests head
over to http://www.shrinker.ch/

When designing for responsive websites its a good rule to follow

the mobile first principle.
Mobile first is an approach where you design for the mobile
experience first and then work your way upwards towards tablets
and desktops. This forces us to focus on the advocate constrains
of available space on mobile screens that do not have enough
real estate for ads, social media buttons etc. It would be wise to
use media queries to limit unused styles and scripts should not be
loaded for mobile devices including media assets.

2 Upload files
Upload all your CSS files and
click shrink
3 Copy shrinked file
Copy the shrinked code you have
created into a new CSS file called
compressed.css

Browser testing

4 Update CSS link

In the <head> make sure you
update the CSS link to the new
compressed.css

Its fundamentally important to always test your website in as many

web browsers, operating systems and devices as possible. With the
growing number of devices and screen resolution its very hard to
have an extension assets of hardware available for thorough testing.
There are some free online tools available to help. There is the
Responsive Web Design Testing Tool by Matt Kersley (mattkersley.
com/responsive/) and Responsive Test (responsivetest.net) both
allow you to enter in a URL to preview your website will look at
different resolution and devices.
There are some more powerful paid for tools to help give a better
preview and interaction on real world web browsers and devices.
Spoon.net (https://spoon.net/browsers) has a collection of web
browsers you can run locally.
Cross Browser Testing (crossbrowsertesting.com/) and Browser
Stack (www.browserstack.com/) are very similar whereby they
allow you to run live emulators from legacy web browsers to actual
working iOS, Android and Windows mobile devices including tablet
devices for you testing pleasure.

Quick Tip

Download Foundation Framework

Download GuideGuide
Photoshop plugin (http://
guideguide.me/) to set
up your own guides in
Photoshop, with many
variants and ease.

1 Head to Download
Go to foundation.zurb.com/
develop/download.html You may
customise the components and
grid system

2 Click Custom Build

Unzip the downloaded pack and
get started building your responsive
website, its fairly straightforward
from there.

WorldMags.net

Introduction to Responsive Web Design

Responsive design
WorldMags.net
Responsive Frameworks
Building a new responsive website can be daunting, with the
technically issues surrounding responsive web design, calculating
number of columns, grids, percentage widths, breakpoints and
further technical hurdles that may appear through development. A
solution is to adopt an existing responsive framework.
There is a huge benefit when relying upon a responsive frame to
begin it wont be necessary for you to calculate your own fluid grids
instead most modern frameworks will allow you to get going and
starting building your website. Essentially picking up a framework
will help save tremendous amount of time and generally they
come packed with predefined styles, components, font sizes, form
elements, CSS resets and more.
Popular frameworks will have an active community and even
extend the framework further with new and robust plugins. There
will traditionally come with clear documentation for you get started
when using the framework and understanding all the code and
components available.
Two very popular and well maintained responsive grid
frameworks available are Bootstrap and Foundation.

Futher reading
There are a lot more reading
to further your discovery on
responsive web design and
to continue on improving
your skills.
Websites that contain
great resources on responsive
web design include This is
Responsive http://bradfrost.
github.io/this-is-responsive/
a collection of news and
resources. A beginners guide
to responsive web design
resource list www.targetlocal.
co.uk/responsive-webdesign-resources/.
Books that help further
your skills include HTML5 for
Web Designers http://www.
abookapart.com/products/
html5-for-web-designers
and CSS3 for Web Designers
www.abookapart.com/
products/css3-for-webdesigners and Responsive
Web Design www.
abookapart.com/products/
responsive-web-design all
are by A Book Apart.
Checkout some great
examples of the best
responsive websites out
there on Awwwards www.
awwwards.com/websites/
responsive-design/ and
more to see over on Get
with the Future socialdriver.
com/2014/03/05/65-bestresponsive-website-designexamples-2014/.

Bootstrap (getbootstrap.com) originally created by the team from

Twitter, this framework is one of the most popular open source
responsive framework out there. This library consist of a huge
amount of components and re-usable functionality such as drop
downs, glyphicons, styled form elements, progress bars, JavaScript
powered plugins including carousels, alters, tooltips, transitions and
many more.
Zurb Foundation (foundation.zurb.com/) is one of the most
advanced responsive front-end framework. It was built with speed
in mind so all the components and JavaScript plugins have been
performance tuned. Foundation as the name suggests is used as
a starter for any responsive website, it contains a responsive grid
system, mobile friendly navigation, customisable components,
some handy media plugins including flexible videos, lightbox and
carousel slider.
Which ever framework you choose always make sure you
carefully read the documentation and make sure it suits the needs
of your website.
81

WorldMags.net

Bootstrap
WorldMags.net

Responsive design

Bootstrap
Responsive design made easy
Bootstrap is a powerful yet approachable front-end framework designed to
make it quicker and easier to develop user-friendly websites
It was in August 2011 that Mark Otto, a developer
at Twitter, announced a new framework that the
social media platform had developed internally,
with the aim of providing a consistent API while
developing the popular micro-blogging tool.
Bootstrap was designed to help Twitters
developers avoid the mish-mash of competing
and incompatible frameworks and libraries.
It provides a unified toolset for all front-end
development requirements including advanced
typographical control, a built-in grid system,
and the option to use components to extend
functionality to suit any particular needs that go
beyond the basic framework common to every
website. Twitter have since produced one of their
most compatible and functional websites to
date, with the sleek new design not only being
pleasing on the eye, but providing its users with a
basis of comparison to the other social networks.
Fundamentally Bootstrap is pure CSS, but
as its built with LESS (a pre-processor that
offers flexibility beyond what normal CSS can
achieve) and has Sass support, there is a range of
additional benefits over and above plain styles.
The core CSS is broken into components,
allowing it to be easily managed and adapted.
Each file in the set of Less source files deals
with one particular characteristic, so you have a

type source file, a forms source file and a tables

source file.
Bootstrap is designed to be mobile-first,
meaning its fully responsive which includes a
powerful four tiered grid system so your layouts
can adapt to phones, tablet, desktops and large
desktops screens. Given that much of our internet
usage is moving onto smaller devices, this seems
to be a sensible move.
On top of the CSS framework, a series of jQuery
plugins provide functionality such as support for
drop-down menus, modal boxes and much more.
Taken together, these different elements
provide the basis of a plug-and-play, standardscompliant and user- friendly HTML5 website. The
idea is to facilitate rapid application development
without having to build your own solution each
and every time you start a project.
Well take you through the Bootstrap
framework, explaining how to use it and why it
will revolutionise the way you create websites.
Well show you some excellent examples of
Bootstrap-powered websites, and point you
in the direction of useful additional resources
that will help you take full advantage of all the
possibilities on offer. Its particularly useful to
understand why the framework is structured the
way it is, so lets start there.

WorldMags.net

Bootstrap
Responsive design
WorldMags.net

Bootstrap: What and why

To get the most from Bootstrap, you need to understand how its structured,
and why
There may be an element of confusion as to why there are
so many individual files that make up the library. The basic
principle behind segmentation of the different component
parts of the library is that each can be updated without
adversely affecting the others, making the system more
manageable. The benefit of using the LESS system is that
you can combine all your CSS into a single file when it
comes to pushing your code live.
Looking at the Less source files (a CSS preprocessor
Bootstrap was built with), lets focus on seven key files
that made up part of the uncompiled CSS. Since there
are a dozens more. The original core functionality remains
the basis of Bootstrap, so lets have a quick look at what
it contains:
Reset Based on Normalize.css reset rules, this removes all
the browser formatting defaults, giving you a completely
clean slate to work with.
Variables A set of globally shared and commonly used
values including colour values, typography, scaffolding,
iconography, components, spacing, tables, buttons, media
queries breakpoints and more. .

Mixins Mixins are useful way to to mix-in a bunch of

properties from one rule set into another. Bootstrap has a
collection of imported mixins to be used, which includes a
vendor-prefix which provides all browser vendor prefixes for
you in your final compiled CSS.
Scaffolding The other reset styles that normalize.css
does not include such as box-sizing, body reset and form
elements. As well as basic page templates and structure for
your site.
Type Styles for all the typographical aspects of your design.
Forms Styles that deal with formatting all things related to
your forms.
Tables A set of styles that provide presentation for tabular
data. There are a number of jQuery plug-ins you can use to
add specific functionality to your design. Note that although
the framework is structured in this way, if you simply
download the latest release youll get pre-compiled and
minimised code, so you dont need to worry about using
the Less.js compiler.

Get started
Bootstrap works by providing a clean, uniform approach
to creating the most common user interfaces on the web.
Whether youre creating a simple brochure website, or a
complex form, the same core components make up the
site design in terms of styles and content structure. By using
Bootstrap you can save time, pulling in ready-made controls,
layout elements and styles. This leaves more time to work
on aesthetics and testing.
The first thing youll need to get started with Bootstrap
is the framework itself. Visit getbootstrap.com to download
the latest version of Bootstrap. All the media queries, grid
sizing are all ready and setup included in this download.
Once youve downloaded the framework, you simply
need to plug in the CSS and JavaScript files to create your
first Bootstrap page.

The grid

A fundamental aspect of Bootstrap is the 100% fluid

grid system built into the framework. There are four grid
options available, but the principle approach to working
with a grid remains the same. The responsive grid scales
up to a maximum of 12 columns as the device or viewport
increases. You can define how many columns each box
should span, allowing you to simply and effectively align,
without having to calculate widths manually.
83

WorldMags.net

Bootstrap
WorldMags.net

Responsive design

Benefits

We take you through just a few of the benefits

of Bootstrap

Modular
The Bootstrap framework is modular, so you only need
to call in the elements you need for your specific project,
making it relatively lightweight to deploy.
Responsive
The grid system is fully responsive, allowing you to
design once and deploy your website across multiple
device profiles, all without having to do any complex
mathematics or calculations.
Quick to develop
Bootstrap is built on standard CSS and JavaScript making
it very quick to develop the accompanying HTML, and

easy to get clean cross-browser results without having to

start from the ground up each time.
Extensible
There are over a dozen jQuery plug-ins designed
specifically to work with Bootstrap, providing out-the-box
functionality for the likes of carousels, tooltips, dropdowns
and transitions. It is also easy to develop your own plugins.
Pre-built components
Bootstrap includes a series of user-interface components
that you can instantly deploy, including drop-down
navigation bars, auto-pagination, media objects, progress
bars and many more.

Why work with templates

A brief outline as to how templates can help you with developing your design
Although Bootstrap is a pure CSS and JavaScript library built
with Less.js, theres a flourishing community of templates.
These HTML packs often include images and specific CSS
additions to give you a head start with regards to developing
your design.
Bootstrap itself provides a number of templates
in the Get Started section of the getbootstrap.com
website, under Examples, demonstrating a number of
different components and plug-ins in action. These are
barebones pages, only designed to provide the structural

Custom
download
Get a custom download of Bootstrap
by visiting getbootstrap.com and
clicking on Customise. You can then
specify which components, variables,
plug-ins and base-styles are included.
The download includes minimised
files for low-bandwidth deployment to
production sites, and uncompressed
versions for testing.

elements of a typical layout, and covering common

design patterns such as a blog, dashboard, login form or
full-width image carousel. Its well worth having a look at
these when youre first starting out with Bootstrap, if for
no other reason than to understand how useful the
framework is in rapidly developing common functional and
structural requirements.
Once you move outside the official Bootstrap website,
however, there is a wide range of free and commercial
templates available that go far beyond merely providing
the structural framework, and move towards a fully-realised
design that you can deploy as-is if desired. Some of these
templates handle a specific area of functionality, such as an
admin system, basic eCommerce website, or photographers
portfolio, while others take a more generic approach.
Common to almost all templates is that youll need to wire in
your own functionality to handle any server-side processing
required, but given a fully-realised front-end design, it
becomes a much quicker process to develop prototype web
apps if you use a template to provide you with a flying start.
When youre looking for templates or themes, be sure
to check that theyre using the standard Bootstrap source
code as a basis, and that ideally their additional CSS design
elements are incorporated in a separate file, or as a fork
from the main Bootstrap branch. This will allow you to
(relatively) safely apply any subsequent Bootstrap updates
without having to spend a lot of time reverse engineering
the changes.

WorldMags.net

Bootstrap
Responsive design
WorldMags.net

Six of the best

We give you a quick rundown of our six favourite templates and some of the
features they offer designers

1. mPurpose

4. JA Appolio

This free theme from http://bootstrapzero.com/

bootstrap-template/mpurpose is a fully responsive
multipurpose template. It includes over 30 sample
pages from portfolio layouts, business/agency layouts to
carousel slider, eCommerce shopping layouts and more.
This is ideal for a web design agency site.

JA Appolio is a Joomla theme built on Bootstrap,

available free from http://www.joomlart.com/joomla/
templates/ja-appolio. A desirable portfolio template,
it bundles with amazing features including parallax
design, blog ready, a selection of 5 colour schemes and 9
bonus pages.

2. Fullby

5. DashGum

Free from http://www.marchettidesign.net/fullby/,

Fullby is a Wordpress theme using Bootstrap. It features
a responsive video slider, animated shuffling of blog
posts, animated widgets, and wide selection of colours
to choose from.

Also free http://bootstrapzero.com/bootstraptemplate/dashgum a 15 page dashboard panel or admin

theme, this boost some unique interactive components
including charts, tables, calendar notifications, to-do lists
and more.

3. StanleyWP

6. Awesome Photography

This theme, by http://gentsthemes.com/themes/

stanleywp-twitter-bootstrap-wordpress-theme/ is also
free. This Bootstrap template demonstrates a truly flat
style looking personal portfolio can be so simplistic, ideal
for anyone running their own portfolio and/or blog.

This premium theme https://wrapbootstrap.com/

theme/awesome-photography-template-WB04B42CG
is perfect for any photographers. This template deals with
heavy imagery with some interactive animated elements
to allow you to present your art beautifully and clean.
85

WorldMags.net

Bootstrap
WorldMags.net

Responsive design

Using components for your

user interface
Bootstrap goes beyond merely providing a responsive grid system: its a fully
featured user-facing toolkit that includes a whole set of user interface elements,
known as components, that offer simple, speedy integration

Among the key features of the Bootstrap framework is its

concept of components. These are re-usable user interface
controls that cover the most common interactions, and
range from drop-down menu systems all the way to
modal pop-ups.
Components are implemented using a combination
of styles and scripts, and are typically initiated simply by
applying a specific set of classes to your markup. The
documentation (available from getbootstrap.com/
components) provides some great examples for each of the
components that ship as part of the core Bootstrap build,
but each of these is just the starting point. The idea is that
you will dress the component to suit your own websites
layout and aesthetic treatment, altering or extending
functionality as you require, to provide a perfect fit for all of
your needs.
Better still, because the component system is entirely
modular, youre not limited in any way to the twenty or
so that come in the box; there are a raft of additional
components available on the web that extend the basic
functionality still further. Some of these are not much more
than a jQuery plug-in, but tend to be designed around the
Bootstrap ecosystem, offering similar syntax and integration
to the standard set.
Although its often tempting to build your own solution
to a particular user interaction requirement, by using off-theshelf components you can focus your time on enhancing
the all-important user experience, and rapidly prototype
your ideas without impacting negatively on time or cost.

Its also extremely convenient to use some of the more

basic components, such as list groups, panels and wells, as
these inherit the global style definitions automatically. This
means you can easily control the look and feel of common
content containers without having to explicitly define each
one individually.
Naturally, you can create your own additional
components that youll be able to subsequently re-use in
future projects. The Bootstrap documentation walks you
through the process of integration, or you can use a thirdparty service such as Jetstrap (jetstrap.com/) to build your
own custom user experience elements and designs.

Customisation
Components are little more than
HTML markup classified using a
combination of structure and classes.
As a result, theyre incredibly flexible
and infinitely customisable. If you
want to change the look or the way to
interact, you simply need to edit the
associated CSS and/or JavaScript.

WorldMags.net

Bootstrap
Responsive design
WorldMags.net

5 Popular UI
Components

A collection of elements that can

be instantly added to a site.
3. Alerts
Useful when youre trying to draw your users
attention to important information either in
response to their input, or as a consequence of
something new or time-limited alerts are an
extremely common call-out approach to highlighting
feedback. Bootstrap provides four styles, including a
dismissible alert.

1. Jumbotron
This component encapsulates a popular layout
technique: an oversized typographical box. Typically
such an area includes a call to action, so the Bootstrap
Jumbotron has a button built in to the design which
is, of course, easily customised.

4. Input groups
Input groups make it easy to develop clean, validated
user forms that respond consistently. The core styling
is simple and follows the current trend for minimalist
aesthetics, you can also append or prepend text or
buttons either side of text based inputs.

2. Tabs and Pills

5. Badges

A popular navigational device, the tab allows you to

show lots of content in a small space. The pill can be
used to work similarly or as an intra-page navigation
system. The default styling is configurable, so youll see
a lot of these dressed to the suit the site in question.

A great way to convey to users that there are new items

to read, actions to take or feedback to collect. The
Bootstrap implementation is clean, allowing you to
avoid extraneous markup, while rendering in a familiar,
user-friendly bubble.

WorldMags.net

Bootstrap
WorldMags.net

Responsive design

Build your first

Bootstrap webpage
Bootstrap is designed to make developing a fully functioning user interface
simple well show you just how quick and easy it is to get started

Basic HTML
Download the framework

First of all, be sure to visit getbootstrap.com and

click on the Download Bootstrap button. Grab the
standard download, and unzip the contents to your website
folder ready for use.

Bootstrap plugs straight in to your regular HTML

page, so start by creating a simple blank page that
includes the jQuery library. Add a link to the minimised
version of the Bootstrap CSS file, and add the minimised
script. Best practice says we should put our scripts at the
end of our HTML to speed up loading for users.

Add a nav bar

Add grid-aware containers

You can easily add a navigation bar to your page

by inserting an unordered list, each containing a
list item. Give the <ul> a class of navbar. This hierarchy of
markup defines the way the navigation will be presented,
including all hover states and effects.

Bootstrap uses classes to define how different

elements should be styled, including the way they
fit into the grid system. Add three <divs> to your page and
give each a class of col-md-4. This aligns them to the fourcolumn grid.

WorldMags.net

Bootstrap
Responsive design
WorldMags.net

A little bit
LESS.js
Add a Jumbotron

A popular way to draw attention to your key message is by using a

Jumbotron a large heading and first paragraph that clearly spells out
what your website is all about. Add the code from Bootstrap component section
http://getbootstrap.com/components/#jumbotron to add a Jumbotron above
your three four-column boxes.

CSS is a fantastically easy

language to learn, and it
increasingly offers a wide range
of functionality as browser
vendors have embraced CSS3
in earnest. The biggest problem
with CSS is that its static in
nature inevitably you end up
writing the same styles over and
over again, with no way to write
your colour choice once as a
variable, and re-use the variable
across the stylesheet. There have
been some efforts to include
CSS variables natively in the
browser, but theyre not very well
supported, and are quite limited
in their capabilities.
LESS offers an easy-tounderstand solution. The system
extends CSS with variables,
operators and functions. What
this means in practice is that you
can define your core properties
as variables and re-use the
variables this is as opposed to
using the explicit values they
contain, making it quicker and
easier to change styles globally.
LESS offers a lot more
than this, but does require
compilation. You can get hold of
all the full details at the lesscss.
org website.

Make it responsive

Bootstrap is fully responsive from the beginning, your webpage will be

instantly responsive. Try expanding or collapsing your web browser to
see the responsiveness nature in action. This webpage is now mobile, tablet and
desktop friendly.
89

WorldMags.net

Bootstrap
WorldMags.net

Responsive design

Create a carousel with Bootstrap

We get in depth with one of the most visual components within Bootstrap:
the carousel. Read on to find out how to customise the carousel to fit your
own design

Grab a template

Replace the hero

The easiest way to start this project is to grab one

of the ready-made example templates on the
getbootstrap.com website. Weve opted for the Jumbotron
template because we can replace the Jumbotron with our
carousel. Copy the HTML source code, and paste it into a
new page to get started.

Were going to replace the Jumbotron hero panel

with a carousel. Visit the documentation for the
Carousel plug-in, found within the JavaScript section of the
Bootstrap website, and copy the code example. Well paste
this in place of the Jumbotron in our template.

Add user controls

Build the HTML

Paste in the code on your clipboard and have a quick

look at how its structured. Youll notice that there are
two principal sections: the carousel-inner, which contains
each slide in the carousel, and the carousel-indicators that
provide the dots demonstrating the currently visible slide.

Also within the sample code is a pair of navigational

elements, both rendered as anchor tags within
the HTML. These are used to page through the individual
carousel slides. The classes and data-side properties are
extremely important here, as they provide the hook to the
carousel itself.

WorldMags.net

Bootstrap
Responsive design
WorldMags.net

Responsive carousel
The carousel slideshow component comes fully responsive be sure that your images are wide enough to
encompass all common screen widths. This can create a big impact, especially on portfolio websites where
images are used to show off your work.

Tweak the behaviour

Change the settings

Youll notice that by default the carousel will play,

changing the slide every 5000 milliseconds (which is
the same as 5 seconds). You can update this value by passing
an argument to the .carousel() call. Pass in a value assigned
to the interval property, and you can reduce or increase the
time to suit your needs.

Customise the look

Plug in your content

As with every other plug-in and component within

the Bootstrap framework, you can fully adjust the
look and feel to suit your own website. Simply edit the CSS
styles for the different elements with a class that begins
.carousel so to change the background colour of the
caption, edit .carousel-caption, for example.

Refer to the documentation to view the additional

methods and properties you can set to alter the
settings for the carousel. A good example of a change you
can instigate is to add a button that calls the pause method,
preventing the carousel from automatically moving to the
next slide.

Finally, all you need to do is plug in your own

images and captions, including any links youd like
to include, and test your page. Keep in mind that all the
different elements of the stock carousel can be customised,
so youre not stuck with the default user controls, caption
position or carousel size. Have fun!
91

WorldMags.net

Bootstrap
WorldMags.net

Responsive design

Resources
Bootstrap has a lot of resources
available on the web, check out five
of our favourites below
Bootstrap
getbootstrap.com
Straight from the source, the Bootstrap website
provides an off-the-shelf download of the framework,
a customisable download builder, and a full set of
documentation for the framework covering all the
standard plug-ins, components as well as the grid system.
This is also the place to get the latest official news
Bootstrap Google+
https://plus.google.com/communities/
110370020620457615447
This is the Google+ community group for Bootstrap, visit
here if youd like to seek help from other users, or to learn
about the latest news. This group currently boast over
4000 active members. There are regular updates when
new templates, components and plugins are launched.
Bootsnipp
bootsnipp.com
A handy resource site that gathers together HTML
snippets, themes, components and plug-ins in a gallery
thats easy to browse. Users can contribute snippets,
sharing their own work with the community for mutual
benefit, and the site also features a handy page of links to
other Bootstrap resources for quick reference

Be inspired
Bootstrap is the underlying
framework for some amazing
websites take a look at two of the
best to get some inspiration for your
next project

Lexi Miller
http://leximiller.com/
This clean, simplistic and gorgeous looking feminine
website sells fashionable athletic clothing. It takes
advantage of the responsive native in the Bootstrap
framework and utilises it as its own.

Start Bootstrap
http://startbootstrap.com/bootstrap-resources/
Kickstrap calls itself a complete kit for making websites,
building on top of Bootstrap with additional support for
libraries such as Raphael without the pain of manually
bringing together disparate resources. A useful resource
for sites that need to go further than basic Bootstrap
Bootswatch
bootswatch.com
Bootswatch is a simple theme site for Bootstrap, but rather
than focus on the complete end product, it provides a
core set of styles that integrate beautifully with the basic
Bootstrap components to create markedly different
aesthetic treatments. Its limited in the range of themes it
offers, but many are worthy of forming the basis for your
own customisations.

Entora
http://entora.com/
A beautiful entertainment source to follow your favour
artists. This website takes advantage of the mobile first
fluid grid system using the extra small grid option to
force grids to be horizontal at all times.

WorldMags.net

Bootstrap
Responsive design
WorldMags.net

Whats the next step?

So youre all set up with the basics, but what happens now? We give some
guidance as to where to go from here with Bootstrap, including how to
approach customisation

Now that youve got an overview of how Bootstrap works,

what makes up the library, and how to leverage the
framework to build a website, youre ready to start building
your sites using Bootstrap.
Your first step should always be to create a customised
download, rather than relying on the kitchen-sink approach
of downloading everything. This will make your site leaner
and more bandwidth-friendly, which your users will thank
you for. Once youve got the framework, build your own
theme working on top of an existing template or theme if
youd like a quick start and develop your content in situ.
Bootstrap is particularly powerful for rapidly prototyping
user interfaces, making it an ideal solution for generating
style tiles or non-functioning mockups when presenting

work to clients. Keep in mind that your prototypes can go on

to form the basis of the final product too, so youre
saving time upfront as well as in the website or application
build phase.
Once youre confident, you may want to develop custom
functionality or components that simply arent covered by
the default install of Bootstrap, or that work differently to
the standard behaviour. You dont need a huge amount of
technical knowledge or skill to be able to generate your own
assets that you can go on to reuse in future projects. Similarly,
if youre a front-end developer you may find that you want to
develop custom widgets and plug-ins that leverage jQuery.
This process is very straightforward, and theres a full set of
documentation on the getbootstrap.com website.

Bootstrap 3
Since the release of version 3, lets look back comparing to the predecessor
and on advancement it has made.
The difference between Bootstrap 2 and Bootstrap 3 is
that version 3 takes a mobile-first approach to ensure
your designs is fully responsive on the get go.
Under the hood the developers have focused on
trimming and rationalising the framework so that, for
example, rather than internally referring to an alert box

as red, a more semantic naming scheme is used. The

CSS has been tidied up too.
There are some structural changes to the way you
build your web apps, so the shift to version 3 from
version 2 will require some HTML alterations, but the
fundamental approach remains the same.

WorldMags.net

Build a custom Foundation template

WorldMags.net

Responsive design

Build a custom
Foundation template
Get started using Zurbs Foundation framework to build a responsive template
that can be reused for any project
When starting a new responsive web design project, trying to custom develop your own framework
that includes a flexible grid system, media queries, typography, JavaScript media including video,
carousels, lightboxes and more can be exhausting. Not to mention the changing web arena, youll have
to rigorously maintain and update your framework to keep up to date with all the new features.
Using an open source framework like Foundation by Zurb helps to relieve the stress on developers.
This robust and flexible framework is well documented and has a host of ready components to reuse;
the best part is you can easily customise it, adding and removing functionality to suit your needs.
Foundation is built to be mobile first, so as soon as you start using this framework for your web project
its instantly responsive.
Through this tutorial well touch upon some of Foundations core components and how to assemble
these to create your own custom template, which can be reused for any project.
94

WorldMags.net

Build a custom Foundation template

Responsive design
WorldMags.net
002
003
004
005
006
007
008

color: #666;
}
h1, h2, h3, h4, h5, h6 {
font-family: Cabin, sansserif;
font-weight: 500;
color: #666;
}

Build the navigation

Download Foundation

To begin, navigate over to the

Zurb Foundation framework
website at foundation.zurb.com.
Click on the Download Foundation
5 button and you will be presented
with multiple choices to download
Foundation. You can select from
a complete package, lightweight,
custom or Sass. In this tutorial well
be using pure CSS to allow beginners
to follow along, so go ahead and
download the complete version.

downloaded at www.google.com/
fonts#UsePlace:use/Collection:Cabin.
Its good practice not to directly edit
the foundation.css, which contains
all the framework styles. We should
house all our custom styles in a
separate CSS file called style.css.
001

002
003

Create a <nav> wrapper and

within this have a <ul> with
a <li> item for the main title, with a
second <li> for the mobile menu

Basic styles

04
Unarchive the zip

Unarchive the Foundation

framework you just
downloaded; inside you will find a CSS
directory that includes the complete
Foundation CSS file and Normalize a
CSS reset. Within the JS directory is
the complete JavaScript library and
scripts. The index.html has all the
standard HTML5 boilerplate ready.
Start by removing everything within
the body tag.

HTML head

Within the HTML head well

add a custom Google Font
called Cabin, which can be found and

Now that we have our head of

our HTML set up we can start
applying some default styling. Create
a new style.css in the CSS directory.
Lets change the default font colour
to a dark grey and make sure all of
our headings are now using the new
Google font Cabin.

001

<above>
The Top Bar plug-in is fully responsive
navigation, even the drop-down menus are
device friendly

body {

Throughout this tutorial we have

focused on pure CSS but you could use
Sass, which allows greater customisation
of the framework using nested styles,
variables, function and reusable code.
95

WorldMags.net

Build a custom Foundation template

WorldMags.net

Responsive design

<left>
Using the Top Bar plug-in you
can easily create functional
drop-down menus, the only real
work is styling it up
<below>
Incorporating a responsive
rotating slider with swipe- and
touch-enabled functionality is a
breeze using the Orbit plug-in

(this will only appear on a small

mobile screen). The top-bar class is
used for presentational purposes, the
data-option stick_on will force the
navigation to stick to the top of the
browser window.
001

002
003
004

005
006

007
008

Sub menu

<nav class=top-bar data-topbar

dataoptions= sticky_on: large>
<ul class=title-area>
<li class=name>
<h1> <a
href=#>Foundation
Custom Template</
a></h1>
</li>
<li class=toggletopbar menuicon><a
href=#><span>Menu
</span></a></li>
</ul>
</nav>

Creating drop-down menus

can sometimes be overly
complex and tricky but Foundation
makes the whole process very simple.
Within the <nav> create a <section>
with the class top-bar-section.
Within this we create a <ul> and our
<li> items, making sure to add the
class has-dropdown to act as our
secondary menu.

001
002
003
004

005
006

<section class=top-bar-section>
<ul class=left>
<li class=hasdropdown>
<a class=active
href=#>
Main Item 1</a>
<ul class=dropdown>
<li><a
href=#>Dropdown

Option</a></li>
</ul>
</li>
</ul>
</section>

007
008
009
010

Style the menu

The beauty of an advanced

framework such as Foundation
is that it provides a lot of default
styling for us, which means we can
concentrate on structuring our page
and customising our styling a lot less.
You will notice the menu will have
its own custom styling already. Well
just add a drop shadow with some
browser vendor prefixes.
001
002

.top-bar {
-webkit-box-shadow: 0px 3px
7px 0px rgba
(50, 50, 50, 0.75);

WorldMags.net

Build a custom Foundation template

Responsive design
WorldMags.net
003

-moz-box-shadow:
0px 3px
7px 0px rgba
(50, 50, 50, 0.75);
box-shadow:
0px 3px
7px 0px rgba
(50, 50, 50, 0.75);

004

005

Creating a carousel slider is

extremely simple when we
use the Orbit slider plug-in. First well
wrap the code within a row class,
followed by a large-12 columns grid
to lay out our carousel. Apply a orbitcontainer class and a data- orbit dataattribute using a <li> item to separate
each slide.

006
007
008
009
010
011
012

Orbit JavaScript

Before the ending </

body> tag there is an initial
Foundation JavaScript, simply used
to call all plug-ins on the page. Using
this we can customise the plug-in
initialisation. We can configure the
options for the Orbit plug-in, so lets
change the default slide effect to a
fade animation and change the speed
at which it rotates.
001
002
003
004
005

}
});
</script>

002

003
004

Basic content

004
005

time_speed: 1000,
pause_on_hover:true,
bullets: false,

Orbit slider plug-in

001
002
003

006
007
008
009
010
011

The grid system is one of

Foundations most powerful
features, making it easy to create multidevice layouts. The row class is used
to hold all the columns, defining a grid
column of 12 indicates the number of
columns we need in a row. Below is
a basic structure of content using the
grid system.
001
002
003
004
005
006
007

<div class=row main-content>

<div class=large-12
columns>
<h1>Our latest work</h1>
<p>Lorem ipsum.</p>
<img src=img/photo.png
alt= />
</div>
</div>

Make a child theme

Adding a video is extremely

easy. Foundation will
automatically help you to scale your
video from an intrinsic ratio, so you can
guarantee it can be properly scaled
and viewed on any device. Simply add
the class flex-video as a containing
<div> around your video.
001

005
006

Panel component

Lets have some accompanying

content next to our video. Well
use another six-column grid and to
add components that help outline
sections on a page we can use the
panel component. All you have to
do is create a wrapping <div> called
panel encasing your content and
Foundation will automatically apply
a border and background colour to
this panel.
001
002
003
004
005

<div class=large-6 columns>

<div class=panel>
<p>Lorem ipsum .</p>
</div>
</div>

Lightbox gallery

To build a lightbox gallery of

photos to slide through with
a variable height, we can use the
Clearing plug-in. Again, wrap the code
in a row class with the grid columns,
open a <ul> and apply a class of
clearing-thumbs and a data-attribute

Foundation contains a whole host of

helpful components and the best place
to read and understand all this is by
looking at their detailed documentation
at foundation.zurb.com/docs/index.html.
97

WorldMags.net

Build a custom Foundation template

WorldMags.net

Responsive design

Lets create a contact form: first, open

a <form> tag and within this give it
a data-abide data-attribute to enable
validation. Make sure the input field
has a required attribute with a pattern
to define restraints on what users
should input.
001
002
003
004

<above>
The Orbit plug-in cannot handle variable height images but the Clearing Lightbox plug-in can
and makes scrolling through images friendly

of data-clearing. Each <li> item will act

as a separate photo slide.
001
002
003
004
005
006
007
008
009

010
011
012
013
014
014

<div class=row gallery>

<div class=large-12
columns>
<h2>Gallery</h2>
<p>View our latest
photos</p>
<hr />
<ul class=clearingthumbsdata-clearing>
<li>
<a href=img/
photo.jpg>
<img src=img/
photo.jpg
alt= data-caption=Text to go
here />
</a>
</li>
</ul>
</div>
</div>
</div>

001
002
003
004
005
006
007
008
{
009
010

Lets apply some styling to the

gallery. Well give this section a
light grey background and some top
and bottom padding. Each <li> item
will have a bottom and right margin
so theyre equally separated. Using the
CSS pseudo class first-child we can
give the first <li> item a margin-left.

margin-left: 10px;
}

Common styles

To create a uniformed look and

give all our elements equal
spacing, well style the main content,
gallery and the subsequent contact
form (in the following step) with some
margin and make the content aligned
centre. If you ever use Sass with
Foundation, you can always use the @
extend for this case.
001

Gallery styles

.gallery {
padding: 20px 0;
background-color: #f2f2f2;
}
.clearing-thumbs li {
margin: 0 20px 20px 0;
}
.clearing-thumbs li:first-child

002
003
004

.main-content, .gallery,
.contact-us {
margin-bottom: 30px;
text-align: center;
}

005
006
007

</div>
</form>

Error message

If you do not fill out the input

field or input the incorrect data
this will return an error. However this
does not display an error message to
the user, which is not helpful. To apply
an error message, add a <small> tag
with the class error and place your
error message within this.
001
<small class=error>Please
enter your name</small>

Email input

Its the same markup again to

set the email input field, use
the input type attribute and place
the pattern name within this to help
validate the input field. To set an error
message within the same <div>, add
the <small> tag with the class error.

001
002
003

Contact form
Creating user-friendly and
HTML5 validation-ready forms
is wonderfully simple in Foundation.

004
005
006

<div class=email-field>
<label>Email:
<input type=email
placeholder=
james@email.com required
/>
</label>
<small class=error>
Please enter your email</small>
</div>

WorldMags.net

Build a custom Foundation template

Responsive design
WorldMags.net
Message field

A contact form would not be

complete without a message
field. Similarly to our input fields we
created previously, and using the
same <div> structure, we will place a
<textarea> in place of the input field.
Again, apply an error message directly
below this. Following this we also add
a Submit button to finish it off.

001
002
003

004
005
006
007

<div class=message-field>
<label>Message:
<textarea
placeholder=Enter your
comments here required></
textarea>
</label>
<small class=error>Please
enter your comments</small>
</div>
<button type=submit>Submit</
button>

Form styles

Now with our HTML structure

of our contact form completed,
we can look at applying some styling.
Because Foundation has a lot of
in-built default styles, we dont need
to heavily customise the form styling
and its already responsive. We will just
make sure the labels are aligned to the
left and provide an explicit height for
the <textarea> field.
001
002
003
004
005
006
007

label {
text-align: left;
color: #666;
}
textarea {
height: 200px;
}

12 columns grid within our content.

We will then separate the footer to
two equal halves using two children
large-6 column grids.
001
002
003
004
005

</div>
<div class=large-6
columns>
<ul class=inlinelist right>
<li>
<a
href=#>Link
4</a>
</li>
</ul>
</div>
</div>
</footer>

008
009
010

011
012
013
014
015

Foundation offers a wide

range of navigation options
and within this tutorial weve
only covered Top Bar, which
functions as a main
navigation includes
incorporating a complex
responsive drop-down
menu. You also have
additional options to easily
make this navigation stick to
the top of the web browser.
Other popular navigation
choices include Off Canvas,
which many may have seen
on mobile devices. This type
of navigation is positioned
outside of the viewport and
slides in when activated by
the user. Again, as it is highly
customisable, you could
even have menus appearing
on both sides of the canvas.
Other more simplified
navigation options that help
keep track of the page while
scrolling is Magellan. It acts
like a Sub Nav but remains in
a fixed position at the top of
your screen.

Finally well style our footer.

Lets give this a gradient
background colour of a light black
fading into a dark black. Included
are some browser vendor prefixes.
And thats all it takes! Weve quickly
constructed our own custom
template using the Foundation
framework and havent had to write
our own components, with minimal
styling involved.

005

006

Foundations wide
range of navigation
options

Style the footer

001
002
003
004

No website template would be

complete without a footer. Lets
add a <footer> tag that wraps the
footer content inside. Again well need
to dictate a row class and wrap a large-

007

<footer class=row>
<div class=large-12
columns>
<hr />
<div class=large-6
columns>
<p>©Copyright
notice to go here</

p>
006
007

Build the footer

gradient(180deg, rgb
(43, 43, 43) 30%, rgb(29, 29,
29) 70%);

footer {
color: #fff;
background: rgb(43, 43, 43);
background: -moz-lineargradient(90deg,
rgb(43, 43, 43) 30%, rgb(29, 29,
29) 70%);
background: -webkit-lineargradient
(90deg, rgb(43, 43, 43) 30%,
rgb
(29, 29, 29) 70%);
background: linear99

WorldMags.net

Build a responsive WordPress theme

WorldMags.net

Responsive design

Build a responsive
WordPress theme
As the most advanced responsive framework available, Zurbs Foundation is
ideal for your latest WordPress project
Previously to incorporate Zurbs Foundation framework into WordPress you had to manually link the
necessary JavaScript and CSS using the WordPress functions wp_enqueue_script and wp_enqueue_
style. But now, thanks to Zurb and the popularity of WordPress, Zurb has provided a starter-theme
called FoundationPress, which you can download directly from its GitHub page to start building your
own WordPress theme with the Foundation framework.
The purpose of this ultimate starter theme is to act as a springboard; it comes packed with useful
re-useable components, a 12-column responsive grid, JavaScript functions and much more. This starter
theme contains all the necessary design elements, including the JavaScript and CSS libraries.
Still, FoundationPress is not an all-in-one WordPress theme with plugins, shortcodes, custom
options or custom templates it is only to be used as a starting point. Luckily it has done most of the
hard work for us including setting up widgets, navigations, displaying blog posts and general clean-up
of WordPress.
100

WorldMags.net

Build a responsive WordPress theme

Responsive design
WorldMags.net

Start building responsive WordPress themes using Zurbs own advance

Foundation framework starter theme, conveniently called
FoundationPress

Download
FoundationPress

href=<?php echo get_template_

directory_uri(); ?>/style.css
/>

To begin, make sure you have

the latest version of WordPress
installed and set up. Head over to
the FoundationPress starter theme
GitHub page: github.com/olefredrik/
foundationpress and download this
theme. Once youve downloaded
it, extract it and upload it to your
themes directory in WordPress and
activate it.

Custom stylesheet

Start by opening up the

header.php file in your text
editor. Youll want to add in your own
custom stylesheet so that when it
comes to upgrading FoundationPress
it wont override any custom work.
You may use Sass with Foundation,
but to allow beginners to follow along
this tutorial, well be using pure CSS.
001

You can download Zurbs Foundation WordPress starter theme,

FoundationPress, with ease over on GitHub

Customise the menu

WordPress already features a

built-in Appearance Menus
Screen, enabling users to create
custom navigation. FoundationPress
takes this a step further by allowing
us to create multiple navigations on
either side on the nav bar. When you
create a new menu in WordPress,
you have the option to enable your
navigations for mobile devices.

Customise the header

FoundationPress has already

written a lot of the WordPress
basic theming. Were going to dive
in and modify it. To give this theme
a visual punch were going to add
in a header with the website name,
including a gradient background.
Open up the header.php and paste in

the following HTML code.

001
002
003
004

005
006
007

Style the header

With our header implemented

well now need to style
it. Open up style.css in the
FoundationPress starter theme,
start by giving the main header a
gradient background, using CSS3
gradient. Position the main h1 above
the header. Lets make all characters
upper-case and give it a text shadow
to stand out from the light backdrop.
001
002

101

WorldMags.net

.main-head {
margin-bottom: 2em;

Build a responsive WordPress theme

WorldMags.net

Responsive design

<top>
In WordPress, activate FoundationPress starter
theme. This theme includes all the Foundation
framework library

003
padding: 1.2em;
004
background: #00b3d3;
005
background: -moz-radialgradient(center,ellipse cover,#00b3d3
0%, #007295 100%);
006
background: -webkitgradient(radial, center
center, 0px, center center,
100%, color-stop(0%,#00b3d3),
color-stop (100%,#007295));
007
background: -webkit-radialgradient (center, ellipse
cover, #00b3d3 0%,#007295 100%);
008 }
009 .main-head h1 {
010
text-align: center;
011
font-weight: 900;
012
text-transform: uppercase;
013 letter-spacing: 10px;
014
text-shadow: 1px 1px 2px rgba
(50, 50, 50, 0.59);
015
font-size: 2.5rem;
016
color: #fff;}

<bottom>
FoundationPress allows you to order menus to be
on the left or right side of the menu and enable
for mobiles

Add a search

Currently in our widgets list,

the search form is located in
the sidebar. In WordPress Widgets
we can disable the search widget.
Now inside our head.php at the
very bottom, paste in the following
function, which will print out the
search form. Were going to place our
search form just below the header of
our website.

001

form by editing the searchform.php.

Directly below the form tag we have
applied a row <div> and changed the
default grid layout to use the large grid
system as well as setting some custom
classes to be referenced in our CSS.
001
002

003
004

<?php get_search_form(); ?>

Customise search

With the get search form

function added in our header.
php we can now structure this search

005
006

102

WorldMags.net

Build a responsive WordPress theme

Responsive design
WorldMags.net
007

<div class=large-4 columns

searchbutton>
<input type=submit
id=searchsubmitvalue
=<?php esc_attr_e
(Search,FoundationPress);
?> class=prefix button>
</div>

008

009

has_post_
thumbnail() ) {the_
post_thumbnail
(large); } ?></a></
figure>
<?php the_excerpt(); ?>
<p>Posted on <?php
the_time(F jS, Y
); ?> in <?php the_
category(, );
?></p>
<p class=byline
author>Written by
<?php the_author_posts_
link(); ?>
</p>
<a href=<?php the_
permalink(); ?>
class=button>Read
more</a>
</div>

008
009

Modify index.php
010

The index.php is the main

template in WordPress
theming hierarchy. Were going to
modify it and remove some of the
grid components and place them in
content.php instead. Remove the
<div> row and grid classes just below
the get_header function and replace
it with the code below. Finally, migrate
the <?php get_sidebar(); ?> just above
the get_footer function.
001
002

<?php get_header(); ?>

Blog post

With the homepage structure

completed, well want to
structure each blog post in a grid
column of four rows; this will lay out
three blog posts organised next to
each other on a large monitor. Using
the grid system will force our layout
to be responsive. Remove the original
code all the way down to the <footer>
tag in content.php.
001
002

003
004

005
006
007

<div class=large-4 columns

role=main>
<article id=post-<?php the_
ID(); ?>
<?php post_class(panel); ?>
data-equalizer-watch>
<header>
<h2><a href=<?php
the_permalink();
?>><?php the_title();
?></a></h2>
</header>
<div class=entry-content>
<figure><a href=<?php
the_permalink
(); ?>><?php if (

011

012

008
009

Style search form

With our blog posts neatly

organised in a row of threes,
our search field and search button are
not quite aligned with the rest of the
design. Lets fix this by adding some
padding. With a mobile-first approach,
Foundation takes care of the
responsive nature its unnecessary to
add styles for mobile or tablet devices.
001
002
003
004

.searchbox, .searchbutton {
padding: 0 15px;
}

Style the blog

Move the sidebar

With our blog post structure

set up in a grid column in a set
of threes, well now implement some
simple styling to this homepage. Back
in our style.css, well add some box
shadow so the panels dont look so
flat. We dont need to style the panels
themselves as these styles are already
set up inside Foundation.
001
002
003
004
005
006
007

<div class=row main-content>

<div class=large-12
columns>
<h1>Our latest work</h1>
<p>Lorem ipsum.</p>
<img src=img/photo.png
alt= />
</div>
</div>

Rather than having our sidebar

situated on the right-hand
column, we will position it directly
below all the blog posts and just
above the footer. Inside the sidebar.
php were going to use Foundations
Equalizer component, which will set
equal height to all the widget panels.
We simply place the data-equalizer
attribute to the parent container here.

001
002
003

004

<div class=bottom-sidebar>
<aside id=sidebar
class=row data-equalizer>
<?php do_action
(foundationPress_
before_sidebar); ?>
<?php dynamic_
sidebar(sidebar-widgets);

Working with Sass provides greater

flexibility and control over this theme. All
Sass variables are located in scss/config/_
variables.scss and your site structure
within scss/site/_structure.
103

WorldMags.net

Build a responsive WordPress theme

WorldMags.net

Responsive design

<top left>
Easily set up and use shortcodes in your
site to take advantage of Foundations
library of components
<bottom left>
Using WordPress shortcodes, we were
able to add Foundations alert box
components throughout the site

005

006
007

?>
<?php
do_action(foundationPress_
after_sidebar); ?>
</aside>
</div>

Widgets

Now to actually lay out our

widgets, we will need to open
up the widget-areas.php located
in the library directory. Inside the
first array on line 8, remove what is
currently there and replace it with the
below, which uses the large-4 grid and
a data-equalizer-watch attribute that
the Equalizer component requires to
set equal heights to each panel.

001 before_widget => <article

id=%1$sclass=widget %2$s
large-4 columns><div
class=panel data-equalizer-watch>,

Style the sidebar

Within WordPress in the

Widgets panel, we only require

three widgets so remove any of the

other existing ones. When you
check the homepage you will notice
our widget panels all have equal
heights to the tallest panel. To finish
up with our sidebar beneath our
blog posts, we will give this section its
own background colour and
some padding.

001

001
002
003
004
005

Shortcode array

.bottom-sidebar {
padding-top: 10px;
background-color: #cecece;
}

Set up shortcodes

There are many components

available in Foundation,
we convert some of them into
shortcodes so that we can reuse
these components whenever were
in the editor. Creating shortcodes
requires two steps: create a primary
handler method and connect
the handler to WordPress. Inside
functions.php set up our primary
function. Listed here.

002
003
004
005
006
007
008

function foundation_add_alerts
( $atts, $content = null ) {
extract( shortcode_atts(
array(
type => ,
shape => ,
close => true,
class =>
), $atts ) );

In the previous code snippet

we noted that our function
receives the parameters of type, shape
and close. Were going to use this
to display alert boxes using one of
Foundations components. The type
attribute will display success, warnings
or informative information using this
shortcode. Lets set up an array that
will capture these attributes.
001
002
003

$class_array[] = ( $shape ) ?
$shape : ;
$class_array[] = ( $type ) ?
$type : ;
$class_array[] = ( $class ) ?
$class : ;

104

WorldMags.net

Build a responsive WordPress theme

Responsive design
WorldMags.net
004
005

$class_array = array_filter(
$class_array );
$classes = implode( , $class_
array );

Shortcode markup

When this shortcode is

executed we want to make
sure that its using the correct
formatted markup and CSS classes.
We need to use a wrapping class
alert-box. This is very important
because we want to make sure
that Foundation calls the Alert
JavaScript plugin for us. This particular
plugin is in fact handled in the
foundation.alert.js.

001
002
003

004
005
006
007

$output = <div class=alertbox . $classes . >;

$output .= do_shortcode(
$content );
$output .= ( false
!= $close ) ? <a
class=close href=>×</
a> : ;
$output .= </div>;
return $output;
}

Hook into WordPress

Before finishing off our

shortcode were going to
ensure that it has all been registered
correctly, otherwise WordPress wont
know what to do with it. To do this
we use the register_shortcodes
function and the add_shortcode
method. The first parameter defines
the shortcode in the editor while the
second points to the function that we
created previously.

001
002
003
004

function register_shortcodes() {
add_shortcode(alert,
foundation_add_alerts);
}
add_action(init,
register_
shortcodes);

Shortcodes to use

We can now use the following

shortcodes in the editor to
display alert boxes, which is a native
component from the Foundation
framework. All we have to do is pass
in which type of alert box type we
want displayed by selecting the
attributes: success, secondary or alert.
We can even choose what type of
shape to use and whether we want a
close off function.

001

002

003

[alert type=success
shape=radius
close=true]This is a success
message[/alert]
[alert type=secondary)
shape=radius
close=true]This is a standard
message[/alert]
[alert type=alert shape=round
close=false]This is an alert
message[/alert]

Alert boxes

Without any CSS styling or

JavaScript and just using the
shortcodes we have set up, we can
implement alert boxes wherever we
like in our WordPress site. By simply
using shortcodes we can easily
convert many of the rich components
from Foundation to be used easily
throughout our site.

Footer

004
005
006

007

008

009
010

<?php wp_list_pages();
?>
</ul>
<?php do_
action(foundationPress_
before_footer); ?>
<?php dynamic_
sidebar(footerwidgets); ?>
<?php do_
action(foundationPress_
after_footer); ?>
</div>
</footer>

Style the footer

Finally, were just adding

the final touches by styling
up our footer. Through this tutorial
weve taken the starter theme
FoundationPress and quickly
customised it as our own theme
using a variety of Foundations
components and functionality. Using
FoundationPress allowed us to focus
on the front-end development and
less on the actual backend efforts.

001
002
003
004
005
006
007
008
009
010
011
012
013

.main-footer {
padding: 10px 0;
background-color: #9c9c9c;
}
.pagenav ul {
margin: 10px 0 0 0;
}
.main-footer li {
float:left;
margin-right: 10px;
list-style: none;
}

To finish up were just going to

add in a footer navigation by
using the WordPress WP list pages.
Open up the footer.php and just
below the closing </section> tag,
remove everything including the
<footer> tag. Replace it with the
following code, which will display a list
of all pages on our site.
001
002
003

Here we have our fully responsive

WordPress site, resizing to perfectly
display on all screen sizes

105

WorldMags.net

Make a responsive menu for a retina screen

WorldMags.net

Responsive design

Make a responsive
menu for a retina screen
Make sure your menu is both responsive and ready for
retina screens by using custom fonts instead of images
Designing the navigation element for your website in this age of mobile devices and differing screen
widths can be a real pain in the mouse. Balancing usability with aesthetic credibility is the challenge that
responsive design now presents to all designers. There are a wide variety of solutions and techniques
available to solve the issue, from fixed drop-down menus to side-sliding variations. The problem is that,
while these solutions all solve the problem of maintaining functionality at different screen widths, they
can sometimes lacking visual impact.
These days its nice to see a menu that remembers to look good, too. Longer, scrolling pages are
reducing the number of menu elements some sites need to present, and those sites, in particular, can
afford to be a little more adventurous with how they deliver the navigation. So its time to give the
responsive menu a much needed paint job and raise it above the purely functional. This tutorial will
demonstrate how to create a responsive menu that is both eminently usable and visually striking. And
to keep it retina friendly, well be using a custom-made icon font rather than images.

As more and more screen sizes flood into the market, it pays to keep your responsive elements as simple as possible to avoid meeting a width they cant
deal with. Having three breakpoints, roughly representing PC, tablet and smartphone, is a tried and trusted approach to this problem

106

WorldMags.net

Make a responsive menu for a retina screen

Responsive design
WorldMags.net
Choose your icons

In order to create the custom

icon font, well be using the
excellent IcoMoon tools at icomoon.
io/app/#/select. You have a choice
here of creating your own icons as
vector images to import into the font
creator or choose from the extensive
selection already available. Well
choose ours from the library as they
have exactly what we need.

Create
a custom font
02

Having selected your icons,

click the bottom Font button.
On the next page, you can amend
the icons tags and corresponding
letters used to call each icon. Click on
Download and you will get access
to the folder with its font files and
stylesheet. Place the font folder into
your root.

Add the custom font

Copy the custom CSS that

came with your download
and paste it into the top of your site
stylesheet. Ensure that the path for the
font files is still correct. You may also
want to make sure that each icon is
assigned to the font family individually
by name rather than with the default
blanket icon class.
001 @font-face {
002 font-family: 'icomoon';
003 src: url('../fonts/icomoon.eot');
004 src: url('../fonts/icomoon.
eot?#iefix')format('embeddedopentype'),
005
url('../fonts/icomoon.
woff')
format('woff'),
006
url('../fonts/icomoon.
ttf')
format('truetype')
007 url('../fonts/icomoon.
svg#icomoon') format('svg');
008 font-weight: normal;
009 font-style: normal;
010 }
011 .icon-happy,.icon-loved,.icon-

uniF4F1,.icon-skull,.icon-uniF539,.
icon-rocket,.icon-menu {
012
font-family: 'icomoon';
013
speak: none;
014
font-style: normal;
015
font-weight: normal;
016
font-variant: normal;
017
text-transform: none;
018
line-height: 1;
019
-webkit-font-smoothing:
antialiased;
020 }
021
.icon-happy:before {content:
"\e603";}022 .icon-loved:before
{content: "\e61c";}
023 .icon-uniF4F1:before {content:
"\e613";}
024 .icon-skull:before {content: "\
e607";}
025 .icon-uniF539:before {content:
"\e612";}026 .icon-rocket:before
{content: "\e600";}
027

Base CSS

Before we start putting all

the menu HTML into the
index.html, we just need to prepare
some base CSS for the project. Start
by creating a container, main <div>
and a header into which the site
title will be placed, making sure to
call the stylesheet in the head. Use
the following CSS to style the
wrapping elements.

001
002
003
004
005
006
007
008
009

.main,
.container > header {
width: 100%;
margin: 0 auto;
padding: 16px 32px;
}
.main {
max-width: 1300px;
min-height: 640px;

010 }
011 header {
012
text-align: center;
013
font-size: 16px;
014
background:
rgba(255,255,255,0.6); 015 }
015 header h1 {
016
font-family: 'Hammersmith
One', sans- serif;
017
font-size: 75px;
018
line-height: 0.8;
019
margin: 0;
020
font-weight: 300;
021
color:#3f3782;
022
}
023 .movie {
024
font-size:102px;
025
color:#e63c2b;
026 }

Menu HTML

Create your menu <ul> using

span classes for both the icon
and the text label. The span class fon
will create the styling for the custom
icons, while the class item is used for
the labels. The icon name, as declared
in the IcoMoon CSS calls each custom
icon to its element.
001 <div class="container">
002 <header>
003 <h1>LONDON<br><span
class="movie">MOVIE</span><br>REVIEWS</
h1>
004 </header>
005 <div class="main">
006 <nav id="menu" class="nav">
007 <ul>
008 <li><a href="#"><span class="fon
ico- happy"></span><span
class="item">COMEDY</span></a></li>
009 <li><a href="#"><span class="fon
ico- loved"></span><span
class="item">ROMANCE</ span></a></li>

Avatars are the images that appear

alongside comments. Its worth allowing
them because they brighten them up
107

WorldMags.net

Make a responsive menu for a retina screen

WorldMags.net

Responsive design

010 <li><a href="#"><span class="fon

ico- uniF4F1"></span><span
class="item">ACTION</span></a></li>
011 <li><a href="#"><span class="fon
ico- skull"></span><span
class="item">HORROR</span></a></li>
012 <li><a href="#"><span class="fon
ico- uniF539"></span><span
class="item">DRAMA</ span></a></li>
013 <li><a href="#"><span class="fon
ico- rocket"></span><span
class="item">SCI-FI</span></a></li>
014 </ul>
015 </nav>
016 </div>
017 </div>

Large screen query

Our first media query targets

screens of 800px or more. The
layout is a horizontal strip of rounded
squares, with each element at a
percentage for maximum flexibility.
Icon and label are stacked one above
the other. We set the position and size
of our .fon icon, while the .item label
begins opaque, to be animated later

First transition step

Non-media query CSS

There are some styles that

apply to all three of the
upcoming menu sizes, setting some
navigation styles and using a WebKit
trick to eliminate blue bordering
on click. Here we also colour our
navigation element backgrounds,
using the nth property to alternate the
colour between the site theme red
and blue.

Now we can arrange hover

effects. The first step will see
the .item label fade in on hover, with
a .5s transition, while the .fon icons

change their colour to match the

appearing label. Both elements are
now black from white.

Second transition step

The black characters dont

look bad against the coloured
elements, but what would really
make the highlighted icon stand out
is having no background at all. So,
well add a transition that fades out
the background on hover, leaving just
the icon and visible label. We can also
close that first media query here.
001 .nav li:hover {
002 background:none;
003 -moz-transition: background

So, well add a transition that fades out

the background on hover, leaving just
the icon and visible label

108

WorldMags.net

Make a responsive menu for a retina screen

Responsive design
WorldMags.net
.5s;
004 -o-transition: background
.5s;
005 -ms-transition: background .5s;
006
transition: background .5s;
007 }
008 }

Add the background

Well finish off the site

properly with an appropriate
background image. In keeping with
the London Underground theme,
were using for our London Movie site,
were going with a white tile motif,
and making sure the Google font is
used throughout.

001 body {
002
font-family: 'Hammersmith
One', sans- serif;
003 background: url(../img/bg.jpg);
004 }
005 margin: 20px;
006
border: 1px solid red; /*
take off asap */

007 }
008

Second media query

Our second media query

targets screen widths between
520px and 799px, which covers
tablet screens and some larger
smartphones at landscape. Our layout
will differ considerably at this size. Two
rows of three blocks, no margins and
no rounded corners. Our fonts are
also considerably smaller and sit side
by side.

Tablet animation

In a reversal of our hover

effects for large screens, this
time were going to change the
background colour of the li element
to black and give the white font and
icon an off-white shade and a very
slight fade. With that, all of the tablet

styles are completed, so make sure

you remember to close the media
query here.
001 .nav li:hover {
002
background:rgba(0,0,0,0.9);
003
-moz-transition: background
.5s;
004
-o-transition: background
.5s;
005
-ms-transition: background
.5s;
006
transition: background .5s;
007 }
008 .nav a:hover .fon,
009 .nav a:active .fon,
010 .nav a:active .item,
011 .nav a:hover .item{
012
color:rgba(259,259,259,0.9);
013
-webkit-transition: color
.5s;
014
-moz-transition: color .5s;
015
-o-transition: color .5s;
016
-ms-transition: color .5s;
017 transition: color .5s;
018 }
019 }
020

Rather than having to adapt the layout per screen width, well use each breakpoint as an opportunity for redesigning

109

WorldMags.net

Make a responsive menu for a retina screen

WorldMags.net

Responsive design

Target smaller screens

Small screen transitions

Last transition

The final media query sets the

layout for screens smaller than
520px, targeting smartphones. Since
we have so few menu elements, we
can be bold and eschew the trend for
JavaScript drop-down menus. Well
also lose the corners and have six
circular elements, with icon and label
fitting together snugly.

This time, well still fade out

the background of the clicked
element, but change the icon and
label to the same colour as the
background it sits on. The CSS used
here fades the background of all li
elements on hover, but the colour
changes will be done separately. Here
we deal with the red elements.

Next, were coding the blue

elements. Close the media
query and were done. We now have
three very distinct layouts between
the three breakpoints. Your menu at
small-screen width doesnt have to
be a small version of the large screen
layout. You have the chance to give
each menu its own design.

Header and fonts

Background changes

Since the order of the elements

has now changed, well
need to do some tweaking to the
background colours. At the moment
we have one column of red and one
column of blue, which looks a little bit
odd. In order to keep the alternating
pattern, we need to arrange a one,
two, two, one repeat of the colours.

001 .nav li:nth-child(6n+1) {

002
background: rgb(230, 60, 43);
003 }
004 .nav li:nth-child(6n+2) {
005
background: rgb(63, 55, 130);
006 }
007 .nav li:nth-child(6n+3) {
008 background: rgb(63, 55, 130);
009 }
010 .nav li:nth-child(6n+4) {
011
background: rgb(230, 60, 43);
012 }
013 .nav li:nth-child(6n+5) {
014
background: rgb(230, 60, 43);
015 }
016 .nav li:nth-child(6n+6) {
017
background: rgb(63, 55, 130);}

Having fewer menu elements means that we can avoid having to hide them. Instead we can
arrange them within our screen space

110

WorldMags.net

Make a responsive menu for a retina screen

Responsive design
WorldMags.net

The HTML in full

In this tutorial weve covered all of the CSS in detail, so now we take the
opportunity to get a closer look at the inner workings of the HTML

IE will use its most up-to-date

rendering engine. Chrome=1
activates the Chrome Frame
plug-in for early IE versions
Here we tell the browser that
the site is mobile ready and
make sure the user cant scale
the content, which they dont
need to do
Make sure you remember
to include the Google Font
declaration in the head of
your index.html

Though it may seem

span-heavy, the span is one
of the most underappreciated HTML elements.
Use them freely!

001
<!DOCTYPE html>
002
<html lang="en">
003
<head>
004
<meta charset="UTF-8" />
005
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
006
<meta name="viewport" content="width=device-width,
initialscale=1.0, user-scalable=no">
007
<title>London Movie Reviews</title>
008
<link rel="stylesheet" type="text/css" href="css/style.
/>
009
<link href='http://fonts.googleapis.com/
css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
010
</head>
011
<body>
012
<div class="container">
013
<header>
014
<h1>LONDON<br><span class="movie">MOVIE</
span><br>REVIEWS</
015
h1>
016
</header>
017
<div class="main">
018
<nav class="nav">
019
<ul>
020
<li><a href="#"><span class="fon icon-happy"></span><span
class="item">COMEDY</span></a></li>
021
<li><a href="#"><span class="fon icon-loved"></
span><span class="item">ROMANCE</span></a></li>
022
<li><a href="#"><span class="fon icon-uniF4F1"></span><span
class="item">ACTION</span></a></li>
023
<li><a href="#"><span class="fon icon-skull"></span><span
class="item">HORROR</span></a></li>
024
<li><a href="#"><span class="fon icon-uniF539"></span><span
class="item">DRAMA</span></a></li>
025
<li><a href="#"><span class="fon icon-rocket"></span><span
class="item">SCI-FI</span></a></li>
026
$(window).scroll(function(){
027
</ul>
028
</nav>
029
</div>
030
</div>
031 </body>
032 </html>

css"

Your menu doesnt have to be a small

version of the large screen layout. You
can give each menu its own design
111

WorldMags.net

Techniques for creating responsive typography

WorldMags.net

Responsive design

Techniques for creating

responsive typography
Make your typography responsive to deliver a first class user
experience on every device
If you look across a range of interests youll often find some mixed-up priorities. In photography, many
beginners focus on the best camera body they can afford whereas experienced photographers know
its the quality of the lens thats all-important. Some golfers will spend hours at the driving range but
completely neglect their short game.
With responsive web design, the temptation can be to concentrate on the overall layout, and which
divs do what as the viewpoint changes, but what about your text? People have arrived at your site to
read what you have to say and if they dont find it easy or enjoyable they simply wont stay. If you want
your website to be responsive and effective then you really need to know a little about responsive
typography. As with many other web design disciplines youll have to deal with browser compatibility
issues, and as you venture further, youll appreciate the diversity of the issues you need to consider and
the refinements that are possible. You can achieve a great deal with CSS only but there are also a few
handy jQuery plugins too. Its time to focus on the typography.

Part science and part art; knowing

some principles of typography
and the techniques for controlling
it responsively will take you so
far, but youll still want to review
and tweak your layouts to ensure
they are both readable and
aesthetically pleasing

112

WorldMags.net

Techniques for creating responsive typography

Responsive design
WorldMags.net
The measure of it

For optimum readability your

line length (or measure) should
be 45-75 characters. Within sensible
limits, select your font and the width
it is to occupy. You can then set the
font-size of your body text. In this
case the size is set to 18px in the root
element html.
001 @import url(http://fonts.
googleapis.com/
css?family=Droid+Serif|Quando);
002 * {
003
margin: 0;
004
padding: 0;
005 }
006 html { font-size: 18px;
007
font-family: Droid Serif,
serif;
008
background-color: #e7bb4a;
009
color: #333;
010 }
011

Keep it relative

Using rem units (as in h2 here)

enables the relative size of the
element to be fixed according to the
root element. You might have several
dozen rem-sized elements in your
document and simply changing the
font-size in your html element will
automatically change their size.

001
002
003
004
005
006
007
008
009
010

h2 { font-size: 2.8rem;
margin-bottom: 15px;
font-family: Quando, serif;
color: #a2422a;
}
p {
line-height: 1.45;
margin-bottom: 20px;
}

one column of text youll need to

allow plenty of negative space around
the text block to ensure a good user
experience. The img element shows
an example of using rem units to set a
relative size to the bottom margin.
001 #page-wrap {
002
width: 60%;
003
margin: 100px auto;
004 }
005 img {
006
max-width: 90%;
007
margin-bottom: 2rem;
008
box-shadow: 0 0 8px
#333333;
009 }
010

Breakpoints

Decide on the breakpoints

to use for your site. Using
ems means your breakpoints will be
respected even if the user changes
the text zoom in their browser. At
each breakpoint you have the
opportunity to tweak the factors that
will affect the readability of the text at
that screen size.

001 /* ===== == = 20em (320px) = ==

===== */
002 @media only screen and (min-width
: 20em) {
003 html {font-size: 12px;}
004 #page-wrap { width: 85%; margin:
1rem
auto; }
005 }
006 /* ===== == = 30em (480px) = ==
===== */
007 @media only screen and (min-width
: 30em) {
008
html {font-size: 14px;}
009
#page-wrap { width: 80%;
margin:
1.5rem auto; }
010 }

Manage your widths

Subtle and small

Remember that maintaining

suitable column widths is
essential in achieving good readability.
On a desktop screen, if you have only

On smaller screens the

difference between your
largest heading and smallest text
should be reduced, so you will

typically use smaller rem values. You

will also tend to use much narrower
margins to enable you to make the
most of the available screen space.
001 /* ===== == = 37.5em (600px) =
== ===== */
002 @media only screen and
(min-width: 37.5em) {
003
html {font-size: 16px;}
004
#page-wrap { width: 75%;
margin: 2rem
auto; }
005 }
006 /* ===== == = 48em (768px) = ==
===== */
007 @media only screen and (min-width
: 48em) {
008
html {font-size: 18px;}
009
#page-wrap { width: 65%;
margin: 2.5rem
auto; }
010 }

Large and bold

At larger sizes youll really want

to make use of impressively
sized headings and large margins to
give each element its own space.
001 /* ===== == = 56.25em (900px) =
== ===== */
002 @media only screen and (min-width
:
56.25em) {
003
html {font-size: 20px;}
004
#page-wrap { width: 60%;
margin: 3rem
auto; }
005 }
006 /* ===== == = 68.75em (1100px) =
== ===== */
007 @media only screen and (min-width
:
68.75em) {
008
html {font-size: 22px;}
009
#page-wrap { width: 55%;
margin: 3.5rem
auto; }
010 }
011 /* ===== == = 81.25em (1300px) =
== ===== */
012 @media only screen and (min-width
:
81.25em) {
013
html {font-size: 24px;}
014
#page-wrap { width: 50%;

113

WorldMags.net

Techniques for creating responsive typography

WorldMags.net

Responsive design

Headline text is the most noticable text on a page and any good headline should scale down so it is easy to read on all screens.
FitText.js is a jQuery plugin that does exactly what it says, make text fit, whatever the screen size

margin: 4rem
auto; }
015 }
016

content=width=
device-width, initialscale=1>

Width=device-width

Switching to the HTML, youll

need to set how width
is handled. This enables you to
determine how the page is scaled
rather than leaving it to the device to
decide. Without this tag, smartphones
will tend to zoom out in an attempt
to show the whole page.
001 <!DOCTYPE html>
002 <html>
003 <head>
004
<title>Responsive Typography</
title>
005
<meta charset=UTF-8 />
006
<meta name=viewport

007
<link rel=stylesheet
href=css/style.
css>
008 </head>
009

Using FlowType.js

User experience brand firm

Simple Focus developed
this plugin to simplify the process
of maintaining optimum line length
using jQuery and without the need to
use media queries. First youll need
to link to jQuery and the plugin in the
head of your HTML document.
001
<script src=js/jquery1.11.0.min.js>

</script>
002
<script src=js/flowtype.
js></script>

Max mins

After the HTML content you

call the FlowType script and set
several variables. The minimum and
maximum values are the threshold at
which the plugin stops resizing text,
and the minFont and maxFont the
smaller and largest size in pixels that
the plugin will use.
001
002
003
004
005
006

114

WorldMags.net

Techniques for creating responsive typography

Responsive design
WorldMags.net
007
008
009
010

008

fontRatio : 45
});
</script>

009
010

Font ratio

#page-wrap { width: 65%; margin:

2.5em auto; }}
@media only screen and
(min-width : 56.25em) {
#page-wrap { width: 60%; margin:
3em auto; }}

Each font is different and the

fontRatio variable enables you
to tweak the font size to achieve your
desired result. Increase the value to
make the font smaller, and vice versa.
It should go without saying that you
need to check how your page looks at
different widths.

Media queries again

FlowType does a great job

of managing line lengths to
optimise readability but it wont make
the other tweaks that you will want to
make to reflect the needs of smaller
and larger screens. Youll still want to
use smaller margins on tiny screens
and larger margins on big ones so a
simplified set of media queries can
be used.
001
002
1em
003
004
1.5em
005
006

007

@media only screen and

(min-width : 20em) {
#page-wrap { width: 85%; margin:
auto; }}
@media only screen and
(min-width : 30em) {
#page-wrap { width: 80%; margin:
auto; }}
@media only screen and
(min-width: 37.5em) {
#page-wrap { width: 75%; margin:
2em auto; }}
@media only screen and
(min-width : 48em) {

R for root

By default, Flowtype is applied

to the body of the page.
However, as the heading is set using
rem units, the heading will not be
re-sized. There are two ways round
this. First you can set Flowtype to
apply to the root element by changing
body to html towards the bottom of
your HTML, or you can use em instead.
001

$(html).flowtype

Compatibility and fallback

For older browsers that do not

support rem you will want to
include fallback. On the face of it the
fallback is simple just define the size
in pixels first. However, that could
lead to a lot of manual changes so
you might want to explore using
LESS or SASS mixins to minimise
duplicated code.
001 h1 { font-size: XXpx; fontsize:
YYrem; }

Viewport sized
typography

Another method, growing

in popularity, for creating

responsive text makes use of viewport

units. Each unit is equivalent to 1% of
the viewport width or height. Browser
support is currently lower than for rem
units but in exchange you get fully
fluid text and could probably make do
with only two media queries to avoid
inappropriately small or large text.
001
002
003
004
005
006
007
008
009
010

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}

FitText.js

Sometimes you might just

want help with making your
headings work nicely at all sizes.
In that case FitText.js might be the
best solution for you. Once set up,
you simply apply an id for each
heading to be sized and when the
function is called, pass some optional
configuration settings.

001 <h1 id=fittext1>Squeeze with

FitText
</h1>
002 <h1 id=fittext2>Squeeze with
FitText
</h1>
003 <h1 id=fittext3>Squeeze with
FitText
</h1>
004 $(#fittext1).fitText();
005 $(#fittext2).fitText(1.2);
006 $(#fittext3).fitText(1.1, {
minFontSize:
50px, maxFontSize: 75px });
007

For older browsers that do not

support rem you will want to
include fallback

A more modern scale

Jason Pamental (bit.ly/LdQ9Ut)

has considered the challenges
of responsive typography in great
detail. To quote Jason, The problem

115

WorldMags.net

Techniques for creating responsive typography

WorldMags.net

Responsive design

is, as the screen size shrinks and fewer

elements are visible, the relative
scale between elements becomes
exaggerated. Whats needed is greater
subtlety and flexibility to maintain a
more balanced proportion and better
readability across all experiences.

Do it online

If youd like more layout support

with a focus on typography,
typecast.com provides a suite of
online tools to rapidly prototype
and test your designs. Not for you?
Typecasts responsive.is adds a utility
bar to the top of your page where you
can check sites based on five different
breakpoints all without having to
re-size your browser manually.

CHARACTERS

Print
12pt
Desktop (lg) 1em (16px)

LINE
HEIGHT
1.25em
1.375em

Desktop

1em (16px)

1.375em

60-75

Tablet (lg)
Tablet (sm)
Phone

1em (16px)
1em (16px)
1em (16px)

1.375em
1.25em
1.25em

60-75
60-75
35-40

BODY

FONT SIZE

60-75
60-75

You can check sites based on five

different breakpoints all without having
to re-size your browser manually

116

WorldMags.net

Techniques for creating responsive typography

Responsive design
WorldMags.net

FlowType.js
Simple Focus is the name of the agency that developed this
plugin which is apt here as the code is both simple and focused.
Variables are set here, but can
be overridden when the plugin
is called in the HTML

The width of the element is

checked to see if it is outside
the maximum and minimum
parameters, in which case the
maximum or minimum values
are used

001
002

(function($) {
$.fn.flowtype = function(options) {

003
004
005
006
007
008
009
010
011

// Establish default settings/variables

// ====================================
var settings = $.extend({
maximum : 9999,
minimum : 1,
maxFont : 9999,
minFont : 1,
fontRatio : 35
}, options),

012
013
014
015
016
017

020
021

// Do the magic math

// =================
changes = function(el) {
var $el = $(el),
elw = $el.width(),
width = elw > settings.maximum ? settings.maximum
: elw < settings.minimum ? settings.minimum : elw,
fontBase = width / settings.fontRatio,
fontSize = fontBase > settings.maxFont ? settings.
maxFont : fontBase < settings.minFont ? settings.
minFont : fontBase;
$el.css(font-size, fontSize + px);
};

022
023
024
025
026
027
028
029
030
031
032
033

// Make the magic visible

// ======================
return this.each(function() {
// Context for resize callback
var that = this;
// Make changes upon resize
$(window).resize(function(){changes(that);});
// Set changes on load
changes(this);
});
};
}(jQuery));

018
019

Similarly, when a new font

size is calculated, a check is
made to see if this is
outside the extremes set by
the user and, if so, the
largest or smallest font size
is set as appropriate

The code applies the newly

calculated numbers as inline
CSS to the element that is
selected. Because this new
CSS is inline, it overwrites
whatever you have set in your
linked stylesheets, creating a
natural fallback in case a user
has JavaScript disabled

Whats needed is greater subtlety and

flexibility to maintain a more balanced
proportion and better readability
117

WorldMags.net

Create a HTML5 responsive video player

WorldMags.net

Responsive design

Create a HTML5
responsive video player
Discover how to create a fully responsive HTML5 video player that
features custom control icons to fit your designs
Everyone knows that video is the best way to keep your audience engaged, however, you now want to
add some of that video goodness onto your fancy responsive website. You scurry off to YouTube and
grab that all-important embed code, lovingly paste it in, only to find that it looks terrible on tablets and
phones. Not only that but the controls are all the same boring icons. Time for a change, in the form of
an HTML5 video player that adapts to your responsive site and fits in with your existing UI with some
custom controls.
Well be basing this tutorial around Bootstrap, for a couple of reasons. The first being that its the
most popular responsive framework out there, so many people will already be using it; the second
reason is that it comes bundled with Glyphicons, which well use to create player controls. You can, of
course, create your icons using standard PNG images if you so wish.
Using this technique we will end up with a video that looks consistent, as the standard HTML5
video player is rendered completely different across different browsers using the browsers built-in
controls, here we make it look identical across all platforms, and respond to smaller devices.

Get set up

bootstrap/3.1.1/js/bootstrap.
min.js>
</script>

Create a new HTML file and

add in the following code
into the <head> section. This will
add the Twitter Bootstrap framework
that is required to make your page
responsive. If you are already using
Bootstrap and are simply integrating
into an existing site, you can skip this
part of the tutorial.

The video container

The below code adds a

very basic responsive video
container based on the Twitter
Bootstrap Jumbotron element. Place
this code within the body section of
your page; it will render a full-width
container at the top of the site. If you
are implementing the video player in
an existing site you can skip this step.

001
002
003

Demonstrate
responsiveness

Just to add some context to

our site, were going to place
two responsive columns underneath
our jumbotron. These columns have
no bearing on the video element,
but it will make the final product look
more like an actual website. Add this

Time for a change, in the form of an

HTML5 video player that adapts to
your responsive site

118

WorldMags.net

Create a HTML5 responsive video player

Responsive design
WorldMags.net
any format you wish they even have
a 4K and 3D version as well as the
entire source used to create it.

code underneath the previous step

above the closing </body> tag.
001
002
003
004
005
p>
006
007
008
009
p>
010
011
012
013

<div class=container>
<div class=row>
<div class=col-md-6>
<h2>Left Col</h2>
<p>Donec id [] dui.</
</div>
<div class=col-md-6>
<h2>Right Col</h2>
<p>Donec id [] dui.</
</div>
</div>
</div>

Obtain footage

Now we have our code

set up, we need an actual
video to show. For this well be
using a completely open source
short animation created by Blender
Foundation, Big Buck Bunny.
Download it from the link below in

001 http://bbb3d.renderfarming.net/
download.html

Embed video

Now we have our footage

were going to embed it into
the jumbotron using the standard
HTML5 markup. Add the following
code within the jumbotron <div>,
replacing the  comment. Be sure to look
at the output in different browsers
to see how the video controls are
rendered differently.
001
<video width=320
height=240
controls>
002
<source src=big_buck_
bunny_1080p_
h264.mp4 type=video/
mp4>
003
Your browser does not

support the
004

video tag.
</video>

Video formats

Depending on which browser

and operating system you are
using, the previous step may not have
shown any video at all. If this is the
case you may need to add the OGG
version of the video into your code as
well. Grab the OGG file from the video
download site and add the following
line of code.
001 <source src=big_buck_
bunny_1080p.ogg
type=video/ogg>
002

Getting responsive

Now its time to make use of

that large jumbotron area and
fill it up with our video. Adjust your
video tag height and width to the

By adding in a poster
image, we can display
a title screen that will
disappear when the
user presses Play

119

WorldMags.net

Create a HTML5 responsive video player

WorldMags.net

Responsive design

The default browser

controls have now
been removed and
the video fills the
jumbotron area
slightly better

following, to stretch the video across

the jumbotron container. The video
will adjust its height accordingly, so the
aspect ratio is maintained correctly.
001

<video width=100% controls>

Remove spacing

001
<video width=100% controls
poster=poster.jpg>

Our jumbotron features

grey padding around the
video lets get rid of that to make
our video fill the entire space. Add a
CSS block above your video tag with
the following code within it. This will
override the default Bootstrap CSS, but
there is no need for !important tags.
001
002
003
004
005
006

Removing controls

Now we need to remove

the standard HTML5 video
player controls. This is easily done by
updating the video tag, removing the
controls element, as per the below.
Keep in mind that while were coding
the new controls we will be unable to

actually play the video.

001 <video width=100%
poster=poster.jpg>

Get video elements

We will be using jQuery in

order to add controls back into
our player, simply because Bootstrap
needs it as well. Add the following
code block to the bottom of your
page, just above the closing </body>
tag. This will cast the video element
onto a variable called videoPlayer for
use later on.
001
002
{

This will cast the video element

onto a variable called videoPlayer for
use later on

The poster element

presented with a black video screen.

Until you hover over it, its not very
obvious that its a video at all. There
are two ways around this, the first is
to set the video to autoplay, or we
can add the following code to add an
intro slide.

Youll notice when we

first load the page youre
120

WorldMags.net

Create a HTML5 responsive video player

Responsive design
WorldMags.net
003
var videoPlayer =
$(#videoPlayer);
004
});
005 </script>

controls in and over the next few

steps we will hook them up via
jQuery. The controls use the Bootstrap
Glyphicons we mentioned previously.
Add this under your video tag, within
the jumbotron.

Add an ID

You may have noticed in the

previous step, we added a
jQuery var that targets the ID of
videoPlayer. The next step is for us
to add this ID to our video tag to
pair things up. Targeting based on
ID is good if you have multiple video
elements on a page that you want to
all behave differently to one another.
001 <video width=100%
poster=poster.jpg id
=videoPlayer>

The controls

Now its time to add the

controls back in, or at least
the HTML framework that will power
them. This block of HTML adds all the

001
<div class=videoControls>
002
<a href=#
class=btnPlay><span
class=glyphicon glyphiconplay>
</span></a>
003
<div class=videoTime>
004
<span class=current></
span>/<span
class=duration></
span>
005
</div>
006
<a href=#
class=btnMute><span
class=glyphicon glyphiconvolume-up>
</span></a>
007
<a href=#
class=btnFullscreen>
<span class=glyphicon
glyphiconfullscreen></span></a>
008
</div>

Hook up play

The first control were going

to hook up is the play button.
This will be a multi-function button
that will change from a Play button
into a Pause button when activated.
Add this code within your script tag,
directly underneath your videoPlayer
var declaration. Run it in your browser
to test it out.
001
002
003

$(.btnPlay).click(function() {
videoPlayer[0].play();
})

Switch the button

Now we can play the video,

we can switch the Play control
to a Pause when it is active. Well do
this via an if statement that updates
the button class, replacing the Play
glyphicon with the Pause icon. The if
statement will also resume playback
and switch the icon back. Replace the

The video control

HTML has now been
added, although
they are not currently
functioning at all

121

WorldMags.net

Create a HTML5 responsive video player

WorldMags.net

Responsive design
previous step with the below.

001 $(.btnPlay).click(function() {
002
if(videoPlayer[0].paused)
{
003
videoPlayer[0].play();
004
$(.glyphicon-play).
attr(class,
glyphicon glyphiconpause);
005
}
006
else {
007
videoPlayer[0].pause();
008
$(.glyphicon-pause).
attr(class,
glyphicon glyphiconplay);
009
}
010
return false;
011
})

Display current time

Well now hook up the current

time span via jQuery. You may
have noticed the forward slash that
is currently being outputted, this
will serve as the break between the

current time and the total time. Add

the following code block underneath
the previous step within your
document ready script block.

following code will round that number

up to the nearest second. You can
extend this functionality to display
hours, minutes and seconds as well.

001 videoPlayer.on(timeupdate,
function() {
002
$(.current).
text(videoPlayer[0].
currentTime);
003
});

001

Less accuracy

You may have noticed that our

time includes milliseconds as
well as seconds; this is probably a little
bit too accurate for most situations.
Altering the previous step to the

$(.current).text(Math.round
(videoPlayer[0].currentTime));

Total time

The next thing to do is to get

the total duration of the video
and display this next to our current
time. Add this code underneath the
previous step to hook up the span in
our control <div>. Again; you will
need to round the number to get rid
of the milliseconds.

Going fullscreen works slightly

differently for different browsers, so
there will be two jQuery commands
The current time is
now being displayed
as a float, a bit of
jQuery rounding
will remove the
decimal places

122

WorldMags.net

Create a HTML5 responsive video player

Responsive design
WorldMags.net
other elements from being affected
in weird ways. This code will space our
elements out nicely.

Our rounded progress and total

spans are now functioning and
showing the current time and
total time in seconds

The Fullscreen button now works across browsers. The user will
be presented with a fullscreen notification when this is activated

001
videoPlayer.
on(loadedmetadata,
function() {
002
$(.duration).text(Math.
round
(videoPlayer[0].duration));
003
});
004

class, glyphicon
glyphicon-volumeup);
008
}
009
});

Mute the audio

Combining everything that

we have learned form the
Play/Pause button, we can hook up
the Mute/Unmute button with the
following if statement. Place this
underneath the previous step, within
the document ready bracket. This will
switch the button class to the Mute
icon, and back again when a user
interacts with it.

001 $(.btnMute).click(function() {
002
if (videoPlayer[0].muted
== false) {
003
videoPlayer[0].muted =
true;
004
$(.glyphicon-volumeup).attr(
class, glyphicon
glyphicon-volumeoff);
005
} else {
006
videoPlayer[0].muted =
false;
007
$(.glyphicon-volumeoff).attr(

Go fullscreen
The final button we need
to hook up is the Fullscreen
button. Going fullscreen works slightly
differently for different browsers, so
there will be two jQuery commands
that will do the exact same thing. Add
this underneath the previous step and
run your browser to see the results.
Press ESC to exit fullscreen.
001

$(.btnFullscreen).on(click,
function() {
002
videoPlayer[0].
webkitEnterFullscreen();
003
videoPlayer[0].
mozRequestFullScreen();
004
return false;
005
});
006

Add some style

Now well make our controls

appearance look a bit better by
adding the following code within our
CSS block from Step 8. When dealing
with floating elements, dont forget
to add a clear underneath to prevent

001 .videoControls {
002
width: 100%;
003
font-size: 30px;
004
}
005
.videoControls span,
.videoControls div {
006
display: inline-block;
007
}
008
.btnMute, .btnFullscreen {
009
float: right;
010
padding-left: 20px;
011
margin-right: 20px;;
012
}
013
.btnPlay {
014
padding-right: 20px;
015
margin-left: 20px;
016
}

Change the colours

The final stage is to amend the

colour scheme and change it
from the default Bootstrap blue. Feel
free to adjust the colours to match
your sites aesthetic. Add this code
underneath the previous step within
your CSS block. For a production
environment it is recommended that
you put all CSS and JS in separate files.
There you have it! Your own custom
responsive HTML5 video player is now
ready to be shown off.
001 .videoControls span,
.videoControls div {
002
display: inline-block;
003
color: #999;
004
}
005
.btnMute, .btnFullscreen {
006
float: right;
007
padding-left: 20px;
008
margin-right: 20px;
009
color: #999;
010
}
011
.btnPlay {
012
padding-right: 20px;
013
margin-left: 20px;
014
color: #999;
015
}
016
.glyphicon:hover {
017
color: #555;
018
}
019

123

WorldMags.net

Resources
Essential web design resources
WorldMags.net

Essential web design resources

Get your hands on the best resources to help create a better web experience
365 PSD

Awwwards

Color

365psd.com/

www.awwwards.com

color.hailpixel.com

365 PSD is a brilliant resource.

Get your hands on a free PSD file
everyday. These include from UI kits,
icon templates and much more.
Simply select a PSD and download
ready to use.

A popular destination for those

looking for some design inspiration.
The site presents a Site of the Day,
along with a Site of the Month,
offering recognition to well-designed
sites and designs efforts and talent.
Plus, it offers expert opinion and
insight on site featured.

Choosing a colour is never easy but

this simple to use site not only makes
it easy it also makes it fun. Move
the move cursor around the screen
to pick a colour. Click again to pick
another and so on to create a palette
of choice. It allows you to clearly see if
your chosen colours will clash.

Behance

COLOURlovers

www.behance.net/

www.colourlovers.com

Behance is a showcase for creative.

If you have work you want the
world to see than this is a great place
to start. Plus, employers will
be scouring the site looking for
creative talent.

The color palette of a website can

make a big difference to how it is
viewed. To get an insight to the
latest colour trends and a myriad
of well defined palettes this site is a
must visit.

Apple Watch
concept PSD
watch.janlosert.com/

The Apple Watch is a product that

many will love. This set of PSDs allows
for the creation of concept versions
of your favourite websites and what
they could look like on the much
smaller Apple Watch screen. Simply
download and start getting creative.

Get free hi-res images for projects

Search and find inspiration with Niice

Test out web fonts and typography

Get thousands of free vector icons

124

WorldMags.net

Essential web design resources

Resources
WorldMags.net
Dribbble

Google Fonts

Smashing Magazine

dribbble.com/

www.google.com/fonts/

www.smashingmagazine.com/

If in need of design inspiration

then Dribbble should one of your
first ports of call. Check out what
other designers are doing and
get inspired .

A great collection of free fonts

optimised for the web. Download to
test and try in designs. Alternatively,
select a font and weights and use
the generated code to use the font in
live web design projects. Youll have
thousands of fonts to hand instantly
and license free.

Smashing Magazine is an online

magazine for professional Web
designers and developers. It focuses
a host of different elements including
techniques, best practices and
valuable resources.

Flaticon
www.flaticon.com/

Icons are great for quick, simple and

neat visual representations. Getting
the right set is important and Flaticon
provides over 500 free sets to choose
from. The icons are available in all the
standard formats and can be used as
web font icons.

Flat UI Pro
designmodo.com/flat/

HTML5 UP
html5up.net/

This is the place to be if looking

to get a headstart on your latest
design project. It offers a selection
of contemporary page templates
that are all screen friendly. These free
designs can be downloaded and
modified to match a specific design.

Niice

Flat UI Pro is a flat UI kit that offers

hundreds of basic components
including icons and glyphs. These
are perfect for a quick start on new
designs and new projects.

niice.co

Inspiration is an integral part of the

design process and this niche search
engine is here to help. Simply type
in a keyword and Niice scours a host
of popular inspirational/creative sites
before returning plenty of visual
inspiration to get your creative juices
flowing freely.

Font Squirrel
www.fontsquirrel.com/

Font Squirrel brings together an

impressive collection of fonts
that are free for commercial use.
Browse through the neatly defined
collections and generate the code
needed to add to a web design.

Pixeden
www.pixeden.com

Thousands of quality web resources

are available here. The site offers
plenty of free graphics, icons, vectors,
but its offers even more if you sign
up to one of their premium plans.

Google Developers
Academy
developers.google.com/academy/

Typecast
typecast.com/

The Typecast platform allows

users to create visual and semantic
typographic designs. Then they
can be checked for readability and
rendering to make sure that they look
like the designer intended. You can
then share a working prototype.

Underscores
underscores.me/

The backbone of WordPress is the

theme. There are thousands of free
and premium themes available but if
a custom theme is required, a starter
theme such as Underscores is a great
starting point.

Unsplash
unsplash.com/

High-quality photography can

transform a web site and engage
visitors. Unsplash provides a
collection do whatever you want
images that have no restrictions.

W3Schools
www.w3schools.com/

Reddit web design

www.reddit.com/r/web_design/

The latest web news is interspersed

with loads of titbits of web-related
information. There are links to new
resources, newly designed websites
and useful tutorials.

WorldMags.net

Resources
Essential web design tools
WorldMags.net

Essential web design tools

Discover the best tools to help build a better web site more efficiently
3D CSS Text

Animate.css

Bitly

http://www.3dcsstext.com/

http://daneden.github.io/animate.css/

www.bitly.com

Create 3D text with code via the

extremely easy to use online tool.
Simply pick a font, colours, angle, size,
height and shadow and the code is
automatically generated. Simply copy
and paste to get your new design
element onto your site.

Take the hard work out of creating

CSS animations with this extensive
library of Just-add-water CSS
animations. Try out animations
before downloading the complete
collection of code. Once happy, you
can copy and past the code into your
own project.

Bitly is a popular link shortener. It is

ideal for shortening long links for
anywhere where space needs to be
saved. Its incredibly easy to use. Add
link, shorten and copy and paste.
You can sign up to the website in
order to store all of your previous URL
shortenings in one convenient place.

Adobe Color CC

BigVideo

Bootstrap

https://color.adobe.com/create/
color-wheel/

http://dfcb.github.io/BigVideo.js/

http://getbootstrap.com/

Create your own colour palette with

this simple but comprehensive colour
creation tool. Choose a base colour,
select a colour rule and fine tune to
create the perfect palette for your
project. It will allow you to see what
works well and what doesnt.

This is jQuery plugin that makes it

easy to add fit-to-fill background
video to websites. You can use it as
a player to show video playlist or
alternatively, you can use it for big
background images. It creates brilliant
results every time.

This is a popular and widely used

HTML, CSS and Javascript framework
for building responsive sites. It
contains everything a user needs to
create a site for desktop, tablet and
smartphones. Get out our tutorial on
page 82.

Create 3D with only CSS

A responsive framework to help build sites quickly

Quickly create the perfect colour palette

Get tools to test with Internet Explorer

126

WorldMags.net

Essential web design tools

Resources
WorldMags.net
Buffer
www.bufferapp.com

Buffer helps manage multiple social

media accounts at once. Users can
quickly schedule content from
anywhere on the web, collaborate
with team members, and analyze
statistics on how posts perform.

Can I use
http://caniuse.com/

Need to know what HTML tags

work in what browser? You do and
this well-conceived and informative
online tool will help tell you exactly
what works where.

open source, Ionic offers a library of

mobile-optimized HTML, CSS and JS
components, gestures, and tools for
building highly interactive apps

IOS GUI
www.teehanlax.com/tools

Creative agency Teehan+Lax has put

together its own collection of iOS UI
templates. Get components for the
iPhone 6, iPad, iOS7, iOS8 all in PSD
format make them easy to customise
in Photoshop.

JS Fiddle
www.jsfiddle.net

Codecademy
http://www.codecademy.com/

Need to brush up on your HTML

and CSS? Want to know how to use
jQuery? Sign up and learn how to
code interactively with a host of free
to access online courses.

This online tool provides a test bed

for any code. Split into separate
windows for HTML, CSS and
Javascript. Simply add code and
run to see the result. When working
perfectly drop the code into a web
page and see the results.

Lipsum
http://lipsum.com/

CleanCSS

Macaw
http://macaw.co/

Macaw provides the same flexibility

as an image editor, eg Photoshop,
but also writes HTML and CSS.

Modern.IE
www.modern.ie

A host of development tools for

testing the Internet Explorer browser.
Make sure your sites will work with
the browser on.

Namechk
http://namechk.com/

Want to know if the Twitter name

you want is still available? This is the
easy way to get an instant hit of
availability for dozens of popular sites.

Normalize.css
http://necolas.github.io/normalize.css/

To get better all-browser consistency

get this tool. Normalize.css makes
browsers render all elements more
consistently and in line with modern
standards. It precisely targets only the
styles that need normalizing.

Ink Interface Kit

If you need some placeholder text to

fill out your pages then this is a great
resource. Choose how many words,
paragraphs or even bytes and lists.
Then simply copy and paste into a
page. It will allow you to figure out
how much text you can input into
your layout without it throwing off
the design, or becoming too much
like a wall of text for visitors.

http://ink.sapo.pt/

Litmus

Every web designer needs a text

editor and Sublime Text is one of
the best. Used by the pros, but still a
great tool worth a try.

www.litmus.com

Webflow

www.cleancss.com

Make your CSS better. CleanCSS

is a powerful CSS optimizer and
formatter. Basically, it takes your
CSS code and makes it cleaner and
more concise.

Ink is an interface kit that provides a

host of files to help create responsive
web interfaces quickly and efficiently.
It is based on a simple grid system
and fully customisable.

Ionic
http://ionicframework.com/

This is a great tool for creating

HTML5-friendly web apps. Free and

The complete email testing and

analysing tool. See how your
campaign emails will look, check
so your emails dont become spam
and analyse data to see if your emails
are being read. A brilliant tool for
companies that rely on newsletters,
promotional emails and keeping up
with their readership.

Sublime Text
http://www.sublimetext.com/

www.webflow.com

For those who dont like, or perhaps

know how, to code. Webflow is
a drag-and-drop website builder
for designing custom, professional
websites without code. Its familiar
GUI will make it easy for newcomers
and designers.
127

WorldMags.net

tri Spe
al ci
of al
fe
r

WorldMags.net

Enjoyed
this book?
Exclusive offer for new
Try
3 issues
for just

* This offer entitles new UK direct debit subscribers to receive their first three issues for 5. After these issues,
subscribers will then pay 25.15 every six issues. Subscribers can cancel this subscription at any time. New
subscriptions will start from the next available issue. Offer code ZGGZIN must be quoted to receive this special
subscriptions price. Direct debit guarantee available on request.
** This is a US subscription offer. The USA issue rate is based on an annual subscription price of 65 for 13 issues,
which is equivalent to approx $102 at the time of writing compared with the newsstand price of $194.87 for 13 issues
($14.99 per issue). Your subscription will start from the next available issue.
128

WorldMags.net

Uncover the secrets

WorldMags.net
of web design
Practical projects
Every issue is packed with step-by-step tutorials for
Flash, Dreamweaver, Photoshop and more

In-depth features

About
the
mag

Discover the latest hot topics in the industry

Join the community

Get involved. Visit the website, submit a portfolio and
follow Web Designer on Twitter

subscribers to

Try 3 issues for 5 in the UK*

or just $7.85 per issue in the USA**
(saving 48% off the newsstand price)
For amazing offers please visit

www.imaginesubs.co.uk/wed
Quote code ZGGZIN
Or telephone UK 0844 848 8413 Overseas +44 (0) 1795 592 878
129

WorldMags.net

Not just for

dummies

WorldMags.net

A clear, comprehensive series for people who want to start

learning about iPhone, iPad, Mac, Android and Photoshop

BUY YOUR COPY TODAY

Print edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
Available on the following platforms

WorldMags.net
facebook.com/ImagineBookazines

twitter.com/Books_Imagine

WorldMags.net

HTML5 & CSS3

The Complete Manual
The essential handbook for web designers

Introducing HTML
Discover the history behind HTML5 and how it
has developed into a brilliant language

Create your first page

Grasp the basics of HTML to create your very first
web page within the <html> tags

All about CSS

Guide to responsive design

Understand all there is to know about how to
adapt your website across devices

In-depth tutorials
Learn how to add menus, typography and video
players to your site

Cross-browser use

Learn the basics of CSS coding and customise

your HTML with different classes and styles

Ensure that your website is compatible across

multiple browsers including Chrome and Safari

Terminology guides
With all the key terms in one place, understand
the jargon of web design

Customise your website

Use CSS and HTML together to create a
responsive and engaging website

VOLUME 01

WorldMags.net

Hourglass Workout Program by Luisagiuliet 2
76% (21)
Hourglass Workout Program by Luisagiuliet 2
51 pages
12 Week Program: Summer Body Starts Now
87% (46)
12 Week Program: Summer Body Starts Now
70 pages
Read People Like A Book by Patrick King-Edited
57% (83)
Read People Like A Book by Patrick King-Edited
12 pages
Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health
77% (13)
Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health
260 pages
Cheat Code To The Universe
94% (79)
Cheat Code To The Universe
34 pages
Facial Gains Guide (001 081)
91% (45)
Facial Gains Guide (001 081)
81 pages
Curse of Strahd
95% (467)
Curse of Strahd
258 pages
The Psychiatric Interview - Daniel Carlat
91% (34)
The Psychiatric Interview - Daniel Carlat
473 pages
The Borax Conspiracy
91% (57)
The Borax Conspiracy
14 pages
The Secret Language of Attraction
86% (108)
The Secret Language of Attraction
278 pages
How To Develop and Write A Grant Proposal
83% (542)
How To Develop and Write A Grant Proposal
17 pages
Penis Enlargement Secret
60% (124)
Penis Enlargement Secret
12 pages
Workbook For The Body Keeps The Score
89% (53)
Workbook For The Body Keeps The Score
111 pages
Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits
83% (1016)
Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits
13 pages
KamaSutra Positions
78% (69)
KamaSutra Positions
55 pages
7 Hermetic Principles
93% (30)
7 Hermetic Principles
3 pages
27 Feedback Mechanisms Pogil Key
77% (13)
27 Feedback Mechanisms Pogil Key
6 pages
m102 Service Manual
67% (9)
m102 Service Manual
304 pages
Frank Hammond - List of Demons
92% (92)
Frank Hammond - List of Demons
3 pages
Phone Codes
79% (28)
Phone Codes
5 pages
36 Questions That Lead To Love
91% (35)
36 Questions That Lead To Love
3 pages
How 2 Setup Trust
97% (307)
How 2 Setup Trust
3 pages
Get Coding! Learn HTML, CSS, and JavaScript and Build A Website, App, and Game PDF
91% (32)
Get Coding! Learn HTML, CSS, and JavaScript and Build A Website, App, and Game PDF
209 pages
100 Questions To Ask Your Partner
78% (36)
100 Questions To Ask Your Partner
2 pages
The 36 Questions That Lead To Love - The New York Times
91% (35)
The 36 Questions That Lead To Love - The New York Times
3 pages
Satanic Calendar
25% (56)
Satanic Calendar
4 pages
The 36 Questions That Lead To Love - The New York Times
95% (21)
The 36 Questions That Lead To Love - The New York Times
3 pages
14 Easiest & Hardest Muscles To Build (Ranked With Solutions)
100% (8)
14 Easiest & Hardest Muscles To Build (Ranked With Solutions)
27 pages
Jeffrey Epstein39s Little Black Book Unredacted PDF
75% (12)
Jeffrey Epstein39s Little Black Book Unredacted PDF
95 pages
HTML, CSS, and JavaScript Mobile Development For Dummies HTML Css Javascript Tutorial
95% (44)
HTML, CSS, and JavaScript Mobile Development For Dummies HTML Css Javascript Tutorial
435 pages
HTML & CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design
From Everand
HTML & CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design
David DuRocher
4/5 (19)
The Complete Guide To Modern Javascript
100% (11)
The Complete Guide To Modern Javascript
295 pages
1001 Songs
70% (73)
1001 Songs
1,798 pages
CSS Mastery, 3rd Edition PDF
100% (11)
CSS Mastery, 3rd Edition PDF
428 pages
The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt
23% (954)
The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt
38 pages
Zodiac Sign & Their Most Common Addictions
63% (30)
Zodiac Sign & Their Most Common Addictions
9 pages
JWT August 2023
No ratings yet
JWT August 2023
142 pages
Learn JavaScript in 24 Hours
From Everand
Learn JavaScript in 24 Hours
Alex Nordeen
3.5/5 (5)
Splunk Basic Tutorial (Admin + Developer)
100% (1)
Splunk Basic Tutorial (Admin + Developer)
13 pages
Introduction To HTML & CSS
94% (34)
Introduction To HTML & CSS
155 pages
Technical Product Documentation - Lettering - BS en ISO 03098-1-2015
No ratings yet
Technical Product Documentation - Lettering - BS en ISO 03098-1-2015
18 pages
HTML, CSS, Bootstrap, Php, Javascript and MySql: All you need to know to create a dynamic site
From Everand
HTML, CSS, Bootstrap, Php, Javascript and MySql: All you need to know to create a dynamic site
Olga Maria Stefania Cucaro
4/5 (1)
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
From Everand
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
i Code Academy
4/5 (7)
HTML and CSS For Beginners
100% (16)
HTML and CSS For Beginners
329 pages
The Javascript Handbook 2015 PDF
100% (7)
The Javascript Handbook 2015 PDF
227 pages
Front-End Developer Handbook 2019 PDF
97% (31)
Front-End Developer Handbook 2019 PDF
145 pages
HTML & CSS PDF
43% (23)
HTML & CSS PDF
16 pages
A Smarter Way - To Learn JavaScript
95% (59)
A Smarter Way - To Learn JavaScript
288 pages
Responsive Web Design With HTML5 and CSS3 - Second Edition - Sample Chapter
50% (6)
Responsive Web Design With HTML5 and CSS3 - Second Edition - Sample Chapter
23 pages
Web Animation Using JavaScript Develop & Design (Develop and Design) by Julian Shapiro - 2015
100% (11)
Web Animation Using JavaScript Develop & Design (Develop and Design) by Julian Shapiro - 2015
402 pages
CSS Grid Explained 10june2019
100% (4)
CSS Grid Explained 10june2019
136 pages
CSS Cheat Sheet
99% (77)
CSS Cheat Sheet
1 page
The HTML and CSS Workshop: Learn to build your own websites and kickstart your career as a web designer or developer
From Everand
The HTML and CSS Workshop: Learn to build your own websites and kickstart your career as a web designer or developer
Lewis Coulson
5/5 (1)
Responsive Web Design with HTML5 and CSS3 - Second Edition
From Everand
Responsive Web Design with HTML5 and CSS3 - Second Edition
Ben Frain
4/5 (1)
Responsive Web Design with HTML5 and CSS3 Essentials
From Everand
Responsive Web Design with HTML5 and CSS3 Essentials
Asoj Talesra
5/5 (1)
Responsive Web Design with HTML5 and CSS3
From Everand
Responsive Web Design with HTML5 and CSS3
Ben Frain
3.5/5 (12)
The JavaScript Workshop: Learn to develop interactive web applications with clean and maintainable JavaScript code
From Everand
The JavaScript Workshop: Learn to develop interactive web applications with clean and maintainable JavaScript code
Joseph Labrecque
5/5 (3)
PHP for Beginners: Your Guide to Easily Learn PHP In 7 Days
From Everand
PHP for Beginners: Your Guide to Easily Learn PHP In 7 Days
i Code Academy
4.5/5 (5)
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
From Everand
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
i Code Academy
4/5 (11)
HTML & CSS: Learn the Fundaments in 7 Days
From Everand
HTML & CSS: Learn the Fundaments in 7 Days
Michael Knapp
4/5 (20)
HTML& CSS for Beginners: Learn the Fundamentals of Computer Programming
From Everand
HTML& CSS for Beginners: Learn the Fundamentals of Computer Programming
Jo Foster
No ratings yet
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
From Everand
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
Stephen J Link
5/5 (3)
A Software Engineer Learns HTML
100% (15)
A Software Engineer Learns HTML
278 pages
CSS Programing WEB
91% (22)
CSS Programing WEB
109 pages
CSS in 44 Minutes
100% (5)
CSS in 44 Minutes
44 pages
HTML 5
100% (9)
HTML 5
370 pages
Web Design Tips, Tricks & Fixes Volume 1 V413HAV
95% (19)
Web Design Tips, Tricks & Fixes Volume 1 V413HAV
228 pages
Css Animations
100% (4)
Css Animations
78 pages
HTML5 Programming Cookbook
100% (6)
HTML5 Programming Cookbook
67 pages
Javascript Book
100% (15)
Javascript Book
458 pages
Web Design Tips, Tricks & Fixes - Vol.3 2015
96% (27)
Web Design Tips, Tricks & Fixes - Vol.3 2015
180 pages
Advanced Javascript
100% (5)
Advanced Javascript
617 pages
HTML
100% (3)
HTML
192 pages
Javascript Bootcamp
92% (13)
Javascript Bootcamp
108 pages
Selectors and Their Syntax Syntax To Write CSS
No ratings yet
Selectors and Their Syntax Syntax To Write CSS
1 page
(PDF) JavaScript Programming
83% (6)
(PDF) JavaScript Programming
81 pages
Web Animation Using JavaScript
100% (8)
Web Animation Using JavaScript
402 pages
Advanced Javascript, 3rd Edition
100% (3)
Advanced Javascript, 3rd Edition
617 pages
Javascript Goodies
100% (12)
Javascript Goodies
496 pages
Javascript Cheat Sheet
100% (4)
Javascript Cheat Sheet
1 page
The CSS Guide: The Complete Guide to Modern CSS
From Everand
The CSS Guide: The Complete Guide to Modern CSS
Tim Robards
5/5 (2)
Professional CSS3
From Everand
Professional CSS3
Piotr Sikora
5/5 (1)
HTML in 30 Pages
From Everand
HTML in 30 Pages
U.Q. Magnusson
4.5/5 (14)
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
From Everand
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
Steven Bright
No ratings yet
JavaScript: Tips and Tricks to Programming Code with Javascript
From Everand
JavaScript: Tips and Tricks to Programming Code with Javascript
Charlie Masterson
No ratings yet
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet
50 Recipes for Programming CSS3
From Everand
50 Recipes for Programming CSS3
Jamie Munro
No ratings yet
Mastering Bootstrap 4
From Everand
Mastering Bootstrap 4
Benjamin Jakobus
5/5 (1)
Mastering JavaScript
From Everand
Mastering JavaScript
Ved Antani
3.5/5 (3)
Beginning CSS: Cascading Style Sheets for Web Design
From Everand
Beginning CSS: Cascading Style Sheets for Web Design
Ian Pouncey
3.5/5 (8)
HTML, XHTML & CSS QuickSteps
From Everand
HTML, XHTML & CSS QuickSteps
Guy Hart-Davis
No ratings yet
HTML5 For Dummies Quick Reference
From Everand
HTML5 For Dummies Quick Reference
Andy Harris
4/5 (7)
Beginning HTML and CSS
From Everand
Beginning HTML and CSS
Rob Larsen
No ratings yet
Learn PHP Programming in 7Days: Ultimate PHP Crash Course For Beginners
From Everand
Learn PHP Programming in 7Days: Ultimate PHP Crash Course For Beginners
Austin Myers
3/5 (11)
Manual Pellet Boiler PRO-Flex
No ratings yet
Manual Pellet Boiler PRO-Flex
48 pages
F
No ratings yet
F
58 pages
Crossfit Level 1 Certificate Course Participant Handbook: V7.4-20151020R1Kw
No ratings yet
Crossfit Level 1 Certificate Course Participant Handbook: V7.4-20151020R1Kw
29 pages
NORSOK U-101 (1997) - Diving Respiratory Equipment
No ratings yet
NORSOK U-101 (1997) - Diving Respiratory Equipment
17 pages
QJ148-MS-G-003 - Gwc-Rlic-Permenent Access Culvert and Road Works.
No ratings yet
QJ148-MS-G-003 - Gwc-Rlic-Permenent Access Culvert and Road Works.
12 pages
Datasheet - SMC - V2.4.19
No ratings yet
Datasheet - SMC - V2.4.19
4 pages
Final Presentation
No ratings yet
Final Presentation
34 pages
Is 8112 2013 PDF
No ratings yet
Is 8112 2013 PDF
13 pages
FreePBX Training Neocenter Jun19 23 Pag - 37 170
No ratings yet
FreePBX Training Neocenter Jun19 23 Pag - 37 170
134 pages
Netsure 211 C23 User Manual (En)
100% (1)
Netsure 211 C23 User Manual (En)
22 pages
Uap Ac Pro Datasheet
No ratings yet
Uap Ac Pro Datasheet
3 pages
Certification of Conformance: Tri-Tech Medical Inc
100% (1)
Certification of Conformance: Tri-Tech Medical Inc
2 pages
1KHW028618 FOX61x MPLS TP r6b - pc3
No ratings yet
1KHW028618 FOX61x MPLS TP r6b - pc3
144 pages
Tarjeta 5700 y 5950
0% (1)
Tarjeta 5700 y 5950
12 pages
Catalog Data Center Es
No ratings yet
Catalog Data Center Es
38 pages
Dr. Apj Abdul Kalam Govt. College: E-Tender Notice
No ratings yet
Dr. Apj Abdul Kalam Govt. College: E-Tender Notice
6 pages
File Handling in C ++
No ratings yet
File Handling in C ++
74 pages
Scorecard Formula Guide
100% (1)
Scorecard Formula Guide
32 pages
534945919 كتاب سفر ادم عليه سلام
No ratings yet
534945919 كتاب سفر ادم عليه سلام
138 pages
RMF Monitor III
No ratings yet
RMF Monitor III
23 pages
Sist en 14488 2 2006
No ratings yet
Sist en 14488 2 2006
9 pages
DV Power Catalogue - Eng
No ratings yet
DV Power Catalogue - Eng
16 pages
BS En196-3
100% (1)
BS En196-3
14 pages
Astm A609 A609m-12 (R18) 1.02
100% (3)
Astm A609 A609m-12 (R18) 1.02
9 pages
Weasis
No ratings yet
Weasis
2 pages