INDEX

HTML
 Introduction to HTML
 HTML Editors
 Core HTML Attributes
 HTML -Header
 HTML Formatting
 HTML-Comments
 HTML Phrase Tag
 HTML Paragraph Tags
 HTML Heading
 HTML Image
 HTML Image Maps
 HTML Tables
 HTML-Frames
 HTML Lists
 HTML Form
 HTML Input Types
 HTML Input Attributes

CSS
1. Introduction to CSS
2. CSS Syntax
3. CSS Selectors
4. CSS Color
5. CSS Background
6. CSS Fonts
7. CSS Text
8. CSS Links
9. CSS Lists
10. CSS Tables
11. CSS Box Model
12. CSS Dimension
13. CSS Padding
 Introduction To HTML

HTML stands for Hyper Text Markup Language, which is the most widely
used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991
but "HTML 2.0" was the first standard HTML specification which was published in 1995.

It is used to design web pages using the markup language. HTML is the combination
of Hypertext and Markup language. Hypertext defines the link between the web pages and
markup language defines the text document within t he tag that define the structure of web
pages.

The major points of HTML are given below:

 HTML stands for Hyper Text Markup Language.

 HTML is used to create web pages and web applications.
 HTML is widely used language on the web.
 We can create a static website by HTML only.
 Technically, HTML is a Markup language rather than a programming language.

Tags vs Attributes in HTML(Building blocks of HTML) HTML Tags:

Tags are the starting and ending parts of an HTML element. They begin with <
symbol and end with > symbol. Whatever written inside < and > are called tags.

Tags are divided into three groups:

1. Document structure

2. Block

3. inline

HTML Attributes: It is used to define the character of an HTML element. It always placed in
the opening tag of an element. It generally provides additional styling (attribute) to the element.
HTML Basic Format Page Structure The basic structure of an HTML page is laid out below.
It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title,
and body elements) upon which all web pages are created.

Characteristics of HTML:

 Easy to understand
 Flexibility
 Linkable
 Limitless features
 Support
  Not a Programming Language
 Language Support.
Advantages of HTML:

 HTML is easy to learn, easy to apply and it’s totally free you will just need a text editor
and a browser.
 HTML is supported by all the browsers and it is the most friendly search engine.
 HTML can easily integrate with other languages and is easy to develop.
 It is the basic of all programming languages and the lightest language ever.
 In HTML, the display changes frequently depending on the window size or the device
size making it comfortable to read by the user.
Disadvantages of HTML:

 HTML can be used to create only static Web-page, it cannot create dynamic web-page.
 There is a lack of security in HTML.
 Creating a simple Web-page required so many tags.
 HTML language is not centralized i.e. all the web pages that are connected, you have
to design them separately else need to use CSS.
 HTML becomes complex when you try to create a huge website.
HTML Editors

HTML text editors are used to create and modify web pages. HTML codes can be
written in any text editors including the notepad. One just needs to write HTML in any text
editor and save the file with an extension “.html” or “.htm”. Some of the popular HTML text
editors are given below:

 Notepad
 Notepad++
 Sublime Text 3
 Atom
Notepad: Notepad is a simple text editor. It is an inbuilt desktop application available in
Windows OS.

Brackets: Brackets is an open-source software primarily used for Web development. It

provides live HTML, CSS, JavaScript editing functionality.

Atom: Atom is an open source code editor tool for MAC, Linux and Windows.

Steps to write HTML code in Editor:

 Open any of the text editors of your choice. Here we are using the notepad text editor.

 Create new file: File->New File or Ctrl+N.

 Write HTML code in text editor.
 Save the file with a suitable name of your choice and .html extension.
 Open the saved HTML file in your favourite browser (double click on the file, or right-
click – and choose “Open with”).

Core HTML Attributes

The four core attributes that can be used on the majority of HTML elements (although
not all) are

 Id

 Title

 Class

 Style

The Id Attribute: The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page. There are two primary reasons that you might want to use an
id attribute on an element

If an element carries an id attribute as a unique identifier, it is possible to identify just

that element and its content.
 If you have two elements of the same name within a Web page (or style sheet), you can
use the id attribute to distinguish between elements that have the same name.

