HTML

HTML

INTRODUCTION

All of us are familiar with the terms Internet, WWW (World Wide Web), Web site, etc. We

access web sites regularly to download information. You might have observed that the content

on the website is presented in different layouts, colors, fonts, size and styles. This is to make it

look attractive and for convenience of reading. The reason it is called the World Wide Web is

that it forms a web of information that is interlinked through the hypertext links. Have you ever

thought how all these wonderful pages are made? They are actually written as simple text in

HTML or Hyper Text Markup Language.

HTML is one of the several Markup languages such as RTF, PHP, PEARL, ASP,

JAVASCRIPT, ACTIONSCRIPT. Used for designing websites on the WWW.

In this chapter we will learn the basics of HTML

Definition of HTML:

HTML stands for Hypertext Markup Language, and it is the most widely used language to write

Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked

together. Thus, the link available on a webpage is called Hypertext. As its name suggests,

HTML is a Markup Language which means you use HTML to simply "mark-up" a text

document with tags that tell a Web browser how to structure it to display.

Now, HTML is being widely used to format web pages with the help of different tags available

in HTML language.

Features of HTML:

The HTML has the following basic features:

- HTML provides pre defined tags to create the layout of a web page. For example, html

tags can be used to specify headings, paragraphs, lists, tables, images, etc. for a web page.

- HTML is a markup language. Markup is what HTML tags do to the text inside them. The

markups are read and interpreted by the browsers which display the marked elements as

per the specifications used for developing web pages connected through hyperlinks.

- HTML uses HYPERTEXT. Hypertext is the way we move around on the web that is by

clicking on hyperlinks that take us to the next page and so on.

HTML TAGS

HTML tags are used to mark-up HTML elements.HTML tags are surrounded by the two

characters < and >. The surrounding characters are called angle brackets. HTML tags normally

come in pairs like and . The first tag in a pair is the start tag, the second tag is the end

tag .The text between the start and end tags is the element content. HTML tags are not case

sensitive, means the same as .

HTML Tag Types:

There are two types of tags in HTML

1. Container tags:- container tags need both an opening tag < >and a closing tag. These

tell the browser when to begin a command and when to end it.

Example ,……..,……..

2. Empty Tags:- They are made up of just opening tag. In these closing tag is not required.

Example The three most common empty tags are horizontal rule,
Line Break,

and

paragraph.

Tag attributes:

Tag attributes are added to a tag to enhance the way the tag displays the content on the

page. They are made up of the following three components:

- The name of the attribute

- The = sign

- The value of the attribute

Example: The bgcolor attribute of the tag helps you to add a background color to

the body of the web page.

“Bgcolor”= attribute “yellow”=The value of attribute.

Syntax Rules for Writing Tags:

1) Html tag consist of a left angle bracket().

2) Tags come in pairs e.g. . The end tag is a closing tag with

additional forward slash(/).

3) HTML tags are not case sensitive. You may type them in the lowercase or the Upper

Case, the effect will be the same.

4) Attributes are optional. They are always added in the starting of the tag not in the

closing tag.

Logical vs. Physical Tags:

In HTML there are both logical tags and physical tags. Logical tags are designed to

describe (to the browser) the enclosed text's meaning. An example of a logical tag is the

tag. By placing text in between these tags you are telling the browser

that the text has some greater importance. By default all browsers make the text appear

bold when in between the and tags.

Physical tags on the other hand provide specific instructions on how to display the text

they enclose. Examples of physical tags include:

ƒ : Makes the text bold. ƒ : Makes the text usually one size bigger than what's

around it. ƒ : Makes text italic.

Physical tags were invented to add style to HTML pages because style sheets were not

around, though the original intention of HTML was to not have physical tags. Rather than

use physical tags to style your HTML pages, you should use style sheets.

HTML Elements :

Remember the HTML example from the previous page:

My First Webpage

This is my first homepage.

This text is bold

This is an HTML element:

this text is bold

The HTML element begins with a start tag:

The content of the HTML element is: This text is bold The HTML element ends with an

end tag:

The purpose of the tag is to define an HTML element that should be displayed as

bold.

This is also an HTML element:

This is my first homepage. This text is bold

This HTML element starts with the start tag , and ends with the end tag .

The purpose of the tag is to define the HTML element that contains the body of

the HTML document.

Nested Tags:

You may have noticed in the example above, the tag also contains other tags, like

the tab. When you enclose an element in with multiple tags, the last tag opened

should be the first tag closed. For example:

This is NOT the proper way to close nested tags.

This is the proper way to close nested tags.

(HTML tags are not case sensitive.)

Minimal Structure of an HTML Document:

Every HTML document contains certain standard or basic structure tags. Basic structure tags are

the tags required by the browser, without which the browser will not recognize the file as being

an HTML file. If these basic structure tags are not in a document, the page loaded through it

would not be displayed properly.

Some of the basic are:

Tags Syntax Description

Contents of the web page

All HTML pages are contained within

the and

Main contents of the web page

with other tags

tag. It is a container tag that

encloses all the text and images that

make up the web page all the elements

of the web page are specified within the

tag.

Example For Practice:

My first html document>

the Minimal structure of the tags

To write the web pages simple text editors like Note Pad, Word Pad can be used.

To convert the text files (.txt) into html documents (.htm and .html) extension is used.

View the html document by making use of web browsers like mossila firefox, internet explorer,

google chrome etc.

The steps to crate HTML document are as follows:-

Step 1: Open text editor file (Note pad, Word pad, Mac)

Step 2: Type the following html code into notepad

Step 3: Save the HTML Page

Save the file on your computer.

Select File > Save as in the Notepad menu.

Name the file "index.html" or any other name ending with html or htm.

Step 4: View HTML Page in Your Browser

To open a file in a browser, double click on the file, or right-click, and choose open with.

Open the saved HTML file in your favorite browser. The result will look much like this:

Important Tags And Their Function

Some of the important tags and their function are as follows:

The tag and its attribute:

We have learnt that there are two major sections of an html document. The section and

the section. The section holds everything that is text, lists, tables, forms frames

etc. i.e. actually displayed in the web page.

Syntax: Main content of the web page with other tags

As the tag defines the visible section of the document, it has a number of attributes that

control the overall document appearance. Let us understand the use of each of the attribute

through the table below:

Attribute Use Example

Bgcolor Sets the background color of

the web page

Background Specifies the URL of the

background image.

Text Specifies the text color

Topmargin Specifies the top margin of

the web page

Leftmargin Specifies the left margin of

the web page

Example : To use body tag with its attributes

HTML Backgrounds :

Backgrounds: The tag has two attributes where you can specify backgrounds. The

background can be a color or an image.

Bgcolor : The bgcolor attribute specifies a background-color for an HTML page.

The value of this attribute can be a hexadecimal number, an RGB value, or a color name:

The lines above all set the background-color to black.

Background : The background attribute can also specify a background-image for an HTML

page. The value of this attribute is the URL of the image you want to use. If the image is smaller

than the browser window, the image will repeat itself until it fills the entire browser window.

Try It Out! Open your text editor and type the following text:

My First Webpage

My First Webpage

Welcome to my first webpage.

I am writing this page using a text editor and plain old html.

By learning html, I'll be able to create WebPages like a beginner

pro....
which I am of course.

Save your page as mypage3.html and view it in your browser. To view how the page should look, visit

