The Practical Programmer’s Guide

to HTML & CSS

by David Hikari
 Dedicated to:

CERN, for inventing the web browser and web server, and
giving birth to the World Wide Web,

the late Steve Jobs, for his immeasurable gifts to mankind, and

Dr. Fujio Masuoka, Kane Kramer, and James Russell, who

invented flash storage, the mp3 player, and Compact Discs,
respectively, for paving the way into the future.
© Copyright 2016 All Rights Reserved. Copyright and rights to publish, republish and/or modify this document in any
way resides with the author of this Kindle edition. No part of this book except Chapters 1.10, 1.11 and 1.13 may be
reproduced in any form, digital or otherwise, without express permission from the author.

For business inquiries, contact davidhikaribooks@gmail.com

This book may be purchased for educational and/or informational use only.

Unauthorized reprint in any format and distribution, commercially or free of cost, is prohibited.

Other books in the Practical Programmer’s Series:

The Practical Programmer’s Guide to Javascript and jQuery

The Practical Programmer’s Guide to PHP and MySQL

Other books in progress by the same author:

WordPress Theme Development for Newbies

About the Author

David Hikari is a freelance web developer specializing in HTML, CSS, Javascript, jQuery, AJAX, PHP and MySQL,
Currently he lives in Santa Monica with his delightful pet dogs and cats.

Attached Content
Please download the attached content that comes with this book at this URL: http://bit.ly/1LwoI0B and unzip it with
WinRAR or iZip. Henceforth, this unzipped folder named ‘files’ shall be referred to as ‘the downloadable content’ or as
‘the content attached with this book’.
 Table of Contents
1. HTML & CSS – Learn to Build Static Web Pages
1.1. What is HTML?
1.2. Hello World! - Building your first webpage
1.3. Headings, Paragraphs and other HTML elements to get you started
1.4. What is CSS?
1.5. Implementing internal/external stylesheets
1.6. Customizing color, background and position of elements using CSS
1.7. Links, Forms, Text inputs, Buttons , and Lists
1.8. Customizing Forms, Links, Text inputs and Buttons
1.9. Adding Images and Videos
1.10. Full List of HTML elements
1.11. Full list of CSS Selectors
1.12. Full List of CSS properties and Possible values
1.13. Responsiveness – A Complete Reference
1.14. Parallax using HTML and CSS only

2. Learning Through Projects

2.1. Centering a 80% width page
2.2. Adding images to he top of three columns (responsive)
2.3. Changing Background Color - Gradients
2.4. Adding background images and using partly transparent backgrounds to make text
more visible
2.5. Using @media query to make a page responsive
2.6. Using @font-face to import custom fonts
2.7. Concept of Headers
2.8. Concept of Sidebars
2.9. Concept of Footers
2.10. Building a full professional static webpage
2.11. Embedding YouTube Videos
3. Advanced Projects
3.1. PSD to HTML
3.2. Career Advice

4. Miscellaneous
4.1. What’s next?
Section 1. HTML & CSS – Learn to Build Static
Web Pages
 Chapter 1.1 – What is HTML?

HTML stands for HyperText Markup Language. It is a scripting markup-based language

understood by browsers (and web developers). In HTML, there are tags like <a> and <p>
called opening tags and also tags like </a> and </p> called closing tags. The content
between an opening tag and the next closing tag of the same type together with the tags is
an element of the type of the tag. For example, <p> is called the paragraph tag, so if we
code:
<p>Hello people</p>
..we call the whole thing a paragraph element. <p></p> is called an empty paragraph
element, because it has no content.
Sometimes an element is contained within a single self-closing tag. A common example is
an image. The standard image element goes like:
<img src=”path/to/image.jpg” />
Currently the W3 Consortium takes care of handling the Syntax and features of HTML.
The latest version of HTML as of writing is HTML5.
Let’s get started!
Chapter 1.2 – Hello World! Building your first web page
To get started coding HTML, all you need is a text editor and a web browser that can open
HTML files from your file directory. If you are working on a Mac or Windows, you
already have this. However, I strongly recommend downloading an additional text editor
that features syntax highlighting, like Notepad++ for Windows and Coda for Mac. If you
have Linux, use text editor X and any web browser.
Now you will learn how to build your first web page. If you have already built one you
can skip this chapter.
First, you have to create an empty text file,and rename it ‘index.html’. If you are using
Windows, make sure that Windows Explorer or File Explorer is set to show extensions of
files, otherwise your file will be renamed ‘index.html.txt’ which is a text file and cannot be
read as HTML by browsers.
Now, open index.html in your text editor and type in the following:
1| <!DOCTYPE html>
2|<html lang=”en-US”>
3|<head>
4|<meta charset=”UTF-8”>
5|<title>My Web page</title>
6|</head>
7|<body>
8|<h1>Hello World!</h1>
9|</body>
10|</html>
Explanation:
In line 1, we told the browser which version of HTML the document is written in. Prior to
HTML5, HTML4 or XHTML 1.0 were mentioned specifically but HTML5 is simply
called ”HTML” hence we do not need to bother with version numbers anymore. It is
specified for backwards compatibility so that websites written in older versions of HTML
would not become unsupported as soon as a new version was released.
Line 2 contains the opening <html> tag. This indicates that the document is in HTML, and
from there on until the ending </html> tag the web page is contained.
Line 3 contains the <head> tag. Anything written within the head element is solely for the
browser and remains unseen by the user when he loads a page. All except for the title
which is just some text that the browser uses to identify individual pages.
Line 4 contains the <meta> tag. This is a tag for including meta data into the page.
‘charset’ specifies what the page text is to be encoded in UTF-8 encoding supports
foreign languages as well as English so if a web page contains some Chinese or Japanese,
it would load without problems.
Line 5 contains the title element. Text contained in this element is loaded and displayed
usually at the top of a browser or on the respective tab in which the page has been opened.
Line 6 Closing </head> tag
Line 7 Opening <body> tag. The body element contains well, the body of a web page. It is
worth noting that tags indicated inside the body element are processed as HTML but those
in the title element will be shown as plain text, making the title look something like
<b>Title of Page,/b> and not some styled text.
Line 8 has the main content of our html page- Hello World. The h1 stands for Heading 1.
There are 6 headings from <h1> to <h6> each with decreasing size starting from <h1>.
They are mainly used to specify the heading of a page or headings of sections of the page.
Line 9 contains the closing </body> tag. For best practices, it is advisable to include this.
Line 10 contains the closing </html> tag.

Congratulations, you have created your first web page! Just click on index.html in your
file browser or open the file with a web browser and you should see something like this:

Though it’s not on the web yet and it’s certainly not much of a page, this is the inner
skeleton of modern websites. You have learned how to talk to the browser. In coding
HTML and CSS, our job is to tell the browser how to load and style the web page, and
what content should be in it.
Chapter 1.3 - Headings, Paragraphs and other HTML elements to get
you started
You have already used the <h1> tag. And you know there are six header tags – from <h1>
to <h6>, in decreasing order of size. Now let us talk about the <p> tag. This is a paragraph
tag. Content inserted within a <p> tag automatically begins on a new line. However, by
default the first word of a paragraph element isn’t indented, but we can do that using CSS
later on.
There are a couple of extra elements which come in handy sometimes. The <b> tag causes
text within it to become bold, and the I tag causes text within to become italic, and the
<U> tag causes text inside to be underlined. In HTML5, <strong> was introduced as a
replacement for <b> and <em> as a replacement for <i> so it is recommended that you use
them instead.
There is also an element called <span> and an element called <div>. These are simply
containers for blocks or pieces of text which you do not wish to be bold, underlined, but
want to be styled in a way not specifically defined in HTML. For example, you may want
a few words in a paragraph to be highlighted in red. You can do it with <span>. Or you
may want an entire set of paragraphs with images attached to have the same background
color. You can achieve this by wrapping them in a <div> element.
However, the magical properties of <span> and <div> have to be defined with CSS.
Before we go into that, let us see what elements we can use in the body by now.
<p>This is a paragraph</p>
<p>This is a paragraph with some <strong>bold text.</strong></p>
<em>Here is some italic text outside any paragraph.</em>
<p>Span lets us apply <span class=”red”>custom, not pre-defined CSS</span></p>
<div>Can be used as a wrapper or container for other elements.</div>
Next we will learn how to add CSS to individual elements and collectively to several
elements at once.
Chapter 1.4 - What is CSS?
Cascading Style Sheet(Cascading Style Sheets plural) or CSS, is a set of instructions for
affecting the styles of different elements in HTML.
The basic CSS syntax is:
selector {
property: value;
}
Chapter 1.5 – Implementing internal/external stylesheets
There are three ways of adding CSS to your web page:
1. Using the <style> element inside the <head> element, generally after the closing
</title> tag and before the closing </head> tag.
2. Using style=”/*your styles here*/” attribute in your opening HTML element tag, for
example,
<h1 style=”text-decoration:underline;”>Hello World!</h1>
will underline the heading 1 text, ‘Hello World!’.
3. External CSS file: If you are creating a set of pages and you want them to be styled
similarly, this is the best option. Just create an empty file called ‘style.css’ in the same
folder as index.html and put in your style definitions there. Then add
<link href=“style.css” type=“text/css” rel=“stylesheet” />
before the </head> tag and after the </title> tag.
You can also put style.css in a folder named for example ‘css’ then the linking would be
thus:
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
If you have a folder called ‘mypage’ and in it two folders called say ‘css’ and ‘html’,and
you put index.html in ‘html’ and style.css in ‘css’, the code in this case would be:
<link href=”../css/style.css” rel=”stylesheet” type=”text/css” />
The part ‘../’ simply goes to the parent folder of the current folder, that is it would go up
one folder, so to speak. You can specify ‘../../’ to go up two folders, and so on.
Chapter 1.6 - Customizing color, background and position of
elements using CSS
Let us open our Hello World page. Add one <p> element containing some text-any text
you like. Many people like to add some Latin as filler text when designing Web pages, to
do that search ‘Lorem ipsum copy paste’ in Google.
We want to set the font size of h1 element and p element to something of our choice. To
do that, add the following line of code within the <style> element or in the external
stylesheet, whichever you choose to create:
h1 {
font-size:40px;
}
Similarly, you can change the font size of the p element as well:
p{
font-size:20px;
}
Here I must mention something that can be quite irritating while churning out web pages,
it’s that different web browsers set different margin and padding on some elements.
Generally having all elements with a margin and padding 0px until we style them is ideal.
Hence, if you want, you can put the following code in to make the margin and padding of
all elements reset to zero by default. Remember, this will not override any of your
margin/padding specifications in CSS.
body {
margin:0px;
padding:0px;
}
You can also use ‘*’ instead of ‘body’. * is called the universal selector – it selects each
and every element that you have defined within the <body> element, including the
<body> element itself. However, using the universal selector to reset margins and
padding’s will remove all default margin and padding between paragraphs and heading
elements, so be careful.
Let us now change the background color of the header to orange and that of the paragraph
to pink. Why orange and pink? Because they are relatively brighter colors and our
background color is black. At least for now we will be benefited if our individual content
is clearly distinguishable. Add background: orange; to the h1 selector’s property-value
combinations. It should now look like this:
h1 {
font-size: 40px;
background: orange;
}
p{
font-size:20px;
background: pink;
}
By the way, here ‘h1’ is called the selector,because it selects the element(s) whose styles
are to be affected. ‘font-size’ and ‘background’ are called properties and ‘10px;’ and
‘orange;’ are called the values of their respective properties. The semi-colon at the end of
each line within the curly brackets is a must, except for an empty line, in which case it
should be avoided. We know, CSS syntax can be generalized thus:
selector {
property: value;
}
Now we want to indent the paragraph’s text. Add
p{
text-indent:25px; /* adds indentation before a paragraph */
line-height:2px; /* sets length between two lines */
letter-spacing:1px; /* sets distance between two letters */
}
The text within /* and */ are called comments. Comments are used to explain code to
other programmers or yourself so that code can be debugged and updated easily.
Comments are ignored by the browser, so there is no malfunction of the program. In CSS,
you open a comment with /* and close it with */
The body element’s style can be changed as well, usually to set a background color or set
universal styles like font-family or text color. Let us add some more styles to the body
element:
body {
background:#000;
color:white;
}
This will set the background to black and the color to white. We also add color:black; to
the p selector’s styles. This is because many properties of the parent element are inherited
or duplicated in the child element(s), so both the heading and <p> will have font color
white unless we change them.
A note about colors. There are at least four ways in CSS to define a color:
1. Text- orange, red, green, black, yellow;
2. Hex code: #ffffff for white, #000000 for black. Can be shortened to #fff for white and
#000 for black.
3. RGB: rgb(0,0,0) for black, rgb(255,255,255) for white.
4. RGBA: this is an addition in CSS3. It is like RGB, but accepts four parameters and the
last parameter is opacity. 1 is fully opaque and 0 is fully transparent. rgba(0,0,0,0.5);
means partly transparent black; rgba(255,255,255,0.5) means partly transparent white.
I am supplying a list of hex color codes to help you get started choosing colors for your
sites.
#ff700e - bright orange #b9d6c2 – off-white blue
#000080 – dark blue #b6ffd3 – off-white green
#662441 – dark violet #990000 – blood red
The finished page thus far looks like this:

We want the heading text ‘Hello World’ to be at the center of the line. We can do this by
adding the attribute align=”center” to the opening h1 tag, or adding text-align:center; to
the h1 selector’s styles, thus:
<h1 align=”center”>Hello World!</h1> OR in CSS,
h1 {
text-align:center;
}
Now, let us add some margin and padding to the paragraph. Within the curly brackets
following the p selector, add
margin:20px;
padding:10px;
You can also write margin:0px 20px; or margin:20px auto; or margin:0px 5px 10px 15px;
The syntax is-
margin: top left bottom right; or
margin: vertical horizontal;
We will go with our initial choice.
You can see that margin affects the amount of space left blank on the outside of the
element, while padding is the blank space inside the element.
Now let us style a div element. In our Hello World finished page, copy the entire
paragraph element and paste it right after the closing <p> tag. Add a couple of line breaks
between the closing</p> and the opening <p>
So basically it now looks like this:
<p>Mumbo jumbo in Latin
</p>

<p>Mumbo jumbo in Latin

</p>
Wrap each of the paragraph elements in a separate div tag, so it now looks like this:

<div>
<p>Mumbo jumbo in Latin
</p>
</div>
<div>
<p>Mumbo jumbo in Latin
</p>
Now let us divide the paragraphs each into a column of width half the page. This is simple
enough to do. Add the following style to your <style> element or external stylesheet:
div {
display:block;
width:50%;
float:left;
}
And now we have two columns:
We can see that the design of the elements with respect to each other seem irregular,so we
just modify some styles:
h1 {
margin:15px;
padding:10px;
}
p{
margin:5px 15px;
padding:10px;
}
Note that adding any margin or padding to the div element will break apart the column and
put each div on a separate line, because the sum of width of the two divs includes non-
zero margin and padding and exceeds 100% of the page width.
The float property is used to indicate positions of elements. A value of left makes the
elements stick to the left, and a value of right makes them stick to the right. If the sum of
two elements floated left or right is less than or equals 100%, they appear in the same line,
even though their display property is set to block, not inline-block.
The result is:
…which looks much more clean and professional.
Also note that if any element within the div with width 50% has any margin or padding,
there is no problem because it adjusts it’s content to fit the div’s width.
Whenever we are creating columns in a web page, we are basically using the float
property to build makeshift columns. One thing can go wrong- If there is any less-than-
full-width element before or after the column area, they may slide into the columns and
misalign them making the result look disastrous. So before the first opening <div> and
after the last closing </div> add some line breaks and in the space add:
<div style= “clear:both;width:100%;”></div>
This will prevent tedious correction and a lot of headaches when we add more elements to
our index.html page.
The finished Hello World page is available in folder ‘chapter-1.6’ of the download-able
content attached with this book.
Chapter 1.7 – Links, Forms, Text Inputs and Buttons
Links
Inserting the following code into HTML will produce a link to the Google homepage:
<a href=”http://www.google.com”>Go to Google</a>
Now in the same directory as index.html,create another html file called home.html and put
any HTML content inside of it. Next in the index.html after the closing </h1> tag add:
<a href=”home.html”>Go to Home</a>
A link will appear and clicking on it will take you to home.html. This is called relative
linking. This is the same way we include styles in the <link> element.
Links are called dummy links when their href value is ‘#’. For example,
<a href-”#”>Dummy Link</a> is a dummy link. They are used for demo purposes only.
Inputs
Any text input area is generally a part of a form, so to create a form, first we need to learn
how to create a text input. Add a <br> tag after the closing </a> in index.html and then
add:
<input type= “text” size= “15” placeholder= “Text Input” />
After refreshing, you will see that a input box has popped up below the link. The
placeholder attribute creates the gray text in the text box, that disappears as soon as you
type in something.
In HTML5,there are input fields specifically for numbers, emails, date and time, and so
on. For now we will just touch upon password input box and you can check the others in
the reference. Insert the following after the text box code:
<input type= “password” placeholder= “Password” />
Refresh the page. You may notice that anything you type into the password field is not
shown, adding a layer of protection and security to web forms.
Here are some other input elements:
<input type= “radio” />
<input type= “checkbox” />
<input type= “email” />
<input type= “date” />
<input type= “datetime” />
<input type= “number” />
<input type= “time” />
<input type= “button” />
<input type= “search” />
<input type= “month” />
<input type= “range” />
<input type= “color” />
<input type= “tel” />
<input type= “url” />
All these must have an attribute of name=”something” in order to be accepted by the form.
Radio buttons need to all have the same name, if only one is to be chosen of a set.
Labels.
Sometimes placeholders are not sufficient for indicating the purpose of an input field, such
as a checkbox or radio button. Hence the <label> element is used:
<label for=”username”>Enter username:</label>
<input type=”text” id=”username” name=”user” />
The for attribute of <label> takes in the id value of the input element connected with the
label. The advantage is, when the user clicks the label,the required input is immediately
brought into focus and anything the user types then goes into the input field, in this case,
with an ID of “username”.
This is particularly important for check boxes and radio buttons.
Drop-down List:
The following code will create a drop down list:
<select name= “dropdown”>
<option value= “apple”>Apple</option>
<option value= “orange”>Orange</option>
<option value= “lemon”>Lemon</option>
</select>
Adding attribute multiple= “multiple” will allow more than one option to be chosen.
Buttons:
Now for the buttons. Each form requires a submit button, or some JavaScript to trigger a
submit action. The code below will create a submit button with the value “Submit”:
<input type= “submit” />
The next piece of code will create a submit button but instead of ‘Submit’ it will show any
text of your choice:
<input type= “submit” value= “Click Me!” />
Another type of button exists,which is mostly used to perform JavaScript functions:
<button onclick=“myFunction();”>Click Here</button>
Similar to the submit button, there is a reset button. Clicking the reset button in a form will
reset all the elements’ values and erase any data that the user input from the form. The
code for a reset button is:
<input type= “reset” />
Forms:
For the form to work, we must set a value for the name attribute of all text input fields
within the form. Add name= “username”, thus:
<input type= “text” placeholder= “Text Input” name= “username” />
Let me explain a bit about forms. They retrieve the data from text fields within the form
when the submit event is triggered, then send it using the GET or POST method to a
specific page. The page then acquires the values and depending upon what the values are,
it performs different actions. For this to work, there must be a web server which processes
the data using a server side language like PHP or ASP.
Insert the following before the Link:
<form method=“get”> or <form method= “post”>
and the following after the Submit button:
</form>
Lists:
There are two types of lists in HTML: ordered lists and unordered lists. Here’s how to
create an ordered list:
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
And here’s how to create an unordered list:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
An ordered list looks like:
And an unordered list looks like:

You can put other elements like hyperlinks and labels within the <li> element.
Additionally, you can change the ‘list-style-type’ property of li to suit your needs.
Chapter 1.8 – Styling Links, Text Inputs and Buttons
Let us style our links. Many developers find it necessary to remove the underline that is
set by default in links. So we write:
a{
text-decoration:none;
}
We can also change the default blue color for unvisited links and default purple color for
visited links:
a{
color:red;
}
a:visited {
color:yellow;
}
Elements can also be styled to change their properties when a user hovers over them, thus:
a:hover {
color:black;
}
To style text inputs, we shall use the class attribute within each text input that needs to be
styled and style them equally. So we write:
<input type=”text” />
and in CSS:
label, input, a {
font-size:20px;
padding:15px;
border-radius:10px;
}
When we style classes in CSS, we put in a period (.) followed by the class name.
Similarly, when we style an id in CSS, we put in a hash or pound sign(#) followed by the
id. Remember that the same class can be shared by many elements, but an id value is
unique to one element only. You cannot have more than one element with id=“username”
in a single HTML file.
Similarly, we can style buttons. Add a class= “button” to the button element(s) you want
to style and in CSS insert:
.button {
margin:15px;
}
.button:hover {
cursor:pointer;
background:#bbb;

}
Refer to the Full List of CSS properties and their possible values and experiment with
different properties.

Using Tables to Display a Form:

Enter
<table>
<tr>
<td><label for=”username”>Username:</label></td>
<td>
<input type=”text name=”user” id=”username” />
</td>
</tr>
<tr>
<td><label for=”password”>Password</label></td>
<td><input type=”password” id=”password” name=”pass” />
</td>
</tr>
</table>
and in CSS enter:
table {
border:0px;
}
Check the folder chapter-1.8 in the download-able content for the finished customized
Links and Inputs HTML file.
Chapter 1.9 Adding Images and Videos
To add an image, enter:
<img src=”path/to/img.jpg” alt=”waterfall” title=”Waterfall” />
The src attribute contains the path to the image file. Alt attribute contains the text shown if
the image doesn’t exist in the specified location, and title is a piece of text that appears
when the user hovers over the image with his/her mouse.
To add a video, enter:
<video width=“640” height=“480” controls>
<source src=“movie.mp4” type=“video/mp4”>
<source src=“movie.ogg” type=“video/ogg”>
This video requires HTML5 support
</video>

To add some audio, enter:

<audio controls autoplay>
<source src=“lemon.mp3” type=“audio/mpeg”>
<source src=“banana.ogg” type=“audio/ogg”>
<source src=“banana.wav” type=“audio/wav”>
This audio requires HTML5 support
</audio>
where lemon.mp3, banana.ogg and banana.wav are three audio files in the same directory
as the HTML containing the code.
The ‘controls’ attribute specifies that standard controls should be shown the page.
The ‘autoplay’ attribute specifies that the sound file will be played as soon as the page is
fully loaded.
Chapter 1.10 Full List of supported HTML elements
Supported as of HTML5. This Chapter is licensed under Creative Commons License. I
have referred to the Mozilla Developer Network for parts of the information provided
here. You can view the source page at
https://developer.mozilla.org/en/docs/Web/HTML/Element .This list omits elements that
were supported in XHTML 1.0 and earlier versions of HTML.
<!—any text—> - comment(ignored by browser). Added to make code easier to be
read and/or altered by humans.
<a> - anchor, defines links inside a page
<abbr> - defines an abbreviation. Hovering over the element makes a tool-tip appear
containing the full form
<address> contains address information for an individual/organization
<area> defines an area inside an image-map
<article> introduced in HTML5,used to contain a single article.
<aside> - introduced in HTML5, encloses the sidebar
<audio> - used to integrate audio files
<b> - represents a span of text stylistically different from normal text, without
conveying any special importance or relevance.
<bdi> - or Bi-Directional Isolation Element isolates a span of text that might be
formatted in a different direction from other text outside it.
<blockquote> - indicates that the enclosed text is an extended quotation
<br> - adds a single line break. No closing tag.
<button> - Defines a button
<canvas> - can be used to draw graphics via scripting (usually Javascript)
<caption> - adds a table caption
<cite> - represents a reference to a creative work.
<code> - defines a fragment of computer code in HTML
<col> - defines column properties in each <colgroup>
<colgroup> - wraps a group column(s) in a table to apply similar formatting
<data> - links a given content with a machine-readable translation
<datalist> - contains a set of <option> elements that represent the values available
for other controls
<dd> - indicates a description of a term in a description list
<del> - represents a range of text that has been deleted
<details> - used as disclosure widget from which user can retrieve additional
information
<dfn> - represents defining instance of a term
<dialog> - displays a dialog box or window
<dir> - defines a directory list
<div> - the HTML Document Division Element is the generic container for flow
content. Used to group elements for styling purposes
<dl> - encloses a list of terms and definitions
<dt> - identifies a term in a definition list
<em> - marks text that has stress emphasis
<embed> - represents an integration point for an external application or interactive
content
<fieldset> - used to group several controls and labels in an input form
<figcaption> - represents a caption tied to a figure(image)
<figure> - used to insert image illustration diagram code snippet
<footer> - represents a footer for it’s nearest sectioning content or root element. Used
to create page footers
<form> - contains interactive controls to submit information
<h1>, <h2>, <h3> , <h4>, <h5>, <h6> - Heading 1 to 6
<header> - represents group of introductory or navigational aids
<hr> - Horizontal Rule- represents a thematic break between elements.
<i> - italic text
<iframe> - represents a nested browsing context. It is used to load another web page
into a block of your current web page, and to embed YouTube videos
<img> - inserts an image into a web page
<input> - defines an input element of some sort
<ins> - represents a range of text that has been added to a document
<kbd> - represents user input, produces an inline element in monospace font
<keygen> - used to generate keys for a signed certificate
<label> - represents a caption for an element of the user interface
<legend> - defines caption for content in it’s parent <fieldset>
<li> - defines individual list items of it’s parent <ul> (unordered list) or <ol>
(ordered list)
<link> - specifies relationship between current document and an external resource
<main> - represents the main content of the document <body>
<map> - used within <area> elements to define an image map
<mark> - used to highlight containing text
<menu> - represents a group of commands that the user can perform or activate
<menuitem> - indicates a command that can be performed in a popup menu
<meta> - represents any metadata information that cannot be represented by any of
the other metadata elements <link>, <script>, <style>, or <title>
<meter> - represents a scalar value with a known range or a fractional value
<nav> - cotains the main navigation links in a document
<noscript> - defines content that is to be inserted only if the script file is unavailable
<object> - represents an external resource
<ol> - is an unordered list definer, individual list items are specified inside it using
<li>
<optgroup> - creates a grouping of options within the <select> element
<option> - used to create a control representing an item in a <select> element
<output> - element represents result of a calculation
<p> - paragraph element
<param> - defines parameters for <object>
<progress> - used to view the progress of completion of a task
<q> - quote element
<rp>, <rt>, <ruby> - defines ruby stuff
<s> - strikethrough element, contents will be striked in the middle
<samp> - identifies sample output from a computer program
<script> - used to include JavaScript
<section> - represents a generic section of a document
<select> - generally appears as a dropdown
<small> - used to make containing text smaller
<source> - used to define multiple media sources for <audio>
<span> - generic inline container
<strong> - makes content within it bold, identifies text of importance
<style> - used to define CSS
<sub> - subscript element
 <summary> - it’s content is used as a summary or caption for a <details> element
<sup> - superscript element
<table> - used to create a table in HTML
<tbody> - defines one or more <tr> to be the body of it’s parent <table>
<td> - table cell
<template> - used to contain client-side content that is not displayed when page is
loaded but may be displayed later using JavaScript
<textarea> - represents a multi-line plain text editing control
<tfoot> - table foot element, summarizes the content of a table
<th> - table header cell, defines headers for subsequent columns
<thead> - the table head element
<time> - represents time on a 24-hour clock or represents date
<title> - page title
<tr> - table row
<track> - lets you set timed text tracks to <audio> and <video> elements
<u> - underlines content
<ul> - used to create an Unordered List
<var> - represents a variable in a mathematical expression or in some programming
context
<video> - used to embed a video by indicating it’s source file
<wbr> - Word Break Opportunity, defines a position in text where the browser may
optionally break a line
<xmp> - Example Element, content between the start and end tags is rendered
without transforming text to HTML. Used to display HTML code examples

If I have missed any elements that you feel should be included, you are free to e-mail me
at davidhikaribooks@gmail.com
Chapter 1.11 – Full List of CSS Selectors
This chapter is dedicated to providing the types and varieties of CSS selectors and
teaching you how to tackle complex situations that may arise when you are building a
professional webpage.
* - The universal selector, selects every element inside <body> and also the <body>
element itself
E – selects all h1 elements of type E in the document. ‘E’ can be replaced by ‘h1’,
‘p’, ‘a’, ‘body’, but not ‘title’
.class – selects every element that has a class of “class”. You can define a class in an
element by putting in ‘class= “class name” ’. An element can belog to more than one
class, a class can apply to more than one element.
#id – selects the element that has an ID of ‘id’. You can define an element to have an
id by adding the attribute ‘id= “id” ’ to the opening tag of the element. A specific ID
can only be applied to a single element, once.
E F – matches any element F that is a descendent of E. All F elements that are
present in an E element are affected
E > F – matches any element F that is a child of E. Does not affect F elements
wrapped in child element(s) of E
E:first-child – matches any element that is the first child of it’s parent
a:link – affects all hyperlinks that have not yet been visited by the user
a:visited – affects all links that have been visited by the user
textarea:active – affects styles of a text area but only when it is active,or the user is
clicking it.
textarea:hover – affects styles of a <textareaa> element when the user’s mouse
pointer is hovering over that element
textarea:focus – this particular style is valid only for text inputs, usually. It applies
the styles contained in the following curly brackets to, here, the <textarea> element
when the cursor is blinking in that particular element. In that case, the element is said
to be in focus.
E + F – selects an F element that is immediately preceded by an E element
E[foo] – matches any E element whose foo attribute is set to anything
E[foo=“warning”] - matches any E element whose foo attribute is set exactly to
“warning”
E[foo~=“warning”] - matches any Element that has a foo attribute of space-
separated words or numbers, one of which is exactly equal to “warning”
div.warning – selects a div element with a class of “warning”. Different from div
.warning which is of type E F and simply selects any element of class= “warning”
that may be present in a div element.
div#myid – selects all divs with an id of “myid”
selector:pseudo-class {
property: value;
} /* here is a collection of pseudoclasses: :link :visited :active :hover :focus
:first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-
of-type :empty :target :checked :enabled :disabled */
selector:pseudo-element {
property: value;
} /* :first-letter and :first-line are two pseudo-elements */
p:nth-child(3n+2) – selects every p element that is the nth child of it’s parent. n starts
from 1 until theree are no more elements to select. Here it will select the 5th, 8th,
11th and so on elements.
Chapter 1.12 Full List of CSS Properties with their Possible Values

Name Values Initial value

<angle> | [[ left-side | far-left | left |

center-left | center | center-right | right
‘azimuth’ center
| far-right | right-side ] || behind ] |
leftwards | rightwards | inherit

‘background-
scroll | fixed | inherit scroll
attachment’

‘background-
<color> | transparent | inherit transparent
color’

‘background-
<uri> | none | inherit none
image’

[ [ <percentage> | <length> | left |

center | right ] [ <percentage> |
‘background-
<length> | top | center | bottom ]? ] | [ 0% 0%
position’
[ left | center | right ] || [ top | center |
bottom ] ] | inherit

‘background- repeat | repeat-x | repeat-y | no-repeat |

repeat
repeat’ inherit

[‘background-color’ || ‘background-
see
image’ || ‘background-repeat’ ||
‘background’ individual
‘background-attachment’ ||
properties
‘background-position’] | inherit

‘border-collapse’ collapse | separate | inherit separate

see
‘border-color’ [ <color> | transparent ]{1,4} | inherit individual
properties

‘border-spacing’ <length> <length>? | inherit 0

see
‘border-style’ <border-style>{1,4} | inherit individual
properties

‘border-top’
see
‘border-right’ [ <border-width> || <border-style> ||
individual
‘border-bottom’ ‘border-top-color’ ] | inherit
properties
‘border-left’

‘border-top-
color’ ‘border-
the value of
right-color’
<color> | transparent | inherit the ‘color’
‘border-bottom-
property
color’ ‘border-
left-color’

‘border-top-style’
‘border-right-
style’ ‘border-
<border-style> | inherit none
bottom-style’
‘border-left-
style’

‘border-top-
width’ ‘border-
right-width’
‘border-bottom- <border-width> | inherit medium
width’ ‘border-
left-width’

see
‘border-width’ <border-width>{1,4} | inherit individual
properties

see
[ <border-width> || <border-style> ||
‘border’ individual
‘border-top-color’ ] | inherit
properties

<length> | <percentage> | auto |

‘bottom’ auto
inherit

‘caption-side’ top | bottom | inherit top

‘clear’ none | left | right | both | inherit none

‘clip’ <shape> | auto | inherit auto

depends on
‘color’ <color> | inherit
user agent

normal | none | [ <string> | <uri> |

<counter> | attr(<identifier>) | open-
‘content’ normal
quote | close-quote | no-open-quote |
no-close-quote ]+ | inherit

‘counter- [ <identifier> <integer>? ]+ | none |

increment’ inherit none

[ <identifier> <integer>? ]+ | none |

‘counter-reset’ none
inherit

‘cue-after’ <uri> | none | inherit none

‘cue-before’ <uri> | none | inherit none

see
‘cue’ [ ‘cue-before’ || ‘cue-after’ ] | inherit
‘cue’ [ ‘cue-before’ || ‘cue-after’ ] | inherit individual
properties

[ [<uri> ,]* [ auto | crosshair | default |

pointer | move | e-resize | ne-resize |
‘cursor’ nw-resize | n-resize | se-resize | sw- auto
resize | s-resize | w-resize | text | wait |
help | progress ] ] | inherit

‘direction’ ltr | rtl | inherit ltr

inline | block | list-item | inline-block |

table | inline-table | table-row-group |
table-header-group | table-footer-
‘display’ inline
group | table-row | table-column-
group | table-column | table-cell |
table-caption | none | inherit

<angle> | below | level | above | higher

‘elevation’ level
| lower | inherit

‘empty-cells’ show | hide | inherit show

‘float’ left | right | none | inherit none

[[ <family-name> | <generic-family> ]
depends on
‘font-family’ [, <family-name>| <generic-family>]*
user agent
] | inherit

<absolute-size> | <relative-size> |
‘font-size’ medium
<length> | <percentage> | inherit

‘font-style’ normal | italic | oblique | inherit normal

‘font-variant’ normal | small-caps | inherit normal

normal | bold | bolder | lighter | 100 |

 normal | bold | bolder | lighter | 100 |
‘font-weight’ 200 | 300 | 400 | 500 | 600 | 700 | 800 | normal
900 | inherit

[ [ ‘font-style’ || ‘font-variant’ || ‘font-

weight’ ]? ‘font-size’ [ / ‘line-height’ see
‘font’ ]? ‘font-family’ ] | caption | icon | individual
menu | message-box | small-caption | properties
status-bar | inherit

<length> | <percentage> | auto |

‘height’ auto
inherit

<length> | <percentage> | auto |

‘left’ auto
inherit

‘letter-spacing’ normal | <length> | inherit normal

normal | <number> | <length> |

‘line-height’ normal
<percentage> | inherit

‘list-style-image’ <uri> | none | inherit none

‘list-style- inside | outside | inherit outside

position’

disc | circle | square | decimal |

decimal-leading-zero | lower-roman |
upper-roman | lower-greek | lower-
‘list-style-type’ disc
latin | upper-latin | armenian | georgian
| lower-alpha | upper-alpha | none |
inherit

see
[ ‘list-style-type’ || ‘list-style-position’
‘list-style’ individual
|| ‘list-style-image’ ] | inherit
properties
‘margin-right’
<margin-width> | inherit 0
‘margin-left’

‘margin-top’
<margin-width> | inherit 0
‘margin-bottom’

see
‘margin’ <margin-width>{1,4} | inherit individual
properties

<length> | <percentage> | none |

‘max-height’ none
inherit

<length> | <percentage> | none |

‘max-width’ none
inherit

‘min-height’ <length> | <percentage> | inherit 0

‘min-width’ <length> | <percentage> | inherit 0

‘orphans’ <integer> | inherit 2

‘outline-color’ <color> | invert | inherit invert

‘outline-style’ <border-style> | inherit none

‘outline-width’ <border-width> | inherit medium

see
[ ‘outline-color’ || ‘outline-style’ ||
‘outline’ individual
‘outline-width’ ] | inherit
properties

‘overflow’ visible | hidden | scroll | auto | inherit visible

‘padding-top’
‘padding-right’
‘padding-bottom’ <padding-width> | inherit 0
‘padding-left’

see
‘padding’ <padding-width>{1,4} | inherit individual
properties

‘page-break- auto | always | avoid | left | right |

auto
after’ inherit

‘page-break- auto | always | avoid | left | right |

auto
before’ inherit

‘page-break-
avoid | auto | inherit auto
inside’

‘pause-after’ <time> | <percentage> | inherit 0

‘pause-before’ <time> | <percentage> | inherit 0

see
[ [<time> | <percentage>]{1,2} ] |
‘pause’ individual
inherit
properties

‘pitch-range’ <number> | inherit 50

<frequency> | x-low | low | medium |

‘pitch’ medium
high | x-high | inherit

<uri> [ mix || repeat ]? | auto | none |

‘play-during’ auto
inherit

static | relative | absolute | fixed |

‘position’ static
inherit

depends on
 depends on
‘quotes’ [<string> <string>]+ | none | inherit
user agent

‘richness’ <number> | inherit 50

<length> | <percentage> | auto |

‘right’ auto
inherit

‘speak-header’ once | always | inherit once

‘speak-numeral’ digits | continuous | inherit continuous

‘speak-
code | none | inherit none
punctuation’

‘speak’ normal | none | spell-out | inherit normal

<number> | x-slow | slow | medium |

‘speech-rate’ medium
fast | x-fast | faster | slower | inherit

‘stress’ <number> | inherit 50

‘table-layout’ auto | fixed | inherit auto

a nameless
value that
acts as ‘left’
if ‘direction’
‘text-align’ left | right | center | justify | inherit
is ‘ltr’,
‘right’ if
‘direction’ is
‘rtl’

none | [ underline || overline || line-

‘text-decoration’ none
through || blink ] | inherit
‘text-indent’ <length> | <percentage> | inherit 0
 capitalize | uppercase | lowercase |
‘text-transform’ none
none | inherit

<length> | <percentage> | auto |

‘top’ auto
inherit

‘unicode-bidi’ normal | embed | bidi-override | inherit normal

baseline | sub | super | top | text-top |

‘vertical-align’ middle | bottom | text-bottom | baseline
<percentage> | <length> | inherit

‘visibility’ visible | hidden | collapse | inherit visible

[[<specific-voice> | <generic-voice>
depends on
‘voice-family’ ],]* [<specific-voice> | <generic-
user agent
voice> ] | inherit

<number> | <percentage> | silent | x-

‘volume’ soft | soft | medium | loud | x-loud | medium
inherit

normal | pre | nowrap | pre-wrap | pre-

‘white-space’ normal
line | inherit

‘widows’ <integer> | inherit 2

<length> | <percentage> | auto |

‘width’ auto
inherit

‘word-spacing’ normal | <length> | inherit normal

‘z-index’ auto | <integer> | inherit auto

Much of the information provided in this chapter has been sourced from w3.org,
specifically from this URL:
https://www.w3.org/TR/CSS21/propidx.html
Chapter 1.13 Responsiveness – A Complete Reference
To design the same website differently for mobiles, tablets and desktops, you need to
understand what the differentiating character between these devices are, as far as viewing
web pages are concerned. Obviously, the screen size. We will disregard height because all
three devices have the ability to scroll web pages. Hence the screen width of different
devices is our primary concern. Here are the screen width of some popular mobiles and
tablets:
Tablets:
Retina iPad
1536px(potrait) | 2048px (landscape)
iPad Mini
768px(potrait) | 1024px(landscape)
Typical Windows tablet
Typical Android tablet:
600px(potrait) | 1024px (landscape)
800px(potrait) | 1280px (landscape)
Mobiles:
iPhone 5:
640px(potrait) | 1136px(landscape)
Typical Android mobile:
320x(potrait) |480px(landscape)
480px(potrait) | 800px(landscape)
1280px(landscape) | 720px(potrait)
1080(potrait) | 1920(landscape)
Typical Windows Phone mobile
similar to Android mobiles
Desktops:
Mac or Windows 1200px or above
It is best that we isolate a standard width for mobiles, tablets and desktops and work with
those to make our webpages universally responsive. I will go with
Mobiles:
min-width:none max-width:599px
Tablets:
min-width:600px max-width:1024px
Desktops:
min-width:1025px max-width:none
We can further generalize this to:
Mobiles and smaller Tablets:
min-width:none max-width:699px
Larger tablets and Desktops:
min-width:700px max-width:none
In this book we are only going to be working with the generalized version, but from that
you will learn how to apply a third set of rules and set new styles for tablets only, that are
different from the layout presented in mobiles and desktops.
Responsive Design:
Before presenting the actual means of how to create responsive websites, let us look at
some wireframes of desktop websites to understand how we might want to move and
resize our content to look better on mobiles and tablets. Here is a common design upon
which many websites are based:
In tablets ith a screen size of more than 7 inches, this can remain pretty much the same,
but in mobiles and smaller tablets we surely want the sidebar to have a full width and the
content to come before the sidebar. Unfortunately, the usual way to write the desktop
HTML is to put the sidebar first and then the content, and float both to the left. But when
we transform the sidebar’s width to 100%, it remains before the content in HTML and
appears before the content in the browser. To solve this, we simply move the sidebar to
after the content area, and float both to the right. The result will look like this:
Usually the Navigation or <nav> element is contained within the header, the nav element
if any should also resize to width 100% when the screen size is less than 700px.
Let us consider another wireframe:
This is even simpler and presents no difficulties.
Here’s another:
In this case, it is quite impossible to present the content area first to mobile users without
getting rid of the left sidebar completely. It is advisable to keep the content of Sidebar 1
minimal and relevant, so the user is not disinterested and can quickly scroll past it to the
main content easily. The mobile version will look something like:
Let’s start coding! You can find the above wireframes converted to basic HTML in the
folder named ‘chapter-1.13’ in the download-able content.
The Viewport
First of all, to make a page responsive, we need to add a meta tag to our <head> element.
So, just before the <title> opening tag, add two line breaks and in the empty space put in:
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
The @media Query
It goes like this:
@media only screen and (min-width:700px) and (max-width:1024px) {
selector {
property: value;
}
}
OR
@media only screen and (min-width:700px) {
selector {
property: value;
}
}
OR
@media only screen and (max-width:699px) {
selector {
property: value;
}
}
Until now, I have defined arbitrary min-width and max-width. Remember, the individual
three pieces of code only apply when the browser width is within the range defined in
each.
As an example we can code,
@media only screen and (min-width:700px) {
/* all width properties of elements for desktop go here */
main {
width:75%;
}
aside {
width:25%;
}
}
@media only screen and (max-width:699px) {
/* all width properties of elements for mobile go here */
main {
width:100%;
}
aside {
width:100%;
height:250px;
}
}
Where the HTML code was,
<header>
<h1 align=“center”>Header</h1>
</header>
<main>
<h1 align=“center”>
Content Area
</h1>
</main>
<aside>
<h1 align=“center”>Sidebar</h1>
</aside>
<footer>
<h1 align=“center”>Footer</h1>
</footer>

Yes, this is the first wireframe converted partly to HTML. For the full code, open HTML
files ‘responsive1’, ‘responsive-2’ and ‘responsive-3’ in folder ‘chapter-1.13’ of the
download-able content in a text editor. Also open the HTML files in your desktop browser,
and resize the browser window to see the effects of the @media query.
Chapter 1.14 – Parallax using HTML and CSS only

Let us consider the following code:

<!DOCTYPE html>
<html lang=“en-US”>
<head>
<title>Hello parallax</title>
<style>
#banner {
height:300px;
color:white;
}
.rest {
background:white;
width:100%;
height:800px;
}
.encompass1 {
background-image:url(imp.jpg);
background-attachment:fixed;
background-size:cover;
}
</style>
</head>
<body>
<div class=“rest”>
hello and hi
</div>
<div id=“encompass1”>
<div class=“banner”>hello and wow</div>
</div>
<div class=“rest”>
and goodbye too
</div>
</body>
</html>
Basically, we are specifying a div with a background-image. In that div we are inserting
another div. This div has a transparent background. Then we add some blank content to
the top and bottom of the parent div so that the parallax effect is noticeable. Now both the
div #encompass1 that has the background image and the div .banner that is transparent
must have the same height, or the other divs or elements in the page must have a non-
transparent background, for example, white, otherwise the background image may show
through other transparent areas of the page. You can of course add multiple parallax
elements in a single page, like is shown in the ‘parallax-chapter1.14’ folder of the
download-able content.
Section 2 – Learning Through Projects
 Chapter 2.1 – Centering an 80% width page