The title Attribute: The title attribute gives a suggested title for the element. They syntax for
the title attribute is similar as explained for id attribute − The behavior of this attribute will
depend upon the element that carries it, although it is often displayed as a tooltip when cursor
comes over the element or while the element is loading.

The class Attribute: The class attribute is used to associate an element with a style sheet, and
specifies the class of element. You will learn more about the use of the class attribute when
you will learn Cascading Style Sheet (CSS).

The style Attribute: The style attribute allows you to specify Cascading Style Sheet (CSS)
rules within the element.

HTML – Header

We have learnt that a typical HTML document will have following structure

The HTML <title> Tag

The HTML <title> tag is used for specifying the title of the HTML document. Following is
an example to give a title to an HTML document –
<!DOCTYPE html>
<html>

<head>
<title>HTML Title Tag Example</title>
</head>

<body>
The HTML <meta> Tag
<p>Hello, World!</p>
The HTML tag is used to provide metadata about the HTML document which includes
</body>
information about page expiry, page author, list of keywords, page description etc.

</html>
The HTML <base>Tag

The HTML<base> tag is used for specifying the base URL for all relative URLs in a page,
which means all the other URLs will be concatenated into base URL while locating for the
given item.

The HTML<link> Tag

The HTML <link>tag is used to specify relationships between the current document and
external resource.

The HTML <style>Tag

The HTML <style>Tag is used to specify style sheet for the current HTML document.
The HTML <script>Tag

The HTML <script>Tag is used to include either external script file or to define internal script
for the HTML Document.

HTML Formatting

If you use a word processor, you must be familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to indicate how text
can appear in HTML and XHTML.

Bold Text: Anything that appears within ... element, is displayed in bold as shown below
Italic Text: Anything that appears within<i>...</i>element is displayed in italicized as shown
below.

Underlined Text: Anything that appears within<u> ...</u> element, is displayed with
underline as shown below.

Example:

Strike Text: Anything that appears within <strike>…</strike> element is displayed with
strikethrough, which is a thin line through the text as shown below.
Superscript Text: The content of a ^… element is written in superscript; the font
size used is the same size as the characters surrounding it but is displayed half a character's
height above the other characters.

HTML - Comments

Comment is a piece of code which is ignored by any web browser. It is a good practice
to add comments into your HTML code, especially in complex documents, to indicate sections
of a document, and any other notes to anyone looking at the code. Comments help you and
others understand your code and increases code readability.

HTML comments are placed in between<!--…--> tags. So, any content placed with-in
tags will be treated as comment and will be completely ignored by the browser.

Valid vs Invalid Comments: Comments do not nest which means a comment cannot be put
inside another comment. Second the double-dash sequence "--" may not appear inside a
comment except as part of the closing - -> tag. You must also make sure that there are no spaces
in the start-of comment string.

Multiline Comments: So far we have seen single line comments, but HTML supports multi-
line comments as well. You can comment multiple lines by the special beginning tag placed
before the first line and end of the last line.

Conditional Comments: Conditional comments only work in Internet Explorer (IE) on

Windows but they are ignored by other browsers. They are supported from Explorer 5 onwards,
and you can use them to give conditional instructions to different versions of IE.

Using Comment Tag: There are few browsers that support<comment> tag to comment a part
of HTML code.

Commenting Script Code: Though you will learn JavaScript with HTML, in a separate
tutorial, but here you must make a note that if you are using Java Script or VB Script in your
HTML code then it is recommended to put that script code inside proper HTML comments so
that old browsers can work properly.

Commenting Style Sheets: if you are using Cascading Style Sheet (CSS) in your HTML code
then it is recommended to put that style sheet code inside proper HTML comments so that old
browsers can work properly.

HTML Phrase tag

The HTML phrase tags are special purpose tags, which defines the structural meaning
of a block of text or semantics of text. i.e. Logical tags are used to tell the browser what kind
of text is written inside the tags.

Some cases when we could use logical tags are:

 When we want to write code on our website.

 When we want to Emphasize some text.

 When we want to display the abbreviation on the Web page.

  When we want to display some famous quotation on our web page.

 When we want to write some mathematical formula in terms of variables.

Following is the list of phrase tags, some of which we have already discussed in HTML
formatting.

Abbreviation tag:<abbr>

Acronym tag:<acronym> (not supported in HTML5)