this web page: http://profdevtrain.austincc.edu/html/mypage3.html.

Notice we gave our page a background color as well as a background image. If for some reason the web

page is unable to find the picture, it will display our background color.

To Practice in inserting background image (Notepad code):

Web browser display:

The Heading tags

We know that the heading is an important part of a web page. The tag helps to define

headings. Headings are typically displayed in larger and bolder fonts than the normal body text.

Html has six levels of headings that are numbered 1 through 6, with 1 being the largest and 6

being the smallest.

Syntax: text heading where n is a number between 1 to 6 specifying the level of

the heading.

Use of the heading tags :

The following is the output:

The
Tag

Unlike document files created using any word processing software, an HTML document does not

wrap up the text to a new line beyond the web document margins. To give line breaks in an

HTML document, we have to insert line breaks in a web document using the line break
tag.

The
tag forces a line break with no extra (white) space between lines.

Syntax: text
text
text

Use the line break tag:

The following is the output in the web browser:

The

tag and its attributes:

Paragraphs are defined with the Paragraph

tag. HTML automatically adds an extra blank

line before and after a paragraph. Align is one of the important attribute supported by the

tag.

Align – The align attribute is used to set the alignment of the paragraph with respect to the page

size. The values of the align attribute are left, right, and center.

Syntax:

text to be converted into paragraph

Example for Practice:

Notepade file

Web browser display:

The tag and its attributes:

The Horizontal rule tag produces a horizontal line with a width of the browser window. A

horizontal rule is useful to separate major sections of a web page. You can vary a rule’s size

(thickness) and width (percentage of the window covered by the rule.)

Syntax:

The attributes supported by the tag are as given in the following table.

Attribute Use Example

Width Width attribute displays the horizontal ruler of

the specified width in pixels or in percentage

Size Size attribute controls the height or the

thickness of the horizontal ruler.

Note: The size attribute takes the value in

Pixels

Color Color attribute accepts the hex code or name

of the color to apply as the background color

of horizontal ruler.

Or

Noshade Noshade attribute displays the ruler bar as a

flat solid bar rather than the default 3D bar.

Note: The attribute is used without any value

Align Align attribute can take any one of the 3

alignment values, that is left, center or right to

align the position of horizontal ruler.

Note: The effect of the align attribute is

visible only if the width of the tag is less

than the width of the web browser window.

Example to practice:

Html code in Notepad

Web browser display:

The font tag and its attributes:

The font tag enables you to apply the style on a single character, word or group of words. Using

the HTML font tag you can set the font size, font color, and font family of the text placed inside

the tag.

Syntax: Text whose font you want to format

The attributes of the font tag are given in the following table

Attribute Use Example

Face It allows you to set the font family e.g. Arial,

Verdana, MS Sans Serif. By default fonts

appear with the Times new roman face.

Size It allows you to set the font size.

Color It allows you to set the font color.

Example to Practice in Note Pad file

To practice Font Tag and its Attribute

Web browser Display:

HTML Colors

Color Values Colors are defined using a hexadecimal notation for the combination of red, green, and

blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The

highest value is 255 (hex #FF). This table shows the result of combining red, green, and blue:

Colors Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Color Names A collection of color names is supported by most browsers.

To view a table of color names that are supported by most browsers visit this web page:

http://profdevtrain.austincc.edu/html/color_names.htm

Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia,

gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors

you should use the Color HEX value.

Color Color HEX Color Name

#F0F8FF AliceBlue

#FAEBD7 AntiqueWhite

#7FFFD4 Aquamarine

#000000 Black

#0000FF Blue

#8A2BE2 BlueViolet

#A52A2A Brown

Other HTML Tags:

As mentioned before, there are logical styles that describe what the text should be and physical styles

which actually provide physical formatting. It is recommended to use the logical tags and use style

sheets to style the text in those tags.

Logical Tags Physical Tags

Defines an abbreviation Defines bold text

Defines an acronym Defines big text

Defines an address element Defines italic text

Defines a citation Defines small text

Defines computer code text Defines superscripted text

Defines a long quotation Defines subscripted text

Defines text Defines teletype text

Defines a definition term Deprecated. Use styles instead

Defines emphasized text

Defines inserted text

Defines keyboard text

Defines preformatted text

Defines a short quotation

Defines sample computer code

Defines strong text

Defines a variable

Character tags like and produces the same physical display as and but

are more uniformly supported across different browsers.

Foreground Image in Html

To set foreground image in the Html we can make use of tag with the attribute

. It is an empty tag with no closing tag in it.

Some of the attributes and their use for tag are:

Attribute

Use

Sets the foreground image to the web page

Attribute

Use

Sets the image with height as 50%

Attribute

Use

Sets the foreground image with height as 50%

Graphic Formats of Images:

While saving an image file we can choose from a number image formats available to save it in.

Some of the common file formats available for saving images and which format is most suitable

for saving images for use on the web page.

File Formats Description

.GIF(Graphic interchange format) The .gif file format is used for images that have large

areas of flat colours (allows 256 colours for an image)

such as Maps, Logos, and cartoons.

.JPEG(Joint photographic expert

group)

This file format is used for images that have lots of

colours, subtle shades and details such as photograph. The

.JPEG is also written as .JPG

.BMP(Bitmap pictures) It is capable of storing 2D digital images of various

widths, heights, resolution and in various colors depths.

.TIFF(Tagged image file format) This is mainly used to store high resolution images that

include photographs and line art. This format is widely

supported by applications such as Photoshop, GIMP, Paint

shop Pro. Etc.

.PNG(Portable Network Graphics) This is a new image format that is suitable for images

using millions of colors, it is not supported by all image

editing software’s and web browsers.

.PSP(Paint shop Pro) This is used when working on an image in Paint Shop Pro.

It stores information about layers, Masks and Paths

particular to Paint Shop Pro.

Web browser display:

Adding images using align attributes:

We can align the inserted images with respect to the text and other elements present on the web page by

using the ‘align’ attribute of tag.

Syntax:

The table showing different image alignment;

Alignment value Usage Description

Left This alignment value tells the

browser to align the image from the

left margin

Right This alignment value tells the

browser to align the image from the

right margin

Middle This aligns the middle of the image

with the base line of the text.

Top This aligns the top of the image

with the tallest item in the current

line.

Bottom This aligns the bottom of the image

with the baseline of the text in the

current line.

Keeping space around an image:

By default the browser keeps some distance or space between the image and the surrounding text. You

can however manipulate this space using the “hspace” and “vspace” attributes of the ” tag. Hspace

stands for horizontal space (space between the left and right of the image and the surrounding text) and

vspace stands for the vertical space( space between the top and bottom of the image and the surrounding

text). The values of these attributes are given in the pixels.

Syntax:

Example:

Placing border around an image:

The border attribute of the tag can be used to give a border around an image

The notepad code:

Web browser display:

Marquee Tag in Html:

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically

down your webpage depending on the settings. This is created by using HTML tag.

The Tag Attributes

Following is the list of important attributes which can be used with tag.

Attribute Description

width This specifies the width of the marquee. This can be a value like 10 or 20% etc.

height This specifies the height of the marquee. This can be a value like 10 or 20% etc.

direction This specifies the direction in which marquee should scroll. This can be a value like

up, down, left or right.

bgcolor This specifies background color in terms of color name or color hex value.

hspace This specifies horizontal space around the marquee. This can be a value like 10 or

20% etc.

vspace This specifies vertical space around the marquee. This can be a value like 10 or 20%

etc.

Notepad code=

Browser Display:

Example 2:

Browser display:

Example 3:

Browser display:

Types of List in Html

List:- A number of connected items or names which written or printed one below the other.

Html support 3 types of list

1) Unordered list 2) Ordered list 3) Definition list 4) Nested List 1) Unordered list: An Unordered list is a list of items which are marked with

