CSS

What is CSS?
CSS stands for Cascading Style Sheets, is a simple design language used to control
the style of a web pages in a simple and easy way.

CSS handles the look and feel part of a web page. Using CSS, you can control the
color 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, and layout designs, in
display for different devices and screen sizes as well as a variety of other effects.

Advantages of CSS
 CSS saves time − you can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and apply it
 Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
 Easy maintenance − To make a global change, simply change the style, and
all elements in all the web pages will be updated automatically.
 Multiple Device Compatibility − Style sheets allow content to be optimized
for more than one type of device.
 Offline Browsing − CSS can store web applications locally with the help of an
offline [Link] of this, we can view offline [Link] cache also ensures
faster loading and better overall performance of the website.
 Platform Independence − The Script offer consistent platform independence
and can support latest browsers as well.

Who Creates and Maintains CSS?

CSS was invited by HåkonWium Lie on October 10, 1994 and maintained through a
group of people within the W3C called the CSS Working Group.

CSS - Syntax

1
 CSS
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 three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could
be any tag like <h1> or <table> etc.
 Property - A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could
be color, border etc.
 Value - Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector{property: value }

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the
value of that property.

You can define selectors in various simple ways based on your comfort. Let me put
these selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a
color to all level 1 headings:

h1 {

2
 CSS
color:#36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type −

*{
color:#000000;
}

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a
particular element. As given in the following example, style rule will apply to <em>
element only when it lies inside <ul> tag.

ulem{
color:#000000;
}

The Class Selectors

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

.black {
color:#000000;
}

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

<pclass="center bold">
This para will be styled by the classescenter and bold.

3
 CSS
</p>

The ID Selectors
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;
}

The Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is
very similar to descendants but have different functionality. Consider the following
example −

Body > p {
color:#000000;
}

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 −

input[type ="text"]{
color:#000000;
}

The advantage to this method is that the <input type = "submit" /> element is
unaffected, and the color applied only to the desired text fields.

4
 CSS
Multiple 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 semi colon (;). You can keep
them in a single line or multiple lines. For better readability we keep them into separate
lines.

Grouping 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.

You can combine the various id selectors together as shown below −

5
 CSS
#content, #footer, #supplement {
position: absolute;
left:510px;
width:200px;
}

CSS - Inclusion
There are four ways to associate styles with your HTML document. Most commonly
used methods are inline CSS and External CSS.

Embedded CSS - The <style> Element

You can put your CSS rules into an HTML document using the <style> element. This
tag is placed inside <head>...</head> tags. Rules defined using this syntax will be
applied to all the elements available in the document. Here is the generic syntax −

Following is the example of embed CSS based on the above syntax −

<!DOCTYPE html>
<html>
<head>

<styletype="text/css"media="all">
body{
background-color: linen;
}
h1 {
color: maroon;
margin-left:40px;
}
</style>

</head>

6
 CSS
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Attributes
Attributes associated with <style> elements are −

Attribut Value Description

e

type text/css Specifies the style sheet language as a content-type (MIME

type). This is required attribute.

Inline CSS - The style Attribute

You can use style attribute of any HTML element to define style rules. These rules will
be applied to that element only. Here is the generic syntax −

<elementstyle="...style rules....">

Attributes
Attribut Value Description
e

style style rules The value of style attribute is a combination of style

declarations separated by semicolon (;).

Following is the example of inline CSS based on the above syntax −

<html>
<head>

7
 CSS
</head>
<body>
<h1style="color:#36C;"> This is inline CSS </h1>
</body>
</html>

External CSS - The <link> Element

The <link> element can be used to include an external stylesheet file in your HTML
document.

An external style sheet is a separate text file with .css extension. You define all the
Style rules within this text file and then you can include this file in any HTML document
using <link> element.

Here is the generic syntax of including external CSS file −

<head>
<link type = "text/css" href = "..." media = "..." />
</head>

Attributes
Attributes associated with <style> elements are −

Attribut Value Description

e

type text/css Specifies the style sheet language as a content-type (MIME

type). This attribute is required.

href URL Specifies the style sheet file having Style rules. This
attribute is a required.

h1, h2, h3 {
color:#36C;
font-weight: normal;

8
 CSS
letter-spacing:.4em;
margin-bottom:1em;
text-transform: lowercase;
}

Now you can include this file [Link] in any HTML document as follows −

<head>
<linktype="text/css"href="[Link]"media=" all"/>
</head>

CSS Rules Overriding

We have discussed four ways to include style sheet rules in a an HTML document.
Here is the rule to override any Style Sheet Rule.

 Any inline style sheet takes highest priority. So, it will override any rule defined
in <style>...</style> tags or rules defined in any external style sheet file.
 Any rule defined in <style>...</style> tags will override rules defined in any
external style sheet file.
 Any rule defined in external style sheet file takes lowest priority, and rules
defined in this file will be applied only when above two rules are not applicable.

CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it
is very easy to comment any part in style sheet. You can simple put your comments
inside /*.....this is a comment in style sheet.....*/.

You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.

<!DOCTYPE html>
<html>
<head>
<style>

9
 CSS
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

CSS - Measurement Units

CSS supports a number of measurements including absolute units such as inches,
centimeters, points, and so on, as well as relative measures such as percentages and
em units. You need these values while specifying various measurements in your Style
rules e.g border = "1px solid red".

We have listed out all the CSS Measurement Units along with proper Examples −

Unit Description Example

% Defines a measurement as a percentage relative to p {font-size:

another value, typically an enclosing element. 16pt; line-
height: 125%;}