Marked tag:<mark>

Strong tag:<strong>

Emphasized tag :<em>

Definition tag:<dfn>

Quoting tag:<blockquote>

Short quote tag :<q>

Code tag:<code>
Keyboard tag:<kbd>
Address tag:<address>

HTML Paragraphs Tags

In this article, we will know the HTML Paragraph, & its basic implementation through
the examples. The <p> tag in HTML defines a paragraph. These have both opening and closing
tags. So anything mentioned within <p> and </p> is treated as a paragraph. Most browsers
read a line as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise
unexpected results. So, it is a good convention, and we must use the closing tag.
Syntax: <p> Content </p>

EX: In this example, we are using the<p> tag that is used for paragraphs in HTML.
<DOCTYPE html>
<html>
<body>
<h2> welcome to hello</h2>
<!--use of<p>tag-->
<p> A computer science portal for geeks.</p>
</body>
</html>
Output:

Key Points: When we look at the webpage, we see that there are few spaces added before and
after a paragraph. HTML does this by default. Let’s look at a few properties of the paragraph
tag:  As already mentioned, the <p>tag automatically adds space before and after any
paragraph, which is basically margins added by the browser.
 If a user adds multiple spaces, the browser reduces them to a single space.
 If a user adds multiple lines, the browser reduces them to a single line.
 By default, the display of the Paragraph element is set to “block” which you can change
using CSS. This means that if you add another paragraph to the webpage the next paragraph
will be inserted in the next line on the webpage.

HTML Heading

A HTML heading or HTML h tag can be defined as a title or a subtitle which you
want to display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends
on the number of heading.
 There are six different HTML headings which are defined with the <h1>to <h6> tags,
from highest level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important
heading and h6 is used for least important.

Headings in HTML helps the search engine to understand and index the structure of web page.

See this example:

1. <h1>Heading no. 1</h1>

2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>
Output:

HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element. Let's see an
example of HTML image.

1. <h2> HTML Image Example</h2>

2. <img src=”good_morning.jpg” alt=”Good morning Friends”/>
Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag
are given below.

1) Src: It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server. The location of image may be on the same
directory or another server.

2) alt: The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describes the image in words. The alt attribute is considered good for
SEO prospective.

3) width: It is an optional attribute which is used to specify the width to display the image. It
is not recommended now. You should apply CSS in place of width attribute.

4) height: It h3 the height of the image. The HTML height attribute also supports iframe,
image and object elements. It is not recommended now. You should apply CSS in place of
height attribute.

Use of height and width attribute with img tag

You have learnt about how to insert an image in your web page, now if we want to give
some height and width to display image according to our requirement, then we can set it with
height and width attributes of image.

Set Image Border

 By default, image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

Set Image Alignment

By default, image will align at the left side of the page, but you can use align attribute to set it
in the centre or right.

HTML Image Maps

Image Maps

What is image mapping : The HTML <map> tag defines an image map. An image map is an
image with clickable areas.
The areas are defined with one or more <area> tags. In image mapping an image is specified
with certain set of coordinates inside the image which act as hyperlink areas to different
destinations. It is different from an image link since in image linking, an image can be used to
serve a single link or destination whereas in a mapped image, different coordinates of the image
can serve different links or destinations.

Elements required in Mapping an Image:

There are three basic html elements which are required for creating a mapped image.

1. Map: It is used to create a map of the image with clickable areas.

2. Image: It is used for the image source on which mapping is done.

3. Area: It is used within the map for defining clickable areas.

The Image

The image is inserted using the <img>tag. The only difference from other images is that you
must add a use map attribute:

<img src=”workplace.jpg” alt=“workplace” use map=”#work map”>

The use map value starts with a hash tag # followed by the name of the image map, and is used
to create a relationship between the image and the image map.

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area>element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

 rect - defines a rectangular region

 circle - defines a circular region

 poly - defines a polygonal region

 default - defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the <area>element to execute a JavaScript function:

HTML - Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells. The elements under<td> are regular and left
aligned by default.
Here, the border is an attribute of <table>tag and it is used to put a border across all the cells.
If you do not need a border, then you can use border = "0".

Table Heading