bullets(typically black small circles)

There are three types of bullets can be placed or displayed in an unordered list.

a) Disk(•) by default. b) Circle(○) c) Sqare(■) An unordered list starts with tag.

Each list item starts with tag and ends with closing tag. The tag for changing the bullets

type is

Inside a list item you can put a paragraph line break, images, links, other list etc.

Example of unordered list using square attribute

Following is an example where we used

HTML Unordered List

Beetroot

Ginger

Potato

Radish

This will produce the following result in web browser:

Beetroot

Ginger

Potato

Radish

Ordered list:

� An order list is also a list of items. � The list of items is marked with numbers. � An order list starts with tag.

Each list items starts with the tag and closing tag. Inside a list item you can put

paragraphs, line, images, links, other list etc.

Example of Ordered list:

To prepare the list of items

Attribute of tag

• Numbers are default in order list. • Type attribute of tag is used to change bullet type

Type attributes

Regular number (default)

Uppercase alphabet

Lowercase alphabet

Uppercase Roman number

Lowercase Roman number

Example of ordered list using square attribute:

Following is an example where we used

HTML Unordered List

Beetroot

Ginger

Potato

Radish

This will produce the following result in web browser:

A. Beetroot

B. Ginger

C. Potato

D. Radish

2) Definition list:

The definition list is the ideal way to present a glossary, list of terms (and their definition), in

HTML.

A definition list starts with the tag. Each definition – list term starts with the tag.

The explanation or definition of the each term marked with starts with the tag.

Web browsers generally format the definition on a new line and indent it.

Syntax:

Term 1

Definition of term 1

Term 2

Definition of Term 2

---

Example:

HTML Definition List

HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol

Nested List:

When one type is given inside or embedded inside another type of list. It is called as Nested list.

You can also have a number of paragraphs, each containing a nested list, in a single list item.

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 tag in which the tag is used to

create table rows and tag is used to create data cells.

Example

HTML Tables

Row 1, Column 1

Row 1, Column 2

Row 2, Column 1

Row 2, Column 2

This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Here border is an attribute of 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 tag. This tag will be put to replace 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 element in any row.

Example

HTML Table Header

Name

Salary

Ramesh Raman

5000

Shabbir Hussein

7000

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes

There are two attribiutes called cellpadding and cellspacing which you will use to adjust

the white space in your table cells. The cellspacing attribute defines the width of the

border, while cellpadding represents the distance between cell borders and the content

within a cell.

Example

HTML Table Cellpadding

Name

Salary

Ramesh Raman

5000

Shabbir Hussein

7000

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single

column. Similar way you will use rowspan if you want to merge two or more rows.

Example

HTML Table Colspan/Rowspan

Column 1

Column 2

Column 3

Row 1 Cell 1Row 1 Cell 2Row 1 Cell

3

Row 2 Cell 2Row 2 Cell 3

Row 3 Cell 1

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Tables Backgrounds

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

• bgcolor 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.

Example

HTML Table Background

Column 1

Column 2

Column 3

Row 1 Cell 1Row 1 Cell 2Row 1 Cell

Row 2 Cell 2Row 2 Cell 3

Row 3 Cell 1

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Here is an example of using background attribute. Here we will use an image available

in /images directory.

HTML Table Background

Column 1

Column 2

Column 3

Row 1 Cell 1Row 1 Cell 2Row 1 Cell

3

Row 2 Cell 2Row 2 Cell 3

Row 3 Cell 1

This will produce following result. Here background image did not apply to table's

header.

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Table Height and Width

You can set a table width and height using width and height attributes. You can specify

table width or height in terms of pixels or in terms of percentage of available screen

area.

Example

HTML Table Width/Height

Row 1, Column 1

Row 1, Column 2

Row 2, Column 1

Row 2, Column 2

This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the

top of the table. This tag is deprecated in newer version of HTML/XHTML.

Example

HTML Table Caption

This is the caption

row 1, column 1row 1, columnn 2

row 2, column 1row 2, columnn 2

This will produce following result:

This is the caption

row 1, column 1 row 1, columnn 2

row 2, column 1 row 2, columnn 2

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and

foot are rather similar to headers and footers in a word-processed document that remain

the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:

• - to create a separate table header.

• - to indicate the main body of the table.

• - to create a separate table footer.

A table may contain several elements to indicate different pages or groups of

data. But it is notable that and tags should appear before

Example

HTML Table

This is the head of the table

This is the foot of the table

Cell 1

Cell 2

Cell 3

Cell 4

This will produce following result:

This is the head of the table

This is the foot of the table

Cell 1 Cell 2 Cell 3 Cell 4

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the

tags inside table data tag .

Example

Following is the example of using another table and other tags inside a table cell.

HTML Table

Name

Salary

Ramesh Raman

5000

Shabbir Hussein

7000

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

HTML Forms

HTML Forms are required when you want to collect some data from the site visitor. For

example during user registration you would like to collect information such as name,

email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application

such as CGI, ASP Script or PHP script etc. The back-end application will perform

required processing on the passed data based on defined business logic inside the

application.

There are various form elements available like text fields, textarea fields, drop-down

menus, radio buttons, checkboxes, etc.

The HTML tag : It is used to create an HTML form and it has following

syntax:

form elements like input, textarea etc.

Form Attributes

Apart from common attributes, following is a list of the most frequently used form

attributes:

Attribute Description

action Backend script ready to process your passed data.

method Method to be used to upload data. The most frequently used are GET

and POST methods.

target Specify the target window or frame where the result of the script will

be displayed. It takes values like _blank, _self, _parent etc.

enctype You can use the enctype attribute to specify how the browser

encodes the data before it sends it to the server. Possible values are:

• application/x-www-form-urlencoded - This is the standard

method most forms use in simple scenarios.

• mutlipart/form-data - This is used when you want to upload

binary data in the form of files like image, word file etc.

Note: You can refer to Perl & CGI for a detail on how form data upload works.

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML

form:

• Text Input Controls

• Checkboxes Controls

• Radio Box Controls

• Select Box Controls

• File Select boxes

• Hidden Controls

• Clickable Buttons

• Submit and Reset Button

Text Input Controls

There are three types of text input used on forms:

• Single-line text input controls - This control is used for items that require only

one line of user input, such as search boxes or names. They are created using

HTML tag.

• Password input controls - This is also a single-line text input but it masks the

character as soon as a user enters it. They are also created using HTMl

tag.

• Multi-line text input controls - This is used when the user is required to give

details that may be longer than a single sentence. Multi-line input controls are

created using HTML tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search

boxes or names. They are created using HTML tag.

Example

Here is a basic example of a single-line text input used to take first name and last name:

Text Input Control

First name:

Last name:

This will produce following result:

First name:

Last name:

Attributes

Following is the list of attributes for tag for creating text field.

Attribute Description

type Indicates the type of input control and for text input control it

will be set to text.

name Used to give a name to the control which is sent to the server to

be recognized and get the value.