cm Defines a measurement in centimeters. div {margin-

bottom: 2cm;}

em A relative measurement for the height of a font in em p {letter-

spaces. Because an em unit is equivalent to the size of a spacing: 7em;}
given font, if you assign a font to 12pt, each "em" unit

10
 CSS
would be 16px; thus, 2em would be 32px.

(emphemeral  unit)

px Defines a measurement in screen pixels. p {padding:

25px;}

CSS - Colors
CSS uses color values to specify a color. Typically, these are used to set a color either
for the foreground of an element (i.e., its text) or else for the background of the
element. They can also be used to affect the color of borders and other decorative
effects.

You can specify your color values in various formats. Following table lists all the
possible formats −

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

These formats are explained in more detail in the following sections −

CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a
red value, the next two are a green value(GG), and the last are the blue value(BB).

11
 CSS
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the
examples to use Hexadecimal notation.

CSS Colors - Short Hex Codes

This is a shorter form of the six-digit notation. In this format, each digit is replicated to
arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.

Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the
examples to use Hexadecimal notation.

CSS Colors - RGB Values

This color value is specified using the rgb( ) property. This property takes three values,
one each for red, green, and blue. The value can be an integer between 0 and 255 or a
percentage.

Following is the example to show few colors using RGB values.

CSS - Background
How to set backgrounds of various HTML elements. You can set the following
background properties of an element −

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

element.
 The background-image property is used to set the background image of an
element.
 The background-repeat property is used to control the repetition of an image
in the background.
 The background-position property is used to control the position of an image
in the background.

Set the Background Color

Set the background color for an element using background-color property.

<html>

12
 CSS
<head>
<body>
<pstyle="background-color:yellow;">
This text has a yellow background color.</p>
</body>
</head>
<html>

Set the Background Image

We can set the background image by calling local stored images as shown below