Table heading can be defined using <th>tag. This tag will be put to replace <td>tag, which is
used to represent actual data cell. Normally you will put your top row as table heading as
shown below, otherwise you can use <th>element in any row. Headings, which are defined
in<th> tag are centered and bold by default.
Cellpadding and Cells pacing Attributes

There are two attributes called cellpadding and cell spacing which you will use to adjust the
white space in your table cells. The cell spacing attribute defines space between table cells,
while cellpadding represents the distance between cell borders and the content within a cell.
Tables Backgrounds

You can set table background using one of the following two ways –

 bg color attribute − You can set background color for whole table or just for one cell.

 background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using border color attribute.

HTML - Frames

HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window is
known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.

Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages–

 Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
 Sometimes your page will be displayed differently on different computers due to
different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.
Creating Frames

To use frames on a page we use<frameset> tag instead of<body>tag. The <frameset>tag

defines, how to divide the window into frames. The rows attribute of<frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by
<frame>tag and it defines which HTML document shall open into the frame.

Example
Following is the example to create three horizontal frames

HTML Lists

In this article, we will know the HTML List, along with understanding its types, and
various ways to implement them, through the example. A list is a record of short pieces of
related information or used to display the data or any information on web pages in the ordered
or unordered form. For instance, to purchase the items, we need to prepare a list that can either
be ordered or unordered list which helps us to organize the data & easy to find the item. Please
refer to the HTML <li> type Attribute article for the various types of attributes that can be used
with the ordered & unordered list.
HTML Ordered List: An ordered list starts with the “ol” tag. Each list item starts with the
“li” tag. The list items are marked with numbers by default.
HTML ordered list has various list item markers:
The type attribute of the tag defines the type of the list item marker.
HTML Description List: A description list is a list of terms, with a description of each term.

HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form
facilitates the user to enter data that is to be sent to the server for processing such as name,
email address, password, phone number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such
as shipping address and credit/debit card details so that item can be sent to the given address.

HTML Input Types

This chapter describes the different types for the HTML <input> element.
HTML Input Types
Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
  <input type="url">
 <input type="week">

Input Type Text

<input type="text"> defines a single-line text input field:

Input Type Password

<input type="password"> defines a password field:

Input Type Date
The <input type="date"> is used for input fields that should contain a date. Depending on
browser support, a date picker can show up in the input field.

HTML Input Attributes

This chapter describes the different attributes for the HTML<input> element.
There will be a different type of Attributes
The value Attribute
The read only Attribute
The disabled Attribute
The size Attribute
The max length Attribute
The min and max Attributes
The multiple Attribute
The pattern Attribute
The placeholder Attribute
The required Attribute
The step Attribute
The autofocus Attribute
The height and width Attributes
The list Attribute
The autocomplete Attribute
The input value attribute specifies an initial value for an input field:

The value of a read-only input field will be sent when submitting the form!

The value of a disabled input field will not be sent when submitting the form!
 Introduction to CSS

CSS is the key presentational technology that is used in website design.

CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for
describing the presentation (i.e. the layout and formatting) of the web pages.

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained
within the HTML markup (specifically inside the HTML tags); all the font colors, background
styles, element alignments, borders and sizes had to be explicitly described within the HTML.

As a result, development of the large websites became a long and expensive process, since the
style information were repeatedly added to every single page of the website.

To solve this problem CSS was introduced in 1996 by the World Wide Web Consortium
(W3C), which also maintains its standard. CSS was designed to enable the separation of
presentation and content. Now web designers can move the formatting information of the web
pages to a separate style sheet which results in considerably simpler HTML markup, and better
maintainability.
 CSS3 is the latest version of the CSS specification. CSS3 adds several new styling features
and improvements to enhance the web presentation capabilities.

What You Can Do with CSS

There are lot more things you can do with CSS.

 You can easily apply same style rules on multiple elements.

 You can control the presentation of multiple pages of a website with a single style sheet.

 You can present the same page differently on different devices.

 You can style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise.

 You can change the position of an element on a web page without changing the markup.

Advantages of Using CSS

 CSS Save Lots of Time
 Easy Maintenance
 Pages Load Faster
 Superior Styles to HTML
 Multiple Device Compatibility

Getting Started with CSS

In this tutorial you'll learn how easy it is to add style and formatting information to the
web pages using CSS. But, before we begin, make sure that you have some working knowledge
of HTML.