Let us first create an HTML document with standard definitions, and an empty <body>
element. We will contain our entire page within a single <div> with an ID of “body”. So
let us put in some standard content into our page:
<body>
<div id=“body”>
<header><h1>Hello World</h1></header>
<main><p>Lorem ipsum….</p></main>
</div>
</body>
Now we want the entire #body element to have a width of 80% of the browser window. So
in CSS, we write:
#body {
display:block;
width:80%;
margin:0px auto;
border:2px solid black;
}
You can also try it out with width of 50% to 95%, to get the hang of it. Below I am
replacing the border with a background color to identify the #body region, and border-
radius to make it pretty.
#body {
display:block;
width:80%
margin:0px auto;
background:#77f;
height:1200px;
border-radius:15px;
}
Adding this code will make it responsive:
@media only screen and (max-width:699px) {
#body {
width:100%;
}
}
@media only screen and (min-width:700px) {
#body {
width:80%;
}
}
Of course if you choose to make it responsive you must remove the width:80%; code
outside the media queries. The finished responsive page is available in the chapter-2.1 of
the download-able content for your perusal.
Chapter 2.2 – Adding Images to the top of three columns
Let us retrieve our finished helloWorld page..also available in chapter-2.2’ folder of the
download-able content. Now we shall add another identical paragraph, and make three
columns out of the three paragraphs. Then we replace
div {
width:50%;
}
with:
div {
width:33.333%;
}
and we have three columns, each containing one <p> element. The finished file is called
helloWorld-3.html, located in the folder mentioned above. Now, copy and paste 3 JPG
files from the folder ‘images’ of the downloaded content into your orking directory. Let’s
say the names of these files are ‘img1.jpg’, ‘img2.jpg’, ‘img3.jpg’, or you can rename
them to be so.
Now, before each <p> tag in the Hello World HTML file, insert some line breaks and add:
<img src=”img1.jpg” /> in the first case,
<img src=”img2.jpg” /> in the second case, and
<img src=”img3.jpg” /> in the third case.
We are going to add wrap each image in a div element of class ‘img’. We are also going to
add a class ‘one-third’ to each of the three child divs of the div#body element.
In the <div> with an id of ‘body’, the code now looks like this but repeated thrice:
<div class=“one-third”>
<div class=“img”>
<img src=“img1.jpg” />
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
So our CSS code needs to be edited to:
h1 {
font-size: 40px;
background: orange;
margin:15px;
padding:10px;
text-align:center;
}
p{
font-size:20px;
background: pink;
margin:5px 15px;
padding:10px;
}
body {
background:black;
color:white;
}
p{
text-indent:25px; /* adds indentation before a paragraph */
line-height:25px; /* sets length between two lines */
letter-spacing:1px; /* sets distance between two letters */
color:black;}
div.one-third {
display:block;
width:33.3333%;
float:left;
overflow:hidden;
}
img {
width:100%;
height:auto;
}
div.img {
margin:5px 15px 15px 15px;
}
The finished file is called ‘finished.html’ and available in folder ‘chapter-2.2’ of the
download-able content attached with this book.
Chapter 2.3 – Changing Background Color – Gradients
Normal Background Color:
body {
background-color:#aaf;
}