value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of

characters.

maxlength Allows to specify the maximum number of characters a user

can enter into the text box.

References:

1) http://www.tutorialspoint.com/html/index.htm

2) http://www.w3schools.com/

3) Fastrack to Information Technology

CSS

THEORY | PRACTICALS

� 01 | 00

I. WHAT YOU NEED TO KNOW

1. Understanding CSS

2. What is CSS?

3. Advantages of using CSS

4. CSS Versions

� 02 | 00

II. CSS Basics

1. Syntax

2. Selector

3. Declaration

4. Property values

5. Length Unit identifiers

� 01 | 03 6. CSS Comments

III. Selectors

1. Selector Types

� 02 | 04 2. Selector Combinators

3. Grouping Selectors

4. Multiple Style Rules

� 01 | 03

IV. Ways to Use CSS

1. Inline Style

2. Internal Style sheet

3. External Style sheet

4. Using Multiple Style sheets

V. CSS Properties

1. Color

2. Background

3. Text

� 02 | 04 4. Font

5. Lists

6. Table

7. Link

� 03 | 04

VI. Box Model

1. Height and Width

2. Padding

3. Border

4. Margin

5. Outline

VII. Layout Properties

1. Display/Visibility

2. Position

3. Float/Clear

� 02 | 08

PROJECT WORK

Teachers Guidance

Data collection

Layout

TOTAL: 24 | 40

CONTENTS AT GLANCECONTENTS AT GLANCECONTENTS AT GLANCECONTENTS AT GLANCE

VIII. WHAT YOU NEED TO KNOW

5. Understanding CSS

6. What is CSS?

7. Advantages of using CSS

8. CSS Versions

IX. CSS Basics

7. Syntax

8. Selector

9. Declaration

10. Property values

11. Length Unit identifiers

12. CSS Comments

X. Selectors

5. Selector Types

6. Selector Combinators

7. Grouping Selectors

8. Multiple Style Rules

XI. Ways to Use CSS

5. Inline Style

6. Internal Style sheet

7. External Style sheet

8. Using Multiple Style sheets

XII. CSS Properties

8. Color

9. Background

10. Text

11. Font

12. Lists

13. Table

14. Link

XIII. Box Model

6. Height and Width

7. Padding

8. Border

9. Margin

10. Outline

XIV. Layout Properties

4. Display/Visibility

5. Position

6. Float/Clear

PART PART PART PART ---- IIII

WHAT YOU NEED TO KNOWWHAT YOU NEED TO KNOWWHAT YOU NEED TO KNOWWHAT YOU NEED TO KNOW

1.1.1.1. Understanding CSS

2.2.2.2. What is CSS?

3.3.3.3. Advantages of using CSS

4.4.4.4. CSS Versions

UNDERSTANDING CSSUNDERSTANDING CSSUNDERSTANDING CSSUNDERSTANDING CSS

HTML was never intended to contain tags for formatting a web page. It

was created to describe the content of a web page, like: h1, p, etc.

Tags like , and color attributes were added to the HTML 3.2

specification.

Development of large websites, where fonts and color information were

added to every single page, became a long and expensive process. To

solve this problem, the WWW Consortium (W3C) created CSS.

CSS is created and maintained through a group of people within the W3C

called the CSS Working Group. The CSS Working Group creates

documents called specifications. When a specification has been discussed

and officially ratified by the W3C members, it becomes a recommendation.

WHAT IS CSS? WHAT IS CSS? WHAT IS CSS? WHAT IS CSS?

CSS stands for “Cascading Style SheetsCascading Style SheetsCascading Style SheetsCascading Style Sheets”.

“CascadingCascadingCascadingCascading” refers to the procedure that determines which style will apply

to a certain section, if you have more than one style rule. The “stylestylestylestyle” is

referred to the look of a certain part of your page. The “sheetssheetssheetssheets” are like

templates, or a set of rules, for determining how the webpage will look.

CSS is intended to simplify the process of making pages presentable. It

handles look and feel part of webpage. You can use CSS to control the

colour of the text, the style of fonts, the spacing between paragraphs, how

columns are sized and laid out, what background images or colors are

used, as well as a variety of other effects. It is also used to define styles for

your web pages, including the design, layout and variations in display for

different devices and screen sizes.

So, CSS is a styling language that contains a set of rules to tell browsers

how your webpage should look.

CSS provides a powerful control over the presentation of an HTML

document on screen, on paper, or in other media.

ADVANTAGES OF CSSADVANTAGES OF CSSADVANTAGES OF CSSADVANTAGES OF CSS

1.1.1.1. CSS saves timeCSS saves timeCSS saves timeCSS saves time:

Styles defined for the HTML elements in a CSS file can be applied to as

many web pages as you want.

2.2.2.2. Pages load fasterPages load fasterPages load fasterPages load faster

Just write one CSS rule of a tag and apply it to all the occurrences of

that tag in HTML document. So, less code; means faster download

times.

3.3.3.3. Easy maintenanceEasy maintenanceEasy maintenanceEasy maintenance

To make a global change, simply change the style, and all the elements

in all the web pages will be updated automatically.

4.4.4.4. Superior styles to HTMLSuperior styles to HTMLSuperior styles to HTMLSuperior styles to HTML

CSS has a much wider array of attributes than HTML, so you can give a

far better look to your HTML page in comparison to HTML attributes.

5.5.5.5. Multiple Device CompatibilityMultiple Device CompatibilityMultiple Device CompatibilityMultiple Device Compatibility

Style sheets allow content to be optimized for more than one type of

device. By using the same HTML document, different versions of a

website can be presented for hand-held devices such as PDAs and

mobile-phones or for printing.

6.6.6.6. Global web standardsGlobal web standardsGlobal web standardsGlobal web standards

Now HTML attributes are being deprecated and it is being

recommended to use CSS. So it’s a good idea to start using CSS in all

the HTML pages to make them compatible with future browsers.

CSS VERSIONSCSS VERSIONSCSS VERSIONSCSS VERSIONS

Cascading Style Sheets level 1 (CSS1) came out of W3C as a

recommendation in December 1996. This version describes the CSS

language as well as a simple visual formatting model for all the HTML tags.

Today CSS has various levels, each level of CSS builds upon the last,

typically adding new features and typically denoted as CSS 1, CSS 2, CSS

2.1, CSS 3, etc.

CSS also have subset of one or more levels of CSS built for a particular

device or user interface, called Profiles.

PART PART PART PART ---- IIIIIIII

CSS BASICSCSS BASICSCSS BASICSCSS BASICS

1.1.1.1. Syntax

2.2.2.2. Selector

3.3.3.3. Declaration

4.4.4.4. Property values

5.5.5.5. Length Unit identifiers

6.6.6.6. CSS Comments

SYNTAX SYNTAX SYNTAX SYNTAX

A CSS comprises of style rules that are interpreted by the browser and

then applied to the corresponding elements in your document. A style rule

is made of two parts, (1) Selector, and (2) Declaration

1.1.1.1. SelectorSelectorSelectorSelector

A selector is an HTML element you want to add style to. This could be

any like

or etc.

2.2.2.2. DeclarationDeclarationDeclarationDeclaration

The declaration is the statement of style for that element. It is made up

of property and value.

Property: Property: Property: Property: A property is the aspect of an element you want to change;

for eg. color, border, font, etc. Put simply, all the HTML attributes

are converted into CSS properties.