<html>
<head>
<style>
body {
background-image:url("/css/images/[Link]");
background-color:#cccccc;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</head>
<html>

Repeat the Background Image

The following example demonstrates how to repeat the background image if an image
is small. You can use no-repeat value for background-repeatproperty if you don't want
to repeat an image, in this case image will display only once.

By default background-repeat property will have repeat value.

<html>

13
 CSS
<head>
<style>
body{
background-image:url("/css/images/[Link]");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>ELearnInfotech</p>
</body>
</html>

The following example which demonstrates how to repeat the background image
vertically.

<html>
<head>
<style>
body{
background-image:url("/css/images/[Link]");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>ELearnInfotech</>
</body>
</html>

The following example demonstrates how to repeat the background image horizontally.

<html>
<head>

14
 CSS
<style>
body{
background-image:url("/css/images/[Link]");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>ELearnInfotech</>
</body>
</html>

Set the Background Image Position

The following example demonstrates how to set the background image position 100
pixels away from the left side.

<html>
<head>
<style>
body{
background-image:url("/css/images/[Link]");
background-position:100px;
}
</style>
</head>
<body>
<p>ELearnInfotech</>
</body>
</html>

The following example demonstrates how to set the background image position 100
pixels away from the left side and 200 pixels down from the top.

15
 CSS
<html>
<head>
<style>
body{
background-image:url("/css/images/[Link]");
background-position:100px200px;
}
</style>
</head>
<body>
<p>ELearnInfotech</>
</body>
</html>

Set the Background Attachment

Background attachment determines whether a background image is fixed or scrolls
with the rest of the page.

The following example demonstrates how to set the fixed background image.

<!DOCTYPE html>
<html>
<head>

<style>
body {
background-image:url('/css/images/[Link]');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>

16
 CSS
</head>
<body>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

The following example demonstrates how to set the scrolling background image.

<!DOCTYPE html>
<html>
<head>

<style>
body {
background-image:url('/css/images/[Link]');
background-repeat:no-repeat;
background-attachment:fixed;
background-attachment:scroll;
}.
</style>

</head>
<body>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

17
 CSS
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>

CSS - Fonts
This chapter teaches you how to set fonts of a content, available in an HTML element.
You can set following font properties of an element −

 The font-family property is used to change the face of a font.

 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a
font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font
properties.

Set the Font Family

Following is the example, which demonstrates how to set the font family of an element.
Possible value could be any font family name.

<html>
<head>
</head>
<body>
<pstyle="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font

18
 CSS
depending on which font you have at your system.
</p>
</body>
</html>

Set the Font Style

Following is the example, which demonstrates how to set the font style of an element.
Possible values are normal, italic and oblique.

<html>
<head>
</head>
<body>
<pstyle="font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>

It will produce the following result −

Set the Font Variant

The following example demonstrates how to set the font variant of an
element. Possible values are normal and small-caps.

<html>
<head>
</head>
<body>
<pstyle="font-variant:small-caps;">
This text will be rendered as small caps
</p>

19
 CSS
</body>
</html>

It will produce the following result −

Set the Font Weight

The following example demonstrates how to set the font weight of an element. The
font-weight property provides the functionality to specify how bold a font is. Possible
values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800,
900.

<html>
<head>
</head>
<body>
<pstyle="font-weight:bold;">This font is bold.</p>
<pstyle="font-weight:bolder;">This font is bolder.</p>
<pstyle="font-weight:500;">This font is 500 weight.</p>
</body>
</html>

Set the Font Size

The following example demonstrates how to set the font size of an element. The font-
size property is used to control the size of fonts. Possible values could be  xx-small, x-
small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.

<html>
<head>
</head>
<body>
<pstyle="font-size:20px;">This font size is 20 pixels</p>
<pstyle="font-size:small;">This font size is small</p>

20
 CSS
<pstyle="font-size:large;">This font size is large</p>
</body>
</html>

CSS - Text
This chapter teaches you how to manipulate text using CSS properties. You can set
following text properties of an element −

 The color property is used to set the color of a text.

 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the
letters that make up a word.
 The word-spacing property is used to add or subtract space between the words
of a sentence.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and strikethrough
text.
 The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
 The text-shadow property is used to set the text shadow around a text.

Set the Text Color

The following example shows how to set the text color. Possible value could be any
color name in any valid format.

<html>
<head>
</head>
<body>
<pstyle="color:red;">
This text will be written in red.
</p>

21
 CSS
</body>
</html>

It will produce the following result −

Set the Text Direction

The following example demonstrates how to set the direction of a text. Possible values
are ltr or rtl.

<html>
<head>
</head>
<body>
<pstyle="direction:rtl;">
This text will be renedered from right to left
</p>
</body>
</html>

It will produce the following result −

Set the Space between Characters

The following example demonstrates how to set the space between characters.
Possible values are normal or a number specifying space..

<html>
<head>
</head>
<body>
<pstyle="letter-spacing:5px;">
This text is having space between letters.
</p>
</body>

22
 CSS
</html>

It will produce the following result −

Set the Space between Words

The following example demonstrates how to set the space between words. Possible
values are normal or a number specifying space.

<html>
<head>
</head>
<body>
<pstyle="word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>

Set the Text Alignment

The following example demonstrates how to align a text. Possible values are left, right,
center, justify.

<html>
<head>
</head>
<body>
<pstyle="text-align:right;">
This will be right aligned.
</p>

<pstyle="text-align:center;">
This will be center aligned.

23
 CSS
</p>

<pstyle="text-align:left;">
This will be left aligned.
</p>

</body>
</html>

Decorating the Text

The following example demonstrates how to decorate a text. Possible values are none,
underline, overline, line-through.

<html>
<head>
</head>
<body>
<pstyle="text-decoration:underline;">
This will be underlined
</p>

<pstyle="text-decoration:line-through;">
This will be striked through.
</p>

<pstyle="text-decoration:overline;">
This will have a over line.
</p>

<pstyle="text-decoration:blink;">
This text will have blinking effect
</p>

24
 CSS
</body>
</html>

Set the Text Cases

The following example demonstrates how to set the cases for a text. Possible values
are none, capitalize, uppercase, lowercase.

<html>
<head>
</head>
<body>
<pstyle="text-transform:capitalize;">
This will be capitalized
</p>

<pstyle="text-transform:uppercase;">
This will be in uppercase
</p>

<pstyle="text-transform:lowercase;">
This will be in lowercase
</p>
</body>

</html>

Set the White Space between Text

The following example demonstrates how white space inside an element is handled.
Possible values are normal, pre, nowrap.

<html>
<head>

25
 CSS
</head>
<body>
<pstyle="white-space:pre;">
This text has a line break and the white-space pre setting tells the browser to
honor
it just like the HTML pre tag.</p>
</body>
</html>

Set the Text Shadow

The following example demonstrates how to set the shadow around a text. This may
not be supported by all the browsers.

<html>
<head>
</head>
<body>
<pstyle="text-shadow:4px4px8px blue;">
If your browser supports the CSS text-shadow property, this text will have a
blue shadow.
</p>
</body>
</html>

CSS - Using Images

Images play an important role in any webpage. Though it is not recommended to
include a lot of images, but it is still important to use good images wherever required.

CSS plays a good role to control image display. You can set the following image
properties using CSS.

 The border property is used to set the width of an image border.

 The height property is used to set the height of an image.

26
 CSS
 The width property is used to set the width of an image.
 The -moz-opacity property is used to set the opacity of an image.

The Image Border Property

The border property of an image is used to set the width of an image border. This
property can have a value in length or in %.

A width of zero pixels means no border.

Here is the example −

<html>
<head>
</head>
<body>
<imgstyle="border:0px;"src="/css/images/[Link]"/>
<br/>
<imgstyle="border:3px dashed red;"src="/css/images/[Link]"/>
</body>
</html>

The Image Height Property

The height property of an image is used to set the height of an image. This property
can have a value in length or in %. While giving value in %, it applies it in respect of the
box in which an image is available.

Here is an example −

<html>
<head>
</head>
<body>
<imgstyle="border:1px solid red; height:100px;"src="/css/images/[Link]"/>
<br/>

27
 CSS
<imgstyle="border:1px solid red; height:50%;"src="/css/images/[Link]"/>
</body>
</html>

The Image Width Property

The width property of an image is used to set the width of an image. This property can
have a value in length or in %. While giving value in %, it applies it in respect of the box
in which an image is available.

Here is an example −

<html>
<head>
</head>
<body>
<imgstyle="border:1px solid red; width:150px;"src="/css/images/[Link]"/>
<br/>
<imgstyle="border:1px solid red; width:100%;"src="/css/images/[Link]"/>
</body>
</html>

CSS - Links
This chapter teaches you how to set different properties of a hyper link using CSS. You
can set following properties of a hyper link −

We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

 The :link signifies unvisited hyperlinks.

 The :visited signifies visited hyperlinks.
 The :hover signifies an element that currently has the user's mouse pointer
hovering over it.
 The :active signifies an element on which the user is currently clicking.

28
 CSS
<style type="text/css">

a:link {color: #000000}

a:visited {color: #006600}

a:hover {color: #FFCC00}

a:active {color: #FF00CC}

</style>

CSS - Tables
This tutorial will teach you how to set different properties of an HTML table using CSS.
You can set following properties of a table −

 The border-collapse specifies whether the browser should control the

appearance of the adjacent borders that touch each other or whether each cell
should maintain its style.
 The border-spacing specifies the width that should appear between table cells.
 The empty-cells specifies whether the border should be shown if a cell is
empty.
 The table-layout allows browsers to speed up layout of a table by using the
first width properties it comes across for the rest of a column rather than having
to load the whole table before rendering it.

The border-spacing Property

The border-spacing property specifies the distance that separates adjacent cells'.
borders. It can take either one or two values; these should be units of length.

If you provide one value, it will applies to both vertical and horizontal borders. Or you
can specify two values, in which case, the first refers to the horizontal spacing and the
second to the vertical spacing −

<style type="text/css">

/* If you provide one value */

[Link] {border-spacing:10px;}

/* This is how you can provide two values */

29
 CSS
[Link] {border-spacing:10px; 15px;}

</style>

Now let's modify the previous example and see the effect −

</html>

The table-layout Property

The table-layout property is supposed to help you control how a browser should render
or lay out a table.

This property can have one of the three values: fixed, auto or inherit.

The following example shows the difference between these properties.

<html>
<head>

<styletype="text/css">
[Link]{
table-layout:auto
}
[Link]{
table-layout:fixed
}
</style>

</head>
<body>

<tableclass="auto"border="1"width="100%">
<tr>
<tdwidth="20%">1000000000000000000000000000</td>
<tdwidth="40%">10000000</td>

30
 CSS
<tdwidth="40%">100</td>
</tr>
</table>
<br/>

<tableclass="fixed"border="1"width="100%">
<tr>
<tdwidth="20%">1000000000000000000000000000</td>
<tdwidth="40%">10000000</td>
<tdwidth="40%">100</td>
</tr>
</table>

</body>
</html>

It will produce the following result −

CSS - Borders
The border properties allow you to specify how the border of the box representing an
element should look. There are three properties of a border you can change:

 The border-color specifies the color of a border.

 The border-style specifies whether a border should be solid, dashed line,
double line, or one of the other possible values.
 The border-width specifies the width of a border.

The border-color Property

The border-color property allows you to change the color of the border surrounding an
element. You can individually change the color of the bottom, left, top and right sides of
an element's border using the properties −

 border-bottom-color changes the color of bottom border.

 border-top-color changes the color of top border.

31
 CSS
 border-left-color changes the color of left border.
 border-right-color changes the color of right border.

The following example shows the effect of all these properties −

<html>
<head>

<styletype="text/css">
p.example1{
border:1px solid;
border-bottom-color:#009900;/* Green */
border-top-color:#FF0000;/* Red */
border-left-color:#330000;/* Black */
border-right-color:#0000CC;/* Blue */
}
p.example2{
border:1px solid;
border-color:#009900;/* Green */
}
</style>

</head>
<body>

<pclass="example1">
This example is showing all borders in different colors.
</p>

<pclass="example2">
This example is showing all borders in green color only.
</p>

32
 CSS
</body>
</html>

The border-style Property

The border-style property allows you to select one of the following styles of border −

 none: No border. (Equivalent of border-width:0;)

 solid: Border is a single solid line.
 dotted: Border is a series of dots.
 dashed: Border is a series of short lines.
 double: Border is two solid lines.
 groove: Border looks as though it is carved into the page.
 ridge: Border looks the opposite of groove.
 inset: Border makes the box look like it is embedded in the page.
 outset: Border makes the box look like it is coming out of the canvas.
 hidden: Same as none, except in terms of border-conflict resolution for table
elements.

You can individually change the style of the bottom, left, top, and right
borders of an element using the following properties −

 border-bottom-style changes the style of bottom border.

 border-top-style changes the style of top border.
 border-left-style changes the style of left border.
 border-right-style changes the style of right border.

The following example shows all these border styles −

<html>
<head>
</head>

<body>.
<pstyle="border-width:4px;border-style:none;">
This is a border with none width.

33
 CSS
</p>

<pstyle="border-width:4px;border-style:solid;">
This is a solid border.
</p>

<pstyle="border-width:4px;border-style:dashed;">
This is a dahsed border.
</p>

<pstyle="border-width:4px;border-style:double;">
This is a double border.
</p>

<pstyle="border-width:4px;border-style:groove;">
This is a groove border.
</p>

<pstyle="border-width:4px;border-style:ridge">
This is aridge border.
</p>

<pstyle="border-width:4px;border-style:inset;">
This is a inset border.
</p>

<pstyle="border-width:4px;border-style:outset;">
This is a outset border.
</p>

<pstyle="border-width:4px;border-style:hidden;">
This is a hidden border.

34
 CSS
</p>

<pstyle="border-width:4px;border-top-style:solid;
border-bottom-style:dashed;border-left-style:groove;border-right-style:double;">
This is aa border with four different styles.
</p>
</body>

</html>

The border-width Property

The border-width property allows you to set the width of an element
borders. The value of this property could be either a length in px, pt or cm
or it should be set to thin, medium or thick.

You can individually change the width of the bottom, top, left, and right
borders of an element using the following properties −

 border-bottom-width changes the width of bottom border.

 border-top-width changes the width of top border.
 border-left-width changes the width of left border.
 border-right-width changes the width of right border.

The following example shows all these border width −

<html>
<head>
</head>
<body>
<pstyle="border-width:4px;border-style:solid;">
This is a solid border whose width is 4px.
</p>

<pstyle="border-width:4pt;border-style:solid;">

35
 CSS
This is a solid border whose width is 4pt.
</p>

<pstyle="border-width:thin;border-style:solid;">
This is a solid border whose width is thin.
</p>

<pstyle="border-width:medium;border-style:solid;">
This is a solid border whose width is medium;
</p>

<pstyle="border-width:thick;border-style:solid;">
This is a solid border whose width is thick.
</p>

<pstyle="border-bottom-width:4px;border-top-width:10px;
border-left-width:2px;border-right-width:15px;border-style:solid;">
This is aa border with four different width.
</p>
</body>
</html>

It will produce the following result −

CSS - Margins
The margin property defines the space around an HTML element. It is possible to use
negative values to overlap content.

The values of the margin property are not inherited by the child elements. Remember
that the adjacent vertical margins (top and bottom margins) will collapse into each
other so that the distance between the blocks is not the sum of the margins, but only
the greater of the two margins or the same size as one margin if both are equal.

36
 CSS
We have the following properties to set an element margin.

 The margin specifies a shorthand property for setting the margin properties in

one declaration.
 The margin-bottom specifies the bottom margin of an element.
 The margin-top specifies the top margin of an element.
 The margin-left specifies the left margin of an element.
 The margin-right specifies the right margin of an element.

Now, we will see how to use these properties with examples.

The Margin Property

The margin property allows you set all of the properties for the four margins in one
declaration. Here is the syntax to set margin around a paragraph −

Here is an example −

<html>
<head>
</head>

<body>
<pstyle="margin:15px; border:1px solid black;">
all four margins will be 15px
</p>

<pstyle="margin:10px2%; border:1px solid black;">

top and bottom margin will be 10px, left and right margin will be 2% of the total
width of the document.
</p>

<pstyle="margin:10px2%-10px; border:1px solid black;">

top margin will be 10px, left and right margin will be 2% of the total width of the
document, bottom margin will be -10px

37
 CSS
</p>

<pstyle="margin:10px2%-10pxauto; border:1px solid black;">

top margin will be 10px, right margin will be 2% of the total width of the document,
bottom margin will be -10px, left margin will be set by the browser
</p>
</body>

</html>

CSS - Lists
Lists are very helpful in conveying a set of either numbered or bullet points. This
chapter teaches you how to control list type, position, style, etc., using CSS.

We have the following five CSS properties, which can be used to control lists:

 The list-style-type allows you to control the shape or appearance of the

marker.
 The list-style-position specifies whether a long point that wraps to a second
line should align with the first line or start underneath the start of the marker.
 The list-style serves as shorthand for the preceding properties.

Now, we will see how to use these properties with examples.

The list-style-type Property

The list-style-type property allows you to control the shape or style of bullet point (also
known as a marker) in the case of unordered lists and the style of numbering
characters in ordered lists.

Here are the values which can be used for an unordered list −

Value Description

none NA

38
 CSS

disc (default) A filled-in circle

circle An empty circle

square A filled-in square

Here are the values, which can be used for an ordered list −

Value Description Example

decimal Number 1,2,3,4,5

decimal-leading- 0 before the number 01, 02, 03, 04, 05

zero

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV, V

lower-greek The marker is lower-greek alpha, beta, gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

39
 CSS
Here is an example −

<html>
<head>
</head>

<body>
<ulstyle="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ulstyle="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<olstyle="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<olstyle="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<olstyle="list-style-type:lower-roman;">
<li>Maths</li>

40
 CSS
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

</html>

It will produce the following result −

The list-style Property

The list-style allows you to specify all the list properties into a single expression. These
properties can appear in any order.

Here is an example −

<html>
<head>
</head>

<body>
<ulstyle="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<olstyle="list-style: outside upper-alpha;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

41
 CSS
</html>

It will produce the following result −

CSS - Paddings
The padding property allows you to specify how much space should appear between
the content of an element and its border −

The value of this attribute should be either a length, a percentage, or the word inherit. If
the value is inherit, it will have the same padding as its parent element. If a percentage
is used, the percentage is of the containing box.

The following CSS properties can be used to control lists. You can also set different
values for the padding on each side of the box using the following properties −

 The padding-bottom specifies the bottom padding of an element.

 The padding-top specifies the top padding of an element.
 The padding-left specifies the left padding of an element.
 The padding-right specifies the right padding of an element.
 The padding serves as shorthand for the preceding properties.

Now, we will see how to use these properties with examples.

The padding-bottom Property

The padding-bottom property sets the bottom padding (space) of an element. This can
take a value in terms of length of %.

Here is an example −

<html>
<head>
</head>

<body>
<pstyle="padding-bottom:15px; border:1px solid black;">

42
 CSS
This is a paragraph with a specified bottom padding
</p>

<pstyle="padding-bottom:5%; border:1px solid black;">

This is another paragraph with a specified bottom padding in percent
</p>
</body>

</html>

It will produce the following result:

CSS - Cursors
The cursor property of CSS allows you to specify the type of cursor that should be
displayed to the user.

One good usage of this property is in using images for submit buttons on forms. By
default, when a cursor hovers over a link, the cursor changes from a pointer to a hand.
However, it does not change form for a submit button on a form

The following table shows the possible values for the cursor property −

Value Description

auto Shape of the cursor depends on the context area it is over. For
example, an 'I' over text, a 'hand' over a link, and so on.

crosshair A crosshair or plus sign

default An arrow

pointer A pointing hand (in IE 4 this value is hand).

move The 'I' bar

43
 CSS
text The I bar.

wait An hour glass.

help A question mark or balloon, ideal for use over help buttons.

<url> The source of a cursor image file.

<html>
<head>
</head>

<body>
<p>Move the mouse over the words to see the cursor change:</p>

<divstyle="cursor:auto">Auto</div>
<divstyle="cursor:crosshair">Crosshair</div>
<divstyle="cursor:default">Default</div>
<divstyle="cursor:pointer">Pointer</div>
<divstyle="cursor:move">Move</div>
<divstyle="cursor:e-resize">e-resize</div>
<divstyle="cursor:ne-resize">ne-resize</div>
<divstyle="cursor:nw-resize">nw-resize</div>
<divstyle="cursor:n-resize">n-resize</div>
<divstyle="cursor:se-resize">se-resize</div>
<divstyle="cursor:sw-resize">sw-resize</div>
<divstyle="cursor:s-resize">s-resize</div>
<divstyle="cursor:w-resize">w-resize</div>
<divstyle="cursor:text">text</div>
<divstyle="cursor:wait">wait</div>
<divstyle="cursor:help">help</div>

44
 CSS
</body>

</html>

It will produce the following result −

CSS - Outlines
Outlines are very similar to borders, but there are few major differences as well −

 An outline does not take up space.

 Outlines do not have to be rectangular.
 Outline is always the same on all sides; you cannot specify different values for
different sides of an element.

You can set the following outline properties using CSS.

 The outline-width property is used to set the width of the outline.

 The outline-style property is used to set the line style for the outline.
 The outline-color property is used to set the color of the outline.
 The outline property is used to set all the above three properties in a single
statement.

The outline-width Property

The outline-width property specifies the width of the outline to be added to the box. Its
value should be a length or one of the values thin, medium, or thick,just like the border-
width attribute.

A width of zero pixels means no outline.

Here is an example −

<html>
<head>
</head>

<body>
<pstyle="outline-width:thin;outline-style:solid;">

45
 CSS
This text is having thin outline.
</p>
<br/>

<pstyle="outline-width:thick;outline-style:solid;">
This text is having thick outline.
</p>
<br/>

<pstyle="outline-width:5px;outline-style:solid;">
This text is having 5x outline.
</p>
</body>

</html>

The outline-style Property

The outline-style property specifies the style for the line (solid, dotted, or dashed) that
goes around an element. It can take one of the following values −

 none: No border. (Equivalent of outline-width:0;)

 solid: Outline is a single solid line.
 dotted: Outline is a series of dots.
 dashed: Outline is a series of short lines.
 double: Outline is two solid lines.
 groove: Outline looks as though it is carved into the page.
 ridge: Outline looks the opposite of groove.
 inset: Outline makes the box look like it is embedded in the page.
 outset: Outline makes the box look like it is coming out of the canvas.
 hidden: Same as none.

Here is an example −

<html>

46
 CSS
<head>
</head>

<body>
<pstyle="outline-width:thin;outline-style:solid;">
This text is having thin solid outline.
</p>
<br/>

<pstyle="outline-width:thick;outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br/>

<pstyle="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>

</html>

The outline-color Property

The outline-color property allows you to specify the color of the outline. Its value should
either be a color name, a hex color, or an RGB value, as with the color and border-
color properties.

<html>
<head>
</head>

<body>
<pstyle="outline-width:thin;outline-style:solid;outline-color:red">

47
 CSS
This text is having thin solid red outline.
</p>
<br/>

<pstyle="outline-width:thick;outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br/>

<pstyle="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>

</html>

The outline Property

The outline property is a shorthand property that allows you to specify values for any of
the three properties discussed previously in any order but in a single statement.

<html>
<head>
</head>

<body>
<pstyle="outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br/>

<pstyle="outline:thick dashed #009900;">

48
 CSS
This text is having thick dashed green outline.
</p>
<br/>

<pstyle="outline:5px dotted rgb(13,33,232);">

This text is having 5x dotted blue outline.
</p>
</body>

</html>

CSS - Dimension
You have seen the border that surrounds every box ie. element, the padding that can
appear inside each box and the margin that can go around them. In this tutorial we will
learn how we can change the dimensions of boxes.

We have the following properties that allow you to control the dimensions of a box.

 The height property is used to set the height of a box.

 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can be.
 The max-width property is used to set the maximum width that a box can be.
 The min-width property is used to set the minimum width that a box can be.

The Height and Width Properties

The height and width properties allow you to set the height and width for boxes. They
can take values of a length, a percentage, or the keyword auto.

<html>
<head>
</head>

49
 CSS
<body>
<pstyle="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>

CSS - Scrollbars
There may be a case when an element's content might be larger than the amount of
space allocated to it. For example, given width and height properties do not allow
enough room to accommodate the content of the element.

CSS provides a property called overflow which tells the browser what to do if the box's
contents is larger than the box itself. This property can take one of the following
values .

Value Description

visible Allows the content to overflow the borders of its containing element.

hidden The content of the nested element is simply cut off at the border of the containing
element and no scrollbars is visible.

scroll The size of the containing element does not change, but the scrollbars are added to
allow the user to scroll to see the content.

<html>
<head>
</head>

<styletype="text/css">
.scroll{

50
 CSS
display:block;
border:1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
</style>

<body>

<p>Example of scroll value:</p>

<divclass="scroll">
I am going to keep lot of content here just to show you how scrollbars works if
there is an overflow in an
element box. This provides your horizontal as well as vertical scrollbars.
</div>
<br/>

<p>Example of auto value:</p>

</body>
</html>

CSS - Visibility
A property called visibility allows you to hide an element from view. You can use this
property along with JavaScript to create very complex menu and very complex
webpage layouts.

You may choose to use the visibility property to hide error messages that are only
displayed if the user needs to see them, or to hide answers to a quiz until the user
selects an option.

51
 CSS
The visibility property can take the values listed in the table that follows −

Value Description

visible The box and its contents are shown to the user.

hidden The box and its content are made invisible, although they still affect the
layout of the page.

<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>

<pstyle="visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>

CSS - Positioning
CSS helps you to position your HTML element. You can put any HTML element at
whatever location you like. You can specify whether you want the element positioned
relative to its natural position in the page or absolute based on its parent element.

Now, we will see all the CSS positioning related properties with examples −

52
 CSS
Relative Positioning
Relative positioning changes the position of the HTML element relative to where it
normally appears. So "left:20" adds 20 pixels to the element's LEFT position.

You can use two values top and left along with the position property to move an HTML

element anywhere in the HTML document.

 Move Left - Use a negative value for left.

 Move Right - Use a positive value for left.

 Move Up - Use a negative value for top.

 Move Down - Use a positive value for top.

<html>
<head>
</head>
<body>
<divstyle="position:relative;left:80px;top:2px;background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>

Absolute Positioning
An element with position: absolute is positioned at the specified coordinates relative
to your screen top-left corner.

You can use two values top and left along with the position property to move an HTML

element anywhere in the HTML document.

 Move Left - Use a negative value for left.

 Move Right - Use a positive value for left.

 Move Up - Use a negative value for top.

 Move Down - Use a positive value for top.

53
 CSS
<html>
<head>
</head>
<body>
<divstyle="position:absolute; left:80px; top:20px;background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>

Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot on the
page, regardless of scrolling. Specified coordinates will be relative to the browser
window.

You can use two values top and left along with the position property to move an HTML

element anywhere in the HTML document.

 Move Left - Use a negative value for left.

 Move Right - Use a positive value for left.

 Move Up - Use a negative value for top.

 Move Down - Use a positive value for top.

<html>
<head>
</head>
<body>
<divstyle="position:fixed; left:80px; top:20px;background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>

54
 CSS
CSS - Layers
CSS gives you opportunity to create layers of various divisions. The CSS layers refer
to applying the z-index property to elements that overlap with each other.

The z-index property is used along with the position property to create an effect of

layers. You can specify which element should come on top and which element should
come at bottom.

A z-index property can help you to create more complex webpage layouts. Following is
the example which shows how to create layers in CSS.

<html>
<head>
</head>
<body>
<divstyle="background-color:red; width:300px; height:100px;position:relative;
top:10px; left:80px; z-index:2">
</div>

<divstyle="background-color:yellow; width:300px; height:100px;position:relative;

top:-60px; left:35px; z-index:1;">
</div>

<divstyle="background-color:green; width:300px; height:100px;position:relative; top:-

220px; left:120px; z-index:3;">
</div>
</body>
</html>

CSS - Pseudo Classes

CSS pseudo-classes are used to add special effects to some selectors. You do not
need to use JavaScript or any other script to use those effects. A simple syntax of
pseudo-classes is as follows −

selector:pseudo-class{property: value}

55
 CSS
CSS classes can also be used with pseudo-classes −

[Link]:pseudo-class{property: value}

The most commonly used pseudo-classes are as follows −

Value Description

:link Use this class to add special style to an unvisited link.

:visited Use this class to add special style to a visited link.

:hover Use this class to add special style to an element when you mouse over
it.

:active Use this class to add special style to an active element.

:focus Use this class to add special style to an element while the element has
focus.

:first- Use this class to add special style to an element that is the first child of
child some other element.

:lang Use this class to specify a language to use in a specified element.

While defining pseudo-classes in a <style>...</style> block, following points should be

noted −

 a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.
 a:active MUST come after a:hover in the CSS definition in order to be effective.
 Pseudo-class names are not case-sensitive.
 Pseudo-class are different from CSS classes but they can be combined.

56
 CSS
The :link pseudo-class
The following example demonstrates how to use the :link class to set the
link color. Possible values could be any color name in any valid format.

<html>
<head>
<styletype="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<ahref="">Black Link</a>
</body>
</html>

The :visited pseudo-class

The following is the example which demonstrates how to use the :visited class to set
the color of visited links. Possible values could be any color name in any valid format.

<html>
<head>
<styletype="text/css">
a:visited {color:#006600}
</style>
</head>
<body>
<ahref="">Click this link</a>
</body>
</html>

This will produce following link. Once you will click this link, it will change its
color to green.

57
 CSS
The :hover pseudo-class
The following example demonstrates how to use the :hover class to change the color of
links when we bring a mouse pointer over that link. Possible values could be any color
name in any valid format.

<html>
<head>
<styletype="text/css">
a:hover {color:#FFCC00}
</style>
</head>
<body>
<ahref="">Bring Mouse Here</a>
</body>
</html>

It will produce the following link. Now you bring your mouse over this link and you will
see that it changes its color to yellow.

The :active pseudo-class

The following example demonstrates how to use the :active class to change the color
of active links. Possible values could be any color name in any valid format.

<html>
<head>
<styletype="text/css">
a:active {color:#FF00CC}
</style>
</head>
<body>
<ahref="">Click This Link</a>
</body>
</html>

It will produce the following link. When a user clicks it, the color changes to pink.

58
 CSS
The :focus pseudo-class
The following example demonstrates how to use the :focus class to change the color of
focused links. Possible values could be any color name in any valid format.

<html>
<head>
<styletype="text/css">
a:focus {color:#0000FF}
</style>
</head>
<body>
<ahref="">Click this Link</a>
</body>
</html>

It will produce the following link. When this link gets focused, its color changes to
orange. The color changes back when it loses focus.

The :first-child pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of
another element and adds special style to that element that is the first child of some
other element.

To make :first-child work in IE <!DOCTYPE> must be declared at the top of document.

For example, to indent the first paragraph of all <div> elements, you could use this
definition −

<html>
<head>

<styletype="text/css">
div> p:first-child
{

59
 CSS
text-indent:25px;
}
</style>

</head>
<body>

<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>

<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>

</body>
</html>

CSS - Pseudo Elements

CSS pseudo-elements are used to add special effects to some selectors. You do not
need to use JavaScript or any other script to use those effects. A simple syntax of
pseudo-element is as follows −

selector:pseudo-element{property: value}

CSS classes can also be used with pseudo-elements −

[Link]:pseudo-element{property: value}

The most commonly used pseudo-elements are as follows −

60
 CSS
Value Description

:first-line Use this element to add special styles to the first line of the text in a
selector.

:first-letter Use this element to add special style to the first letter of the text in a
selector.

:before Use this element to insert some content before an element.

:after Use this element to insert some content after an element.

The :first-line pseudo-element

The following example demonstrates how to use the :first-line element to
add special effects to the first line of elements in the document.

<html>
<head>
<styletype="text/css">
p:first-line { text-decoration: underline;}
[Link]:first-line{ text-decoration: none;}
</style>
</head>
<body>
<pclass="noline"> This line would not have any underline because this belongs to
nline class.</p>

<p>The first line of this paragraph will be underlined as defined in the CSS rule
above. Rest of the lines in this paragraph will remain normal. This example shows how
to use :first-line pseduo element to give effect to the first line of any HTML
element.</p>
</body>

61
 CSS
</html>

The :first-letter pseudo-element

The following example demonstrates how to use the :first-letter element to add special
effects to the first letter of elements in the document.

<html>
<head>
<styletype="text/css">
p:first-letter { font-size:5em;}
[Link]:first-letter{ font-size:10px;}
</style>
</head>
<body>
<pclass="normal"> First character of this paragraph will be normal and will have font
size 10 px;</p>

<p>The first character of this paragraph will be 5em big as defined in the CSS rule
above. Rest of the characters in this paragraph will remain normal. This example
shows how to use :first-letter pseduo element to give effect to the first characters
of any HTML element.</p>
</body>
</html>

The :before pseudo-element

The following example demonstrates how to use the :before element to add some
content before any element.

<html>
<head>
<styletype="text/css">
p:before
{

62
 CSS
content:url(/https/www.scribd.com/images/[Link])
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>

The :after pseudo-element

The following example demonstrates how to use the :after element to add some
content after any element.

<html>
<head>
<styletype="text/css">
p:after
{
content:url(/https/www.scribd.com/images/[Link])
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>

It will produce the following black link −

63
 CSS
CSS - Layouts
Hope you are very comfortable with HTML tables and you are efficient in designing
page layouts using HTML Tables. But you know CSS also provides plenty of controls
for positioning elements in a document. Since CSS is the wave of the future, why not
learn and use CSS instead of tables for page layout purposes?

The following list collects a few pros and cons of both the technologies −

 Most browsers support tables, while CSS support is being slowly adopted.
 Tables are more forgiving when the browser window size changes - morphing
their content and wrapping to accommodate the changes accordingly. CSS
positioning tends to be exact and fairly inflexible.
 Tables are much easier to learn and manipulate than CSS rules.

But each of these arguments can be reversed −

 CSS is pivotal to the future of Web documents and will be supported by most
browsers.
 CSS is more exact than tables, allowing your document to be viewed as you
intended, regardless of the browser window.
 Keeping track of nested tables can be a real pain. CSS rules tend to be well
organized, easily read, and easily changed.

Finally, we would suggest you to use whichever technology makes sense to you and
use what you know or what presents your documents in the best way.

CSS also provides table-layout property to make your tables load much faster.

Following is an example −

<tablestyle="table-layout:fixed;width:600px;">
<trheight="30">
<tdwidth="150">CSS table layout cell 1</td>
<tdwidth="200">CSS table layout cell 2</td>
<tdwidth="250">CSS table layout cell 3</td>
</tr>

64
 CSS
</table>

Sample Column Layout

Here are the steps to create a simple Column Layout using CSS −

Set the margin and padding of the complete document as follows −

<stylestyle="text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>

Now, we will define a column with yellow color and later, we will attach this rule to a
<div>:

<stylestyle="text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>

Upto this point, we will have a document with yellow body, so let us now define another
division inside level0 −

<style style="text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;

65
 CSS
}
-->
</style>

Now, we will nest one more division inside level1, and we will change just background
color −

<stylestyle="text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>

Finally, we will use the same technique, nest a level3 division inside level2 to get the
visual layout for the right column −

<stylestyle="text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>

Complete the source code as follows −

<stylestyle="text/css">
body{
margin:9px9px09px;
padding:0;

66
 CSS
background:#FFF;
}

#level0 {background:#FC0;}

#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}

#level2 {background:#FFF3AC;}

#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}

#main {background:#CCC;}
</style>
<body>
<divid="level0">
<divid="level1">
<divid="level2">
<divid="level3">
<divid="main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>

67
 CSS
</body>

Similarly, you can add a top navigation bar or an ad bar at the top of the
page.

68