Including CSS in HTML Documents

CSS can either be attached as a separate document or embedded in the HTML document itself.
There are three methods of including CSS in an HTML document:

 Inline styles — Using the style attribute in the HTML start tag.

 Embedded styles — Using the<style>element in the head section of a document.

 External style sheets — Using the <link>element, pointing to an external CSS file.

Embedded Style Sheets

Embedded or internal style sheets only affect the document they are embedded in.

Embedded style sheets are defined in the <head> section of an HTML document using
the <style> element. You can define any number of <style>elements in an HTML document
but they must appear between the <head>and</head>tags.

CSS Syntax
A CSS stylesheet consists of a set of rules that are interpreted by the web browser and
then applied to the corresponding elements such as paragraphs, headings, etc. in the document.

A CSS rule have two main parts, a selector and one or more declarations:

The selector specifies which element or elements in the HTML page the CSS rule applies to.

Whereas, the declarations within the block determines how the elements are formatted on a
webpage. Each declaration consists of a property and a value separated by a colon (:) and
ending with a semicolon (i), and the declaration groups are surrounded by curly braces{}.

Writing Comments in CSS

Comments are usually added with the purpose of making the source code easier to understand.
It may help other developer (or you in the future when you edit the source code) to understand
what you were trying to do with the CSS. Comments are significant to programmers but
ignored by browsers.
A CSS comment begins with /*, and ends with */.

CSS Selectors

What is Selector?
A CSS selector is a pattern to match the elements on a web page. The style rules associated
with that selector will be applied to the elements that match the selector pattern.

Selectors are one of the most important aspects of CSS as they allow you to target specific
elements on your web page in various ways so that they can be styled.

Several types of selectors are available in CSS, let's take a closer look at them:

 Universal Selector
 Element Type Selectors
 Id Selectors
 Class Selectors
 Descendant Selectors
 Child Selectors
 Adjacent Sibling Selectors
 General Sibling Selectors
 Grouping Selectors

CSS Color

Setting Color Property

The color property defines the text color (foreground color in general) of an element.
For instance, the color property specified in the body selector defines the default text color for
the whole page.

Defining Color Values

Colors in CSS most often specified in the following formats:

a color keyword - like "red", "green", "blue", "transparent", etc.

a HEX value - like "#ff0000", "#00ff00", etc.

an RGB value - like "rgb(255, 0, 0)".

For now, let's stick to the basic methods of defining the color values:

 Color Keywords

 HEX Color Values

 RGB Color Values

CSS Background

Setting Background Properties

Background plays an important role in the visual presentation of a web page.

CSS provide several properties for styling the background of an element, including coloring
the background, placing images in the background and managing their positioning, etc.

The background properties are background-color, background-image, background-repeat,

background-attachment and background-position.

Background Color

The background-color property is used to set the background color of an element.

Background Image

The background-image property set an image as a background of an HTML element.

Background Repeat

The background-repeat property allows you to control how a background image is repeated or
tiled in the background of an element. You can set a background image to repeat vertically (y-
axis), horizontally (x-axis), in both directions, or in neither direction.

Background Position

The background-position property is used to control the position of the background image.

Background Attachment

The background attachment property determines whether the background image is fixed with
regard to the viewport or scrolls along with the containing block.

The Background Shorthand Property

The background property is a shorthand property for setting all the individual background
properties,i.e., background-color, background-image, background-repeat, background-
attachment and the background-position property at once.

CSS Fonts
Choosing the right font and style is very crucial for the readability of text on a page.

CSS provide several properties for styling the font of the text, including changing their face,
controlling their size and boldness, managing variant, and so on.

The font properties are: font-family, font-style, font-weight, font-size and font-variant.

Font Family

The font-family property is used to specify the font to be used to render the text.
This property can hold several comma-separated font names as a fallback system, so that if the
first font is not available on the user's system, browser tries to use the second one, and so on.

Difference Between Serif and Sans-serif Fonts

Serif fonts have small line or stroke at the extremities of characters, whereas sans-serif fonts
are straighter and do not have these small strokes. See the following illustration.

Font Style
The font-style property is used to set the font face style for the text content of an element.

The font style can be normal, italic or oblique. The default value is normal.