Linear Gradients:
To change the background of <body> to a linear gradient, code:
body {
background:linear-gradient( to left top, blue, red);
}

Or it can be:
linear-gradient(45deg,blue,red); or
linear-gradient(to right, rgb(100,100,200),rgb(0,0,200)); or
linear-gradient(to left, #ff0000,#0000ff);
To know more about linear gradients, visit:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Radial Gradients:
These are usually not very useful. To know about them, visit:
http://www.w3schools.com/css/css3_gradients.asp
Chapter 2.4 – Changing Background Color to Transparent Color and
Images
In this chapter we shall learn how to set semi-transparent backgrounds to elements in
<body> and how to set a linear or radial gradient to <body> element.
First let us open the finished three-column Hello World page in your text editor. In the
CSS styles, previously we had coded:
p{
background: pink;
}
..we replace it with:
p{
background: rgba(255,255,255,0.5);
}
If we refresh our browser we find that the pink has been replaced by gray. Actually, the
color is a transparent white, but because of the uniform solid background color of <body>,
we see it as gray. So let’s change our body>’s background to an image, to appreciate the
transparent <p> elements. Copy any image file to your working folder and rename it
“img4.jpg”. Then in CSS, put in:
body {
background: url(img4.jpg);
}
Now we can clearly see the transparent background of <p>. However, we might add a
little more CSS to make the body’s background not repeat but remain static as the page is
svrolled. Add:
body {
background-attachment:fixed;
background-size:cover;
}
We may also want to add a border to each image defined in the previous chapter, like so:
img {
border:2px solid black;
}
Remember, ‘img’ affects the image element, while .img affects the divs with a class name
of ‘img’.
The finished page, called ‘finished.html’ is available in chapter-2.4 folder of the content
attached with this book.
Chapter 2.5 – Using @media Query to make Pages Responsive

In this chapter, we will be working with the finished HTML of Chapter 2.2. You can find
it as ‘starter.html’ located in ‘chapter-2.5’ folder of the downloadable content attached
with this book.
We will only make one break point in screen width for our responsive HTML page. That is
the 700px break-point. Any browser width of 700px or over will show the desktop site,
while a browser width of less than 700px will show the mobile-friendly version.
Let’s get started. In the style element, add:
@media only screen and (min-width:700px) {
div.one-third {
width:33.3333%;
}
}
@media only screen and (max-width:699px) {
div.one-third {
width:100%;
}
}
And finally remove the ‘width:33.3333%;’ style from the div.one-third selector’s styles
outside the media queries. So our final CSS styles will be:
h1 {
font-size: 40px;
background: orange;
margin:15px;
padding:10px;
text-align:center;
}
p{
font-size:20px;
background: pink;
margin:5px 15px;
padding:10px;
}
body {
background:black;
color:white;
}
p{
text-indent:25px; /* adds indentation before a paragraph */
line-height:25px; /* sets length between two lines */
letter-spacing:1px; /* sets distance between two letters */
color:black;}
div.one-third {
display:block;

float:left;
overflow:hidden;
}
img {
width:100%;
height:auto;

}
.img {
margin:5px 15px 15px 15px;
}
@media only screen and (min-width:700px) {
div.one-third {
width:33.3333%;
}
}
@media only screen and (max-width:699px) {
div.one-third {
width:100%;
}
}
You might want to redefine the margin properties of div.one-third when viewed on a
smaller screen. To do that, simply add ‘margin:20px 15px;’ to the div.one-third’s styles in
‘@media only screen and (max-width:699px)’, like this:
@media only screen and (max-width:699px) {
div.one-third {
width:100%;
margin:20px 15px;
}
}
Chapter 2.6 – Using @font-face to import Custom Fonts
Sometimes you may not be satisfied with the default fonts or the limited number of
additional fonts you can specify with the ‘font-family’ CSS property. There is a way to
specify the paths to a font file and make the browser load and display that font on the
whole page or on specific parts of the web page.
First, we use the @font-face method to indicate the source file of the font and assign a
name to the sourced font:
@font-face {
font-family: importedFont1;
src: url(path/to/font.ttf);
}
And then we set the page body’s font-family property to use that font:
body {
font-family: importedFont1;
}
Only TTF, OTF and WOFF font file formats are supported by most web browsers.
Open the ‘chapter-2.6’ folder of the downloadable content attached with this book. The
‘index.html’ file embeds an external font file from the same folder and applies it. You will
see a ‘fonts’ folder there. This contains a few open source(free to use) fonts that you might
want to try out on your sites. See http://www.w3schools.com/cssref/css3_pr_font-
face_rule.asp for more details.
Chapter 2.7 – Concept of Header
The <header> element is a crucial part of a web page. It is the first thing that users
see when they load a web page, and is instrumental in providing the general
outlook of the site. Usually, the header contains the company logo, some
navigation links and, sometimes, a search bar. For example, the header of the
bbc.com site:

And samsung.com:

And wordpress.org:

In this chapter, we will start another web page from scratch and this time create it
with all professional elements until we have a good professional-looking website.
Remember, this is only HTML and CSS, so we don’t have any control over how
individual controls will be processed. We just assume it will be done by someone
else, for now.
So let’s begin! Create an empty HTML web page with no styles and no content.
Now inside the <body> element, insert:

<header>
<div id=“logo”><img src=“logo.png” /></div>

<div id=“topsearch”>
<input type=“text” placeholder=“Search” />
<button><img src=“search.png” /></button>
</div>

<nav>
<ul>
<li><a href=“home.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“portfolio.html”>Our Work</a></li>
<li><a href=“contact.httml”>Contact Us</a></li>
</ul>
</nav>

</header>
<div style=“clear:both;width:100%;”></div>

Now, let us add the styles for the header and then we will analyze the code. Here’s
the stylesheet:
body {
margin:0px;
padding:0px;
}
#logo{
display:inline-block;
float:left;
}
#logo img {
border:2px solid black;
}
#topsearch, nav ul, nav {
display:block;
float:right;
}
nav ul li {
display:inline-block;
}
#topsearch {
margin:20px;
padding:0px;
}
#topsearch button img {
height:25px;
width:auto;
}
#topsearch input {
height:25px;
margin:3px;
}
#topsearch button {
cursor:pointer;
position:relative;
top:6px;
background:white;
border:2px solid black;
padding:0px;
}
nav {
clear:right;
}
header {
background:#afa;
display:block;
border-bottom:2px solid black;
overflow:hidden;
}
nav ul li a {
margin:10px 5px;
border-radius:10px;
font-size:30px;
text-decoration:none;
padding:5px 10px;
color:black;
transition:all 0.4s ease-out;
}
nav ul li a:hover {
background:black;
color:white;
}