Value: Value: Value: Value: Value is the exact setting for the property. For example, color

property can be set to value red or the font-size can be set to 30px,

and so on.

CSS Style Rule Syntax is as follows:

Selector {declaration;}

Or

Selector {property1:value;}

Example:

The style rule for element can be defined as follows:

h1{text-align:center;}

In this example, is a selector, text-align is a property and

center is the value of the property.

Another Example:

body{background-color:green; Margin-left:2cm;}

When you add more properties to the style rule, the same are separated by semi-colon. (;). In the above example, background-color, and Margin-left are separated by semicolon.

PROPERTY VALUESPROPERTY VALUESPROPERTY VALUESPROPERTY VALUES

Property values are of three types, viz. specified, computed and actual

1.1.1.1. SpecifiedSpecifiedSpecifiedSpecified

It is the value specified in declaration. This type of value is sub-divided

as absolute, and relative.

AbsoluteAbsoluteAbsoluteAbsolute:::: value can be determined without reference to context (e.g., 2cm)

RelativeRelativeRelativeRelative:::: value depends on context (e.g., larger)

2.2.2.2. ComputedComputedComputedComputed

It is absolute representation of relative value (e.g., larger might be 1.2 x parent font size)

3.3.3.3. ActualActualActualActual

It is the value actually used by browser (e.g., computed value might be rounded)

CSS LENGTH UNIT CSS LENGTH UNIT CSS LENGTH UNIT CSS LENGTH UNIT IDENTIFIESIDENTIFIESIDENTIFIESIDENTIFIES

IdentifierIdentifierIdentifierIdentifier MeaningMeaningMeaningMeaning in - inches cm - centimeters mm - millimeters pt - points: 1/72-inch pc - picas: 12 points px - pixels: typically 1/96-inch em - 1em is roughly the height of a capital letter in the reference

font ex - 1ex is roughly the height of the lowercase ‘x’ character in

the reference font.

CSS COMMENTSCSS COMMENTSCSS COMMENTSCSS COMMENTS

Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span

multiple lines.

Example of single line comment:

p {

/*The paragraph elements will appear in red color.*/

color: red; }

Example of multi-line comment:

p {

/*The paragraph elements in this web page

will appear in red color.*/

color: red; }

PART PART PART PART ---- IIIIIIIIIIII

SELECTORSSELECTORSSELECTORSSELECTORS

1.1.1.1. Selector Types

2.2.2.2. Selector Combinators

3.3.3.3. Grouping Selectors

4.4.4.4. Multiple Style Rules

SELECTOR TYPESSELECTOR TYPESSELECTOR TYPESSELECTOR TYPES

There are three types of Selectors

1. Element Selector 2. ID Selector, and 3. Class Selector

1. The Element Selector

The element selector selects the elements based on the element name. For example, with a single declaration, all elements on a page can

be selected and the style rule is defined to them as below.

h1{color: red; text-align:center;}

Level 1 header, i.e. is described with color attribute set to red

and text-align to the center.

2. The ID Selector

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined

rule.

#black {color: #000000;}

This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example:

h1#black {color:#000000;}

This rule renders the content in black for only elements with id

attribute set to black.

The true power of id selectors is when they are used as the foundation

for descendant selectors. For example:

#black h2 {color:#000000;}

In this example, all level 2 headings will be displayed in black color

when those headings will lie within tags having id attribute set to black.

3. The Class Selectors

The style rules defined in the class selector can be applied to any

element using class attribute for the element.