Font Size

The font-size property is used to set the size of font for the text content of an element.

There are several ways to specify the font size values e.g. with keywords, percentage, pixels,
ems, etc.

Setting Font Size with Pixels

Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when you need the
pixel accuracy. Pixel is an absolute unit of measurement which specifies a fixed length.

Setting Font Size with EM

The em unit refers to the font size of the parent element. When defining the font-size
property, lem is equal to the size of the font that applies to the parent of the element.
So ,if you set a font-size of 20px on the body element then lem=20px and2em=40px.

Font Weight

The font-weight property specifies the weight or boldness of the font.

Font Variant

The font-variant property allows the text to be displayed in a special small-caps variation.

CSS Text

Formatting Text with CSS

CSS provides several properties that allows you to define various text styles such as color,
alignment, spacing, decoration, transformation, etc. very easily and effectively.

The commonly used text properties are: text-align, text-decoration, text-transform, text-indent,
line-height, letter-spacing, word-spacing, and more. These properties give you precise control
over the visual appearance of the characters, words, spaces and so on.

Text Color
The color of the text is defined by the CSS color property.

The style rule in the following example will define the default text color for the page.

Text Alignment

The text-align property is used to set the horizontal alignment of the text.

Text can be aligned in four ways: to the left, right, centre or justified (straight left and right
margins).

Text Decoration

The text-decoration property is used to set or remove decorations from text.

Removing the Default Underline from Links

The text-decoration property is extensively used to remove the default underline from
the HTML hyperlinks.

Text Transformation

The text-transform property is used to set the cases for a text.

Text are often written in mixed case. However, in certain situations you may want to display
your text in entirely different case.

Text Indentation

The text-indent property is used to set the indentation of the first line of text within a block of
text. It is typically done by inserting the empty space before the first line of text.

The size of the indentation can be specified using percentage (%), length values in pixels, ems,
etc.

Letter Spacing

The letter-spacing property is used to set extra spacing between the characters of text.

This property can take a length value in pixels, ems, etc. It may also accept negative values.
When setting letter spacing, a length value indicates spacing in addition to the default inter-
character space.

Word Spacing

The word-spacing property is used to specify additional spacing between the words.

This property can accept a length value in pixels, ems, etc. Negative values are also allowed.

Line Height

The line-height property is used to set the height of the text line.
 It is also called leading and commonly used to set the distance between lines of text.

The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc.

CSS Links

Styling Links with CSS

Links or hyperlinks are an essential part of a website. It allows visitors to navigate through the
site. Therefore styling the links properly is an important aspect of building a user-friendly
website.

See the tutorial on HTML links to learn more about links and how to create them.

A link has four different states—link, visited, active and hover. These four states of a link can
be styled differently through using the following anchor pseudo-class selectors.

 a:link — define styles for normal or unvisited links.

 a:visited — define styles for links that the user has already visited.

 a:hover — define styles for a link when the user place the mouse pointer over it.

 a:active — define styles for links when they are being clicked.

Modifying Standard Link Styles

In all major web browsers such as Chrome, Firefox, Safari, etc. links on the web pages have
underlines and uses the browser's default link colors, if you do not set the styles exclusively
for them.

By default, text links will appear as follow in most of the browsers:

 An unvisited link as underlined blue text.

 A visited link as underlined purple text.

 An active link as underlined red text.

 Setting Custom Color of Links

Simply use the CSS color property to define the color of your choice for different state of a
link. But when choosing colors make sure that user can clearly differentiate between normal
text and links.

Removing the Default Underline from Links

If you don't like the default underline on links, you can simply use the CSS text-
decoration property to get rid of it. Alternatively, you can apply other styling on links like
background color, bottom border, bold font, etc. to make it stand out from the normal text a
little better.

Making Text Links Look Like Buttons

You can also make your ordinary text links look like button using CSS. To do this we need to
utilize few more CSS properties such as background-color, border, display, padding, etc. You
will learn about these properties in detail in upcoming chapters.

CSS Lists

Types of HTML Lists

There are three different types of list in HTML:

 Unordered lists — A list of items, where every list items are marked with bullets.

 Ordered lists — A list of items, where each list items are marked with numbers.

 Definition list — A list of items, with a description of each item.