The page now looks like:

Now let us analyze our code. The HTML part is fairly simple, we define the header
element and in it we put the logo, the search box and the navigation element. We group the
search button and the search box together in a div, so they may be positioned more easily.
Let us come to the navigation. We set both the image within the button element and the
search box to be 25px in height, so that they will be more aesthetically pleasing together.
We then add a bottom border to the header element and we add ‘overflow:hidden’ to the
header element. This is done because when an element is a parent of one or more
elements, and all the child elements are floated, either to the right or to the left, then the
height of the parent element becomes 0 pixels. There were many good reasons for doing
this, but moreover here we do not want that to happen. Adding a style ‘overflow:auto’ or
‘overflow:hidden’ to the parent element makes the parent element, in this case the header,
wrap around it’s content or child elements, even if the child elements are floated.
We then change the font-size and color of the nav ul li a, or the anchor elements within the
nav. It is preferrable to style the anchor elements directly instead of the <li> elements,
because some properties like color are set by default in <a> elements. And we want to
apply the :hover pseudo-class to change the styling properties of the nav ‘buttons’ to
resemble buttons rather than links. Hence you may find that if you style the li elements
first, you also have to come back and style the child anchor elements, which do not inherit
their parent element’s style but rather apply the default style for links(color:blue; text-
decoration:underline;).
We also set the background of the header to #aaffaa; which is a light green, to differentiate
it from the rest of the page.
There is usually no need to add responsiveness to the header as it is already more or less
responsive. Sometimes, the navigation is reduced to a dropdown on mobile versions, but
you need jQuery to do that.
The finished header HTML is available in the folder ‘chapter-2.7’ of the downloadable
content.
Chapter 2.8 – Concept of Sidebar
Now that we have created the header, let us continue to the sidebar, or the <aside>
element. Most modern day websites contain a header, footer and sidebar, apart from the
main content. To add a sidebar, we must also add the <main> element but we will keep it
empty for now because we are focusing on the sidebar in this chapter. In your HTML
code, after the header element, add:
<div style=“clear:both;width:100%;”></div>
<main>
</main>
<aside>
<h2>Categories</h2>
<ul>
<li><a href=”#”>Animals</a></li>
<li><a href=”#”>Birds</a></li>
<li><a href=”#”>Reptiles</a></li>
<li><a href=”#”>Dinosaurs</a></l>
</ul>
<h2>Tags</h2>
<ul>
<li><a href=”#”>horse</a></li>
<li><a href=”#”>giraffe</a></li>
<li><a href=”#”>jurassic</a></li>
<li><a href=”#”>sparrow</a></l>
</ul>
</aside>