.black {color: #000000;}

This rule renders the content in black for every element with class attribute set to black for the element. You can make it a bit more

particular. For example:

h1.black {color:#000000;}

This rule renders the content in black for only elements with class

attribute set to black.

You can apply more than one class selectors to a given element.

Consider the following example:

This para will be styled by

the classes center and bold.

CSS COMBINATORSCSS COMBINATORSCSS COMBINATORSCSS COMBINATORS

Combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector.

Between the simple selectors, we can include a combinator.

CSS combinators are of following types:

1. Descendant selector, 2. Child selector, 3. Adjacent sibling selector, 4. General sibling selector, 5. Universal selector, and 6. Attribute selector.

1. Descendant Selector

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element, you use descendant selector. It matches all elements that are descendants of a specified element. As given in the following example, the style rule will apply to li element –

only when it lies inside the tag.

ul li {color: #000000;}

div p {background-color: yellow; }

2. Child Selector

The child selector selects all elements that are the immediate children of a specified element. The following example selects all

elements that are immediate children of element. Other paragraphs put inside other elements like or would not have any effect of this rule.

body > p {color:#000000;}

3. Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same

parent element, and “adjacent” means “immediately following”.

The following example selects all

elements that are placed

immediately after elements:

Div +p {background-color:yellow;}

4. General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all

elements that are siblings of elements:

Div ~p {background-color: yellow;}

5. The Universal Selector

Rather than selecting elements of a specific type, the universal selector

selects the name of any element type:

* {color:green;}

This rule renders the content of every element in our document in black color.

6. The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text:

hr[color="red"]{width:50%; size=40;}

h1[color="red"]{text-align: center; color: green;}

The advantage to this method is that, the same type of element with other value to the attribute is unaffected.

There are following rules applied to attribute selector:

H1[color] - Selects all Level 1 Header elements with a

color attribute.

H1[color=”red”] - Selects all Level 1 Header elements whose

color attribute has a value of exactly "red".

H1[color~=”red”] - Selects all Level 1 Header elements whose

color attribute contains the word "red".

h1[color|="red"] - Selects all Level 1 Header elements whose

color attribute contains values that are exactly

"color", or begin with "color".

Grouping SelectorsGrouping SelectorsGrouping SelectorsGrouping Selectors

You can apply a style to many selectors if you like. Just separate the

selectors with a comma, as given in the following example:

h1, h2, h3 {

color:#36C;

font-weight:normal;

letter-spacing:.4em;

margin-bottom:1em;

text-transform:lowercase;

}

This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have

the corresponding declarations applied to them.

Multiple Style RulesMultiple Style RulesMultiple Style RulesMultiple Style Rules

You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example:

h1 { color:#36C;

font-weight:normal;

letter-spacing:.4em;

margin-bottom:1em;

text-transform:lowercase;

}

Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines.

PART PART PART PART ---- IVIVIVIV

WAYS TO USE CSSWAYS TO USE CSSWAYS TO USE CSSWAYS TO USE CSS

1.1.1.1. Inline Style

2.2.2.2. Internal Style sheet

3.3.3.3. External Style sheet

4.4.4.4. Using Multiple Style sheets

Where do I put my style rules?Where do I put my style rules?Where do I put my style rules?Where do I put my style rules?

CSS style rules can be written at three different places. According to their functionality, these style-rule-places:

1. Inline style 2. Internal Style Sheet 3. External Style Sheet

1. Inline style

Inline style is used to apply unique styles for a single element. It uses style attribute to declare the style. The value of style attribute is a declaration. See the below given code.

Inline styling.

Declaration describes the styles to be applied to the element.

Sample program

Inline styling

Inline styling.

2. Internal style sheet

Internal style sheet is used to apply unique style in the current page. It uses the element in section of HTML document to

describe style rules. See the below given code.

h1 {color:red; font-family:verdana;}

Sample program

Internal styling

h1 {color:red; font-family:verdana;}

p {color:darkorchid; font-size:16;}

Red color heading .

Font size and color of the text displayed in

default values.

3. External style sheet

External style sheet method calls the style rules from a separately stored CSS file using the element in section of HTML document. CSS file is a separately stored file with extension name .css that holds style rules for different types of HTML elements. See the below given code.

Sample code

Code in CSS file ‘style1.css’

h1, p {

text-align:center;

color:red;

}

Code in HTML file ‘MyPage.html’

This is a heading

This is a paragraph

Same CSS file can be referred in many pages. So, just one CSS file can change the look of an entire website.

Using multiple style sheetUsing multiple style sheetUsing multiple style sheetUsing multiple style sheetssss

If a selector (element) has different style rules defined using different style sheets then the value from the last read style sheet will be rendered by the browser.

For instance, when we write code in external style sheet, we provide link in

head section of our HTML document as below:

���� In the above example, href attribute declares the file “style1.css” which will be read first by HTML document and the system will apply it accordingly.

���� Apart from the style referred in external style sheet, if you have declared specific style for the page using internal style method, the internal style file will be read next to external style, and if specific change is declared for some elements, that will be applied to those elements.

���� The inline style, if you have used any, will be read after internal style.

So, if you are using multiple style sheets, program will read the code in the order – external style, internal style and inline style, and the value from the

last read style sheet will be used.

PART PART PART PART ---- VVVV

CSS PROPERTIESCSS PROPERTIESCSS PROPERTIESCSS PROPERTIES

1.1.1.1. Introduction

2.2.2.2. Color

3.3.3.3. Background

4.4.4.4. Text

5.5.5.5. Font

6.6.6.6. Lists

7.7.7.7. Table

8.8.8.8. Link

INTRODUCTIONINTRODUCTIONINTRODUCTIONINTRODUCTION

CSS properties are the key to altering the styling of HTML elements in your web documents. They are specified in the CSS standard. They define how the styles should look on the Web page or elsewhere. Each property has a set of possible values. Some properties can affect any type of element,

and others apply only to particular groups of elements.

The properties in this appendix are grouped into areas according to the type of element it affects; in fact, in many cases, one property affects another. The property groups include the following:

���� Colours ���� Background ���� Text ���� Font ���� Lists ���� Table ���� Styling Links ���� Box model ���� Display ���� Position ���� Float This part covers properties up to styling links. Other properties will be

covered in next parts of this writing.

USING COLORSUSING COLORSUSING COLORSUSING COLORS

Color

Color property is used to set the color of the text/element. Color is often specified by:

A Hex value – like “#ff0000”

An RGB value – like “rgb(255,0,0)”

A color name – like “red”

Sample code

Body {color:yellow;}

H1{color:green;}

USING BACKGROUNDSUSING BACKGROUNDSUSING BACKGROUNDSUSING BACKGROUNDS

Background-color

Background-color property is used to change the background color of any

element.

Value

Any color value like:

red

#663399

Sample code

Body {background-color:yellow;}

H1 {background-color:blue;}

P {background-color:red;}

Background-image

Background-image property is used to set background image. By default, the image is repeated so it covers entire element. Value must be given as

URL and the filename within the bracket.

Sample code

Body {background-image:url(‘filename’);}

Image-repeat

Image-repeat property is used to repeat the image both horizontally and

vertically.

Values:

Repeat-x : replicates image horizontally

Repeat-y : replicates image vertically

No-repeat : image won’t be replicated

Sample code

Body {Background-image:url(‘baby.jpg’);

Background-repeat:repeat-y;}

Image-position

Image-position attribute is used to align the background image to left, right,

top or center.

Values

right,

left,

top,

center

When you write value pair as ‘0% 0%’ then the Image is placed in the

upper left corner of the box

Possible combinations of keywords and their interpretations (e.g.).

‘top left’ and and and and ‘left top’ same as same as same as same as ‘0% 0%’

‘top’, ‘top center’ and and and and ‘center top’ as as as as ‘50% 0%’

‘‘‘‘right top’ and and and and ‘top right’ as as as as ‘100% 0%’

‘center’ and and and and ‘center center’ as as as as ‘50% 50%’

‘bottom left’ and and and and ‘left bottom’ as as as as ‘0% 100%’

‘bottom right’ and and and and ‘right bottom’ as as as as ‘100% 100%’

Background-attachment

Background-attachment property is used to set image scroll or not to scroll

with rest of the page.

Values

fixed,

scroll

Sample code

body { Background-image:url (‘baby.jpg’);

body { background-attachment : fixed ; }

Background

Background is a shortcut property used to set all background properties in one declaration. The list of order for specifying values is as follows:

background-color, background-image, background-repeat,

background-attachment, background-position

Sample code

body {background :“red” url(“bg_image.jpg”) no-repeat

right top; }

TEXTTEXTTEXTTEXT

Letter-spacing

Letter-spacing property is used to set the space between the characters.

Sample code

H1 {letter-spacing:0.5cm;}

Word-spacing

Word-spacing property is used to set the space between the words.

Sample code

P {word-spacing:1cm;}

Line-height

The Line-height property is used to set the height of line.

Sample code

P {line-height:200%;}

Text-decoration

The Text-decoration property is used to underline text, put line over text or line through text. It can be set using pre-defined values: Underline,

Overline, Line-through, None (to remove line)

Sample code

H3 {text-decoration:underline;}

Text-align

The text-align property is used to align the text to the left indent, right indent, center to the left indent and right indent or align to both left and

right indent.

The alignment can be set by using one of the three pre-defined values: right, left, center or justify.

Sample code

H1{text-align:center;}

Text-indent

Text-indent property is used to indent the first line of text. It adds the specified space in the first line, before the text. It can be set by specifying

the distance from the left margin.

Sample code

H1 {text-indent:1cm;}

Text-transform

The text-transform property is used to transform the text to uppercase, lowercase, capitalize. It can be set using predefined values: uppercase, lowercase, capitalize, none (default)

Sample code

H1 {text-transform:uppercase;}

FONTFONTFONTFONT

Font-family

The font-family tag sets the face of the font. Different values can be used;

if browser does not support the first font, it tries the next font, and so on.

Sample code

H3 {font-family:verdana;}

p {font-family:cambria, verdana, tahoma;}

Font-size

The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like

paragraphs. The font-size value can be an absolute size, or relative size.

Absolute size sets the text to a specified size. Setting size with pixel gives full control over the text size. It does not allow a user to change the text size in all browsers.

Sample code

p {font-size:18px;}

Relative size allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by

the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from

pixels to em using this formula: pixels/16=em.

Sample code

p {font-size:1.5em;}

Font-style

The font-style property sets the style of the font. It is mostly used to italicize text. Font style can be set by using any of the predefined values: Italic, Normal, oblique.

Sample code

H3 {font-style:italic;}

Font-variant

The font-variant property is specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in

the text.

Sample code

p.normal {font-variant:normal;}

p.small {font-variant:small-caps;}

Font-weight

The font-weight property specifies the weight of a font. Predefined values are normal, and bold. Also numeric value from 100 to 900 can be assigned

to indicate the font weight.

Sample code

P {font-weight:500;}

Font

Font property sets all the font properties in one declaration. The order of values for font is:

font-style, font-variant, font-weight, font-size,

font-family

Sample code

p {font:italic bold 16px arial 400;}

LISTSLISTSLISTSLISTS

In HTML, there are two main types of lists:

1.1.1.1. Unorder lists () – the list items are marked with bullets 2.2.2.2. Ordered lists () – the list items are marked with numbers or letters

The CSS list properties allow you to:

���� Set different list item markers for ordered lists ���� Set different list item markers for unordered lists ���� Set an image as the list item marker

���� Add background colors to lists and list items

Different List Item Markers

List-style-type

The list-style-type property specifies the type of list item marker. The

following example shows some of the available list item markers:

Sample code

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

Values for unordered lists

circle, disc, square, none

Values for ordered lists

Decimal, decimal-leading-zero, upper-roman, lower-roman,

none

An Image As The List Item Marker

List-style-image

Sample code

ul {list-style-image:url(“sqpurple.gif”);}

Values

In the above example, ‘sqpurple.gif’ is the name of image. Image size should be small.

Position The List Item Marker

List-style-position

Sample code

ul {list-style-position:inside;}

Values

Inside, outside

List – Shorthand Property

List

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Sample code

ul {list-style: square inside url(“sqpurple.gif”);}

When using the shorthand property, the order of the property values are:

List-style-type, list-style-position, list-style-image

If any of the property values above are missing, the default value for the

missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more

interesting.

Anything added to the or tag affects the entire list, while properties added to the tag will affect the individual list items. See the

example below:

Sample code

ol { width:100%; background:#ff9999; padding:20px;}

ul { width:100%; background:#3399ff; padding:20px;}

ol li{background:#ffe5e5; padding:5px; margin-left:35px;}

ul li{background:#cce5ff; margin:5px;}

TABLETABLETABLETABLE

Border

To specify table borders in CSS, use the border property.

The example below specifies a black border for , , and

elements;

Sample code

table, th, td {border:1px solid black;}

Border-collapse

The border-collapse property sets whether the table borders should be

collapsed into a single border:

Sample code

table {border-collapse:separate;}

table, th, td {border:1px solid black;}

Values

collapse,

separate,

inherit

Table Width And Height

Width/Height

Width and height of a table are defined by the width and height properties.

The example helow sets the width of the table to 100%, and the height of

the element to 50px:

table { width:100%;}

th {height:50px;}

Horizontal Alignment

Text-align

The text-align property sets the horizontal alignment (like left, right, or

center) of the content in or .

By default, the content of elements are center-aligned and the content

of elements are left-aligned.

The following example aligns the text in element to the left:

th{text-align:left;}

Vertical Alignment

Vertical-align

The vertical-align property sets the vertical alignment (like top, bottom and

middle) of the content in or .

By default, the vertical alignment of the content in table is middle for both

and elements.

The following example sels the vertical text alignment to bottom for

elements:

Sample code

td {height:50px; vertical-align:bottom;}

Border-spacing

Specifies the distance between the borders of adjacent cells.

Caption-side

Specifies the placement of a table caption relative to the table

Values

top (default),

right,

bottom,

left,

inherit

Sample code

Table {caption-side:bottom;}

Empty-cells

Specifies whether or not to display borders and background on empty cells

in a table

Values

show(default),

hide,

inherit.

LINKSLINKSLINKSLINKS

Links can be styled differently depending on what state they are in.

The four states of links are: a:link – a normal, unvisited link a:visited – a link the user has visited a:hover – a link when the user mouses over it a:active – a link the moment it is clicked

Sample code

a:link {color:red;}

a:visited {color:green;}

a:hover {color:hotpink;}

a:active {color:pink;}

Remove Underline From The Link

The text-decoration property is mostly used to remove underline from links:

a:link {text-decoration:none;}

a:link {text-decoration:underline;}

Use Background Color For The Link

The background-color property can be used to specify a background color

for links:

a:link {background-color:orange;}

a:visited {background-color:maroon;

PART PART PART PART ---- VIVIVIVI

BOX MODELBOX MODELBOX MODELBOX MODEL

1.1.1.1. Height and Width

2.2.2.2. Padding

3.3.3.3. Border

4.4.4.4. Margin

5.5.5.5. Outline

BOX MODELBOX MODELBOX MODELBOX MODEL

There are two types of elements in HTML:

1.1.1.1. Block-level elements, and 2.2.2.2. Inline elements.

1.1.1.1. Block-level Elements - A block-level element always starts on a new

line and takes up the full width available. It stretches out to the left and

right as far as it can by taking up the full width available.

Example of block-level elements:

-

2.2.2.2. Inline Elements - An inline element does not start on a new line and

only takes up as much width as necessary.

Example of inline elements:

CSS Boxes

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements.

The type of the box generated in CSS depends on the value of the display property. We will discuss about display property in the next section.

The term “box model” is used when talking about design and layout. Every element that is rendered by the browser is essentially a box. It consists of margins, borders, padding, and the actual content. See the below given

picture.

Different Parts Of The Element:

Content area

Content area is at the center of box. It holds the content of the box such as text and images. In the above example text ‘the’ is the content.

Padding

Padding is transparent space surrounding content area. Padding space

around the content can be specified by using padding property.

Border

A border that goes around the padding and content can be applied by

using border property. Every border is displayed with its specified width, so the space occupied by the border around padding area depends on the value declared in through the property.

Margin

Margin is the transparent area outside the border. Default margin area can

be changed using margin property.

The box model allows us to add a border around elements, and to define space between elements. In order to set the width and height of an element correctly in all browsers, you need to know the box model works.

The following sample code explains the idea of different boxes:

div {width:300px; padding:25px; border:25px solid navy;

margin:25px 10px 25px 25px;}

Refer the below given picture that stages basic style properties associated

with box model.

Note important: When you set

the width and height properties

of an element with CSS, you just

set the width and height of the

content area.

Height And Width Of The Content Area

As mentioned earlier; a block level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the special width, and the remaining space will be split equally between the two margins.

HEIGHTHEIGHTHEIGHTHEIGHT

The height property sets the height of the content area. Note that, it

doesn’t change height of the content. See the below given code:

Sample code:

h1{height:5%;background-color:red;text-align:center;}

Min-height

The min-height property allows authors to constrain box heights to a

certain range.

Max-height

The min-height property allows authors to constrain box heights to a certain range.

WIDTHWIDTHWIDTHWIDTH

The width property sets the width of the content area. Note that, it doesn’t

change width of the content. Add width property to above code as below:

Sample code:

h1{width:10%;height:5%;background-color:red;text-

align:center;}

Min-width

The min-width property allows authors of page to constrain content widths

to a certain range.

Max-width

The max-width property allows authors of page to constrain content widths

to a certain range.

The properties height, min-height, max-height, width, min-width and max-width set the height/width of the area inside padding, border, and margin of

the element. It don’t include padding, borders, or margins.

Sample code

div {width:500px;height:100px; border:3px;}

PADDINGPADDINGPADDINGPADDING

Padding-top

Padding-top property allows the author of page to specify top padding space.

Padding-right

Padding-right property allows the author of page to specify right padding space.

Padding-bottom

Padding-bottom property allows the author of page to specify bottom padding space.

Padding-left

Padding-left property allows the author of page to specify left padding

space. Sample code

h1{padding-top:14px;padding-bottom:10px;background-

color:red;}

Padding

Padding is the shortcut property used for set all padding properties in one declaration.

The order of values for padding is: padding-top,padding-right,padding-bottom,padding-left

Sample code

p {padding:2cm 4cm 2cm 4cm;}

If two or three values are given, missing values are taken from the

opposite side

BORDERSBORDERSBORDERSBORDERS

Border-style

The border-style property defines the style of the border. Various styles with its value and the function are given below:

None - no border is drawn

Dotted - the border is a dotted line drawn on top, bottom, left or right of the

background of the element

Dashed - the border is a dashed line

Solid - the border is a solid line

Double - the border is a double line

Groove - a 3D groove is drawn in colors based on the ‘color’ value

Ridge - a 3D ridge is drawn in colors based on the ‘color’ value

Inset - a 3D inset is drawn in colors based on the ‘color’ value

Sample code

H1 {border-style:solid;}

Border-width

The border-width property defines the thickness of the four borders around padding area. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thick, medium, or thin.

The border-width property can have from one to four values (for the top

border, right border, bottom border, and the left border).

Sample code

H1 {border-width:thick;}

P {border-width:2px 10px 4px 20px;}

Border-color

The border-color property is used to set the color of the four borders. The

color can be set by:

name - specify a color name, like “red”

RGB - specify a RGB value, like “rgb(255,0,0)”

Hex - specify a hex value, like “#ff3399”

The border-color property can have from one to four values (for the top

border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Sample code

H1 {border-color:#668fc0;}

Border – individual sides

From the examples above you have seen that it is possible to specify a

different border for each side. In CSS, there are also properties for

specifying each of the borders (top, right, bottom, and left).

Sample code

H1 {

border-top-style:dotted;

border-bottom-style:solid;

border-bottom-width:10px;

border-bottom-color:10px;

}

Border

As you can see from the examples above, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the individual border properties in one property. The border property is a shorthand property for the following individual border properties:

Border-width

Border-style (required)

Border-color

Sample code

H1 {border:5px solid red;}

All Border Properties

Border

Border-top

Border-top-width

Border-top-style

Border-top-color

Border-right

Border-right-width

Border-right-style

Border-right-color

Border-bottom

Border-bottom-width

Border-bottom-style

Border-bottom-color

Border-left

Border-left-width

Border-left-style

Border-left-color

MARGINSMARGINSMARGINSMARGINS

CSS has properties for specifying the margin for each side of an element:

Margin-top

To set top margin for the element

Margin-right

To set right margin for the element

Margin-bottom

To set bottom margin for the element

Margin-left

To set left margin for the element

Sample code

h1 {margin-top:2cm;}

p {margin-bottom:50%;}

Margin

Margin is the shortcut property to set all margins in one declaration. The

order of values for margin is:

Margin-top, margin-right, margin-bottom, margin-left

Sample code

p {margin:2cm 4cm 2cm 4cm;}

h1 {margin:auto;}

All the margin properties can have the following values:

Auto - the browser calculates the margin Length - specify a margin in px,pt, cm, etc. % - specifies a margin in % of the width of the containing element Inherit - specifies that the margin should be inherited from the parent

element

OUTLINEOUTLINEOUTLINEOUTLINE

Outline is like a border surrounded to the border of the element. CSS has different outline properties as it is there to the border.

All outline properties

Outline

Outline-top

Outline-top-width

Outline-top-style

Outline-top-color

Outline-right

Outline-right-width

Outline-right-style

Outline-right-color

Outline-bottom

Outline-bottom-width

Outline-bottom-style

Outline-bottom-color

Outline-left

Outline-left-width

Outline-left-style

Outline-left-color

Sample code

p {outline:1px solid black; border:2px dotted blue;}

PART PART PART PART ---- VIIVIIVIIVII

LAYOUT PROPERTIESLAYOUT PROPERTIESLAYOUT PROPERTIESLAYOUT PROPERTIES

1.1.1.1. Display/Visuality

2.2.2.2. Position

3.3.3.3. Float/Clear

DISPLAY DISPLAY DISPLAY DISPLAY

Display/Visibility

The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Hiding An Element

Display: none;

Display:none is commonly used with JavaScript to hide and show elements without deleting or recreating them. The element use display:none; as its default. Display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

Visibility:hidden;

Also, visibility property can be set to hidden to hide an element; but it will take up the same space as before. The element will be hidden, but still

affect the layout.

Display – Block and Inline

A block element is an element that takes up the full width available, and

has a line break before and after it.

An inline element only takes up as much width as necessary, and does not force line breaks.

Override The Default Display Value

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web

standards.

The following example displays elements as inline elements and

elements as block elements:

Sample code

li {display:inline;}

span {display:block;}

Predefined values for Display property

Inline,

block,

list-item,

marker,

none.

POSITIONING POSITIONING POSITIONING POSITIONING

Position

The positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when

an element’s content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

There are four different positioning methods.

Static Positioning

HTML elements are positioned static by default. A static positioned

element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and

right properties.

Fixed Positioning

An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled.

Sample code p.pos_fixed {position:fixed; top30px; right:5px;}

Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.

Fixed positioned elements are removed from the normal flow.

Fixed positioned elements can overlap other elements.

Relative Positioning

A relative element is positioned relative to its normal position.

Sample code

h2.normalRelative {position:relative;}

h2.left-20Relative {position:relative; left:-20px;}

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. Relatively positioned elements are often used as

container blocks for absolutely positioned elements.

Absolute Positioning

An absolute position element is positioned relative to the first element that has a position other than static. If no such element is found, the containing block is .

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned

element does not exist.

Absolutely positioned elements can overlap other elements.

Overlapping elements

When elements are positioned outside the normal flow, they can overlap

other elements.

The z-index property specifies the stack order of an element (which

element should be placed in from of, or behind, the others).

An element can have a positive or negative stack order.

Sample code

img {position:absolute; left:0px; top:0px; x-index:-1;}

Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

All CSS Positioning Properties

Bottom - sets the bottom margin edge for a positioned box Values - auto, length, %, inherit

Clip - clips an absolutely positioned element shape Values - auto, inherit

Cursor - specifies the type of cursor to be displayed Values - , auto, crosshair, default,

pointer, move, e-resize, ne-resize, nw-resize,

n-resize, se-resize, sw-resize, s-resize, w-

resize, text, wait, help

Left - sets the left margin edge for a positioned box Values - auto, length, %, inherit

Overflow - specifies what happens if content overflows an element’s

box

Values - auto, hidden, scroll, visible, inherit

Position – specifies the type of positioning for an element

Values - absolute, fixed, relative, static,

inherit

Right - sets the right margin edge for a positioned box

Values - auto, length, %, inherit

Top - sets the top margin edge for a positioned box

Values - auto, length, %, inherit

z-index - sets the stack order of an element

Values - , auto, inherit, none

FLOATFLOATFLOATFLOAT

What is CSS Float?

With CSS float, an element can be pushed to the left or right, allowing

other elements to wrap around it.

Float is often used with images, but it is also useful when working with

layouts.

How elements Float?

Elements are floated horizontally, this means that an element can only be

floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The

elements after the floating element will flow around it.

The elements before the floating element will not be affected. If an image

is floated to the right, a following text flows around it, to the left.

Sample code:

Img {float:right;}

FLOATING ELEMENTS NEXT TO EACH OTHER

Float

If you place several floating elements after each other, they will float next

to each other if there is room.

Here I have made an image gallery using the float property:

Sample code:

.gallery{float:left;width:110px;height:90px;margin:5px;}

TURNING OFF FLOAT USING CLEAR

Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating

el