Styling Lists with CSS

CSS provides the several properties for styling and formatting the most commonly used
unordered and ordered lists. These CSS list properties typically allow you to:

 Control the shape or appearance of the marker.

 Specify an image for the marker rather than a bullet point or number.

 Set the distance between a marker and the text in the list.

 Specify whether the marker would appear inside or outside of the box containing the list items.

Changing the Marker Type of Lists

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on),
whereas in an unordered list, items are marked with round bullets (•).

But, you can change this default list marker type to any other type such as roman numerals,
latin letters, circle, square, and so on using the list-style-type property.

Changing the Position of List Markers

By default, markers of each list items are positioned outside of their display boxes.

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property.

The style rule in the following example assigns a transparent PNG image "arrow.png" as the
list marker for all the items in the unordered list.

Setting All List Properties At Once

The list-style property is a shorthand property for defining all the three properties list-style-
type, list-style-image, and list-style-position of a list in one place.

The following style rule sets all the list properties in a single declaration.

Creating Navigation Menus Using Lists

HTML lists are frequently used to create horizontal navigation bar or menu that typically
appear at the top of a website. But since the list items are block elements, so to display them
inline we need to use the CSS display property.
 CSS Tables

Styling Tables with CSS

Tables are typically used to display tabular data, such as financial reports.

But when you create an HTML table without any styles or attributes, browsers display them
without any border. With CSS you can greatly improve the appearance your tables.

CSS provides several properties that allow you to control the layout and presentation of the
table elements. In the following section you will see how to use CSS to create elegant and
consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table>, <th>, and <td> elements.

Collapsing Table Borders

There are two distinct models for setting borders on table cells in CSS: separate and collapse.

In the separate border model, which is the default, each table cell has its own distinct borders,
whereas in the collapsed border model, adjacent table cells share a common border. You can
set the border model for an HTML table by using the CSS border-collapse property.

Adjusting Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in the cells.

Controlling the Table Layout

A table expands and contracts to accommodate the data contained inside it. This is the default
behavior. As data fills inside the table, it continues to expand as long as there is space.
Sometimes, however, it is necessary to set a fixed width for the table in order to manage the
layout.
 You can do this with the help of CSS table-layout property. This property defines the algorithm
to be used to layout the table cells, rows, and columns. This property takes one of two values:

 auto — Uses an automatic table layout algorithm. With this algorithm, the widths of the table
and its cells are adjusted to fit the content. This is the default value.

 fixed — Uses the fixed table layout algorithm. With this algorithm, the horizontal layout of
the table does not depend on the contents of the cells; it only depends on the table's width, the
width of the columns, and borders or cell spacing. It is normally faster than auto.

Aligning the Text Inside Table Cells

You can align text content inside the table cells either horizontally or vertically.

Horizontal Alignment of Cell Contents

For horizontal alignment of text inside the table cells you can use the text-align property in the
same way as you use with other elements. You align text to either left, right, center or justify.

The following style rules will left-align the text inside the <th> elements.

Vertical Alignment of Cell Contents

Similarly, you can vertically align the content inside the<th> and<td> elements to top, bottom,
or middle using the CSS vertical-align property. The default vertical alignment is middle.

The following style rules will vertically bottom-align the text inside the<th> elements.

Controlling the Position of Table Caption

You can set the vertical position of a table caption using the CSS caption-side property.

The caption can be placed either at the top or bottom of the table. The default position is top.

Handling Empty Cells

In tables that uses separate border model, which is default, you can also control the rendering
of the cells that have no visible content using the empty-cells CSS property.
This property accepts a value of either show or hide. The default value is show which renders
empty cells like normal cells, but if the value hide is specified no borders or backgrounds are
drawn around the empty cells.

Creating Zebra-striped Tables

Setting different background colors for alternate rows is a popular technique to improve the
readability of tables that has large amount of data. This is commonly known as zebra-striping
a table.

You can simply achieve this effect by using the CSS :nth-child() pseudo-class selector.

The following style rules will highlight every odd rows within the table body.

CSS Box Model

What is Box Model?

Every element that can be displayed on a web page is comprised of one or more rectangular
boxes. CSS box model typically describes how these rectangular boxes are laid out on a web
page. These boxes can have different properties and can interact with each other in different
ways, but every box has a content area and optional surrounding padding, border,
and margin areas.