and in CSS, add:

main, aside {
margin:0px;
padding:0px;
float:right;
box-sizing:border-box;
border:2px solid black;
}
main {
width:75%;
height:200px;
}
aside {
width:25%;
}
aside h2 {
font-size:30px;
}
aside {
text-align:center;
}
aside ul li a {
font-size:22px;
color:black;
text-decoration:none;
}
aside ul {
padding:0px;
}
aside ul li {
list-style-type:none;
display:inline-block;
padding:10px;
}
aside ul li a:hover {
color:red;
}
Fairly easy. We add the padding:0px to <ul> because sometimes the unordered list
anticipates a bullet list, or a nested list, and so adds padding to the left to make it look
professional. However, we are creating a category cloud and a tag cloud, so any
unnecessary left padding would be a hindrance. We also added a 200 pixel height to the
<main> element, so that it is shown. Our box-sizing:border-box; ensures that the borders
which we have created for aside and main do not exceed the boundaries of the element, for
in that case the single row alignment will be broken up, due to a combined width of more
than 100% for aside and main. Our site now looks like:

You can find the full HTMl code in the folder ‘chapter-2.8’ of the downloadable content.
Chapter 2.9 – Concept of Footer
Now let’s add our footer HTML at the bottom of the page, just before the </body>
tag. Of course, we will use our clearfix div to separate the footer from the rest of
the page:
<div style=“clear:both;width:100%;”></div>
<footer>
<div class=“one-third”>
<h3>Contact Us</h3>
<p>Email: davidhikaribooks@gmail.com</p>
<p>Phone: +1987654321</p>
<p>Address:</p><p> 23/10 Des Moines,</p>
<p>California - 112233</p>
</div>
<div class=“one-third”>
<a href=”#”>Facebook</a>
<a href=”#”>Google+</a>
<a href=”#”>Twitter</a>
<a href=”#”>Instagram</a>
</div>
<div class=“one-third”>
<p> Copyright Information with second logo</p>
</div>
Now to style the footer. As you can see, in this case we have made three divs in the footer
so as to take advantage of the full desktop screen size. Our CSS code will be:
footer {
background:black;
overflow:hidden;
color:white;
}
.one-third:nth-child(2n) {
text-align:center;

}
.one-third a{
font-size:23px;
color:white;
font-weight:bold;
display:block;
padding:7px;
}
footer .one-third {
width:33.3333%;
margin:0px;
padding:0px;
float:left;
}
Now our page looks like:

That’s it! You have now styled the header, footer and sidebar sections of your web page. In
the next chapter, we will proceed to insert information or content into our <main>
element, and style the content appropriately.
Chapter 2.10 – Building a professional webpage
Now to make our webpage responsive, good-looking and professional, we will add a
@media query, a parallax image header with some legend, and insert content into out
<main> element.
Let us first add a parallax area to our page. In HTML, after the closing </header> tag,
insert some line breaks and add:
<div style=“clear:both;width:100%;”></div>
<div id=“container”>
<div id=“parallax”>
<div class=“legend”>Travel and Tourism for all generations
<p>We provide Lorem ipsum dolor sit amet, so that lorem ipsum dolor sit amet</p></div>
</div>
</div>

and in CSS, add:

#container {
background:url(img4.jpg);
background-attachment:fixed;
background-size:cover;
overflow:hidden;
}
#parallax {
background:rgba(0,0,0,0);

height:300px;
}