The following diagram demonstrates how the width, height, padding, border, and margin CSS
properties determines how much space an element can take on a web page.
Padding is the transparent space between the element's content and its border (or edge of the
box, if it has no border), whereas margin is the transparent space around the border.

Also, if an element has the background color it will be visible through its padding area. The
margin area is always remain transparent, it is not affected by the element's background color,
however, it causes the background color of the parent element to be seen through it.

Width and Height of the Elements

Usually when you set the width and height of an element using the
CSS width and height properties, in reality you are only setting the width and height of the
content area of that element. The actual width and height of the element's box depends on the
several factors.

The actual space that an element's box might take on a web page is calculated like this:

Box Size CSS Properties

Total Width width + padding-left + padding-right + border-left +

border-right + margin-left + margin-right
 Total Height height + padding-top + padding-bottom + border-top +
border-bottom + margin-top + margin-bottom

CSS Dimension

Setting Element Dimensions

CSS has several dimension properties, such as width, height, max-width, min-width, max-
height, min-height that allows you to control the width and height of an element. The following
sections describe how to use these properties to create a better web page layout.

Setting the Width and Height

The width and height property defines the width and height of the content area of an element.

This width and height does not include paddings, borders, or margins. See the CSS box
model to know how the effective width and height of an element's box is calculated.

The width and height properties can take the following values:

 length - specifies a width in px, em, rem, pt, cm, etc.

 % - specifies a width in percentage (%) of the width of the containing element.

 auto - the browser calculates a suitable width for the element.

 initial - Sets the width and height to its default value, which is auto.

 inherit - specifies that the width should be inherited from the parent element.

You can not specify negative values to the width and height properties.

Setting Maximum Width and Height

You can use the max-width and max-height property to specify the maximum width and height
of the content area. This maximum width and height does not include paddings, borders, or
margins.
An element cannot be wider than the max-width value, even if the width property value is set
to something larger.

Setting Minimum Width and Height

You can use the min-width and min-height property specify the minimum width and height of
the content area. This minimum width and height does not include paddings, borders, or
margins.

An element cannot be narrower than the min-width value, even if the width property value is
set to something lesser.

Setting a Width and Height Range

The min-width and min-height properties are often used in combination with the max-width
and max-height properties to produce a width and height range for an element.

This can be very useful for creating flexible design.

CSS Padding

CSS Padding Properties

The CSS padding properties allow you to set the spacing between the content of an element
and its border (or the edge of the element's box, if it has no defined border).

The padding is affected by the element's background-color. For instance, if you set the
background color for an element it will be visible through the padding area.

Define Paddings for Individual Sides

You can specify the paddings for the individual sides of an element such as top, right, bottom,
and left sides using the CSS padding-top, padding-right, padding-bottom and padding-left
properties, respectively.

The padding properties can be specified using the following values:

 length - specifies a padding in px, em, rem, pt, cm, etc.

 % - specifies a padding in percentage (%) of the width of the containing element.

 inherit - specifies that the padding should be inherited from the parent element.

Unlike CSS margin, values for the padding properties cannot be negative.

The Padding Shorthand Property

The padding property is a shorthand property to avoid setting padding of each side separately,
i.e., padding-top, padding-right, padding-bottom and padding-left.

This shorthand notation can take one, two, three, or four whitespace separated values.

 If one value is specified, it is applied to all four sides.

 If two values are specified, the first value is applied to the top and bottom side, and the second
value is applied to the right and left side of the element's box.

 If three values are specified, the first value is applied to the top, second value is applied
to right and left side, and the last value is applied to the bottom.

 If four values are specified, they are applied to the top, right, bottom and the left side of the
element's box respectively in the specified order.

It is recommended to use the shorthand properties, it will help you to save some time by
avoiding the extra typing and make your CSS code easier to follow and maintain.

Effect of Padding and Border on Layout

When creating web page layouts, adding a padding or border to the elements sometimes
produce unexpected result, because padding and border is added to the width and height of the
box generated by the element, as you have learnt in the CSS box model chapter.

For instance, if you set the width of a <div>element to 100% and also apply left right padding
or border on it, the horizontal scrollbar will appear.