#parallax .legend {
width:40%;
margin-top:40px;
padding:20px;
margin-left:18%;
float:left;
font-size:40px;
background:rgba(0,0,0,0.3);
color:white;
}
.legend p {
font-size:20px;
}
Refresh the page, and there we have our parallax element. Usually websites tend to
introduce themselves with something stylish and professional, like parallax or slideshows.
Next we make our parallax responsive by changing the width element of the text inside the
parallax with a media query:
@media only screen and (max-width:699px) {
#parallax .legend {
width:80%;
margin-left:auto;
margin-right:auto;
float:none;
}
}
And our parallax part is finished. Now, we insert our content into the <main> element. So
just after the <main> tag, insert a few like breaks and put in:

<h1 class=“heading1”>Title of the Page</h1>

<div class=“item”>
<img src=“img1.jpg” /><h1>Title of the Post</h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet.
</p>
</div>
<div class=“item”>
<img src=“img2.jpg” /><h1>Title of the Post</h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet.
</p>
</div>
<div class=“item”>
<img src=“img3.jpg” /><h1>Title of the Post</h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet.
</p>
</div>
<div class=“item”>
<img src=“img1.jpg” /><h1>Title of the Post</h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet.
</p>
</div>
<div class=“item”>
<img src=“img2.jpg” /><h1>Title of the Post</h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet.
</p>
</div>
<div id=“lowernav”>
<ul>
<li><a href=”#”>Previous</a></li>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>Next</a></li>
</ul>
</div>
<!—right after here, the closing </main> tag should exist in your code—>

And in our CSS, write:

#lowernav ul li {
list-style-type:none;
display:inline-block;
}
#lowernav ul {
float:right;
}
#lowernav ul li a {
padding:10px 15px;
font-size:20px;
background:#aaa;
color:black;
text-decoration:none;
transition:all 0.4s ease-out;
}
#lowernav ul li a:active {
position:relative;
top:2px;
left:2px;
}
#lowernav ul li a:hover {
background:#ccc;
}
@media only screen and (max-width:699px) {
#parallax .legend {
width:80%;
margin-left:auto;
margin-right:auto;
float:none;
}
aside, main {
width:100%;
}
.item img {
width:100%;
}
#logo {
width:80%;
margin:0px auto;
float:none;
}
#logo img {
width:100%;
}
}
@media only screen and (min-width:700px) {
.item img {
width:30%;
}
}
.item {
background:white;
border-bottom:2px solid black;
border-top:2px solid black;
border-left:2px solid black;
border-right:2px solid black;
overflow:hidden;
padding:5px;
}
.item img {

border:1px solid black;

height:auto;
margin:0px 10px;
}
.item img {
float:left;
}
.item h1 {
text-align:center;
}

As you can see, I’ve already inserted the @media queries that are needed to make the
main and aside elements responsive and also make the images present in our main content
responsive. The finished page is available in ‘chapter-2.10-2’ folder of the downloadable
content. Usually there is a ‘heading’ of an individual page present, and this can be
something like, “Showing posts in Category ‘birds’” or ‘Showing search results for…’ and
so we have added a heading 1 element to our main content simply as ‘Title of the Page’.
However, all is not finished. You can choose to remove the borders completely, but I
decided to edit the borders a bit to look more aesthetically pleasing. Also, I needed to style
the lower pagination to look like buttons. Here’s the additional CSS:

aside {
border-top:2px solid black;
width:25%;
}
.heading1 {
border-top:2px solid black;
text-align:center;
border-left:2px solid black;
border-right:2px solid black;
margin:0px;
padding:10px;
}
#lowernav ul li {
list-style-type:none;
display:inline-block;
}
#lowernav ul {
float:right;
}
#lowernav ul li a {
padding:10px 15px;
font-size:20px;
background:#aaa;
color:black;
text-decoration:none;
transition:all 0.4s ease-out;
}
#lowernav ul li a:active {
position:relative;
top:2px;
left:2px;

}
#lowernav ul li a:hover {
background:#ccc;
}

Our finished site looks like:

Chapter 2.11 – Embedding YouTube Videos
Embedding YouTube videos into your site is a good way of enriching your existing
content – users can watch it while still staying on your website. To embed a YouTube
video, you have to add some HTML code to your site at the location where you want to
have the video shown. The HTML code to be added is similar to:
<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/1qKQDXVQdkw” frameborder=“0”
allowfullscreen></iframe>
Where the src attribute of the iframe element indicates the source of the embedded video.
On the other hand, a standard YouTube video’s URL looks like this:
https://www.youtube.com/watch?v=1qKQDXVQdkw
You can see that the text ‘1qKQDXVQdkw’ is common among both the URL and the src
value. It may be called the unique identifier of a video on the site.
Now, mainly we want to retrieve the <iframe> code shown above. To do this, isit the
YouTube video on youtube.com on a desktop, and click share:

Then, in the menu that pops up, click ‘Embed’, like so:
And now you can copy the code from the text box that shows up, and paste it directly into
the HTML file of your website. Let’s look at the <iframe> sourced from YouTube again:
<iframe width=“560” height=“315” src=“https://www.youtube.com/embed/1qKQDXVQdkw” frameborder=“0”
allowfullscreen></iframe>
Here, you can change the attributes height and width of the iframe to be what suits your
needs, for example,
<iframe width=“640” height=“480” src=“https://www.youtube.com/embed/1qKQDXVQdkw” frameborder=“0”
allowfullscreen></iframe>
You can also remove the ‘allowfullscreen’ attribute if you do not want to allow the video
to play in full screen in your site.
Section 3 – Advanced Projects
 Chapter 3.1 – PSD to HTML

Congratulations! If you have read this book upto here, you should have a fairly
good grasp of HTML and CSS. So what good is the knowledge in real life? Well,
unlike what we learned in high school, this isn’t only helpful for teaching our
kids. If you can demonstrate your skill, you might be able to land a job in the
Information Technology industry. But before that we must ask, what niches in the
job market can you actually fulfill with a skill set of just HTML and CSS? The
answer is PSD to HTML. PSD is the Adobe Photoshop format for saving images.
It can store information about layers and stuff that are helpful in editing the image
with Photoshop. Basically, a business owner first approaches a web designer who
makes a photo mockup of the website. When the employer approves, the mockup
lands on the hands of a web developer, which is you. Usually, a web developer
needs to know HTML, CSS, Javascript, jQuery and PHP to be able to tackle
advanced sites. But oftentimes, employers are looking to get it done by different
persons, for example, the design by person A, the conversion to HTML by person
B, adding logic and Javascript by person C, and adding server-side programming
by person D. At this moment, you can quite comfortably fit in as person B So
your primary work will be PSD to HTML.
PSD under the General Public License are really hard to find, but finding free-to-
use-commercially PSDs to experiment with is much easier. Simply search ‘free
web templates psd’ in Google to get a few PSDs for experimenting purpose. To
open PSDs, you need Adobe Photoshop.
If you do not have Photoshop, you need to first convert the .psd files to .jpg or
.png. This can be done by several free software, simply search ‘psd to jpg
software download windows/mac/linux’ depending on whether you use Windows,
a Mac, or Linux. Then you need any image editor that can crop images and save
them as separate files. This process is called ‘Image slicing’. You will need them
to extract logos or other graphical content from the image file that you cannot
duplicate using CSS.
In the ‘templates’ folder of the downloadable content, you will find three image
files that can help you get started. Simply open them up in Photoshop or an image
editor and crop out the logos or any irreplaceable content, then code separate
HTML files in which you try and duplicate their individual looks and feel. This
will make you seasoned in HTML and CSS, and even give you some portfolio to
start out with. The finished files(courtesy of html5up.net) are found in the
‘psd2html’ folder of the downloadable content.
 Chapter 3.2 – Career Advice
If you feel confident about your code and want to start charging for it immediately, I
recommend that you become a freelancer in either of these sites:
http://www.freelancer.com
http://www.upwork.com
There you can find plenty of paid projects being posted, projects that you can complete. I
recommend Upwork, because one doesn’t have to pay to take their proficiency tests.
Completing the tests is vital for landing a project. I also advise you to go for the fixed
priced projects initially because if you choose an hourly project it may take you too much
time to complete, resulting in client dissatisfaction. Good luck!
Section 4 – Miscellaneous
 Chapter 4.1 – What’s next?
Now that you have mastered HTML and CSS, it is time for you to take a short
break and relax a bit. You are officially a web developer. But there are still ways
to go. A full-stack web developer works with:
1. HTML and CSS for the structure and layout
2. JavaScript and jQuery for Logic and advanced elements like slideshows,
AJAX,etc.
3. PHP or ASP which are server-side languages. PHP is open source and used in
Facebook. ASP is by Microsoft and used in w3schools and StackOverflow, the
biggest online resource for programmers.
The next logical step for you is to learn JavaScript and jQuery. After that you can
learn how to work with server-side language(s).