Scribd
Upload
24 views

CSS1 S

Uploaded by

Prem Lal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

CSS1 S

Uploaded by

Prem Lal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 38

CSS - Margins

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 −

Live Demo

<html>
<head>
</head>

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

<p style = "margin:10px 2%; 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>

<p style = "margin: 10px 2% -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 </p>

<p style = "margin: 10px 2% -10px auto; 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>

It will produce the following result −


all four margins will be 15px

top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the total width of the document,
bottom margin will be -10px
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

The margin-bottom Property


The margin-bottom property allows you set bottom margin of an element. It can
have a value in length, % or auto.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>

<p style = "margin-bottom: 5%; border:1px solid black;">


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

It will produce the following result −


This is a paragraph with a specified bottom margin

This is another paragraph with a specified bottom margin in percent

The margin-top Property


The margin-top property allows you set top margin of an element. It can have a
value in length, % or auto.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>

<p style = "margin-top: 5%; border:1px solid black;">


This is another paragraph with a specified top margin in
percent </p>
</body>
</html>

It will produce the following result −

This is a paragraph with a specified top margin


This is another paragraph with a specified top margin in percent
The margin-left Property
The margin-left property allows you set left margin of an element. It can have a
value in length, % or auto.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>

<p style = "margin-left: 5%; border:1px solid black;">


This is another paragraph with a specified top margin in
percent </p>
</body>
</html>

It will produce the following result −

This is a paragraph with a specified left margin

This is another paragraph with a specified top margin in percent

The margin-right Property


The margin-right property allows you set right margin of an element. It can have a
value in length, % or auto.

Here is an example −
Live Demo
<html>
<head>
</head>

<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in
percent </p>
</body>
</html>

It will produce the following result −

This is a paragraph with a specified right margin

This is another paragraph with a specified right margin in percent

CSS - Lists
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 −
Sr.No. Value & Description

1 none
NA
2 disc (default)
A filled-in circle

3 circle
An empty circle
4 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- 0 before the number 01, 02, 03, 04, 05


leading 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

hebrew The marker is traditional Hebrew numbering

armenian The marker is traditional Armenian numbering

georgian The marker is traditional Georgian numbering

cjk-ideographic The marker is plain ideographic numbers

hiragana The marker is hiragana a, i, u, e, o, ka, ki

katakana The marker is katakana A, I, U, E, O, KA, KI


hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni, ho,
he, to

katakana-iroha The marker is katakana-iroha I, RO, HA, NI,


HO, HE, TO

Here is an example −

Live Demo
<html>
<head>
</head>

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

<ul style = "list-style-


type:square;"> <li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style-


type:decimal;"> <li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-


alpha;"> <li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-


roman;"> <li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result −


Maths
Social Science
Physics

Maths
Social Science
Physics

1. Maths
2. Social Science
3. Physics

a. Maths
b. Social Science
c. Physics

i. Maths
ii. Social Science
iii. Physics

The list-style-position Property


The list-style-position property indicates whether the marker should appear inside
or outside of the box containing the bullet points. It can have one the two values −
Sr.No. Value & Description

1 none
NA

2 inside
If the text goes onto a second line, the text will wrap underneath the marker.
It will also appear indented to where the text would have started if the list had
a value of outside.
3 outside
If the text goes onto a second line, the text will be aligned with the start of
the first line (to the right of the bullet).

Here is an example −

Live Demo

<html>
<head>
</head>

ssssssssssssssssssssssssssss

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

<ul style = "list-style-type:square;list-style-position:inside;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style-type:decimal;list-stlye-position:outside;">


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

<ol style = "list-style-type:lower-alpha;list-style-position:inside;">


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

It will produce the following result −


Maths
Social Science
Physics
Maths
Social Science
Physics
1. Maths
2. Social Science
3. Physics
a. Maths
b. Social Science
c. Physics
The list-style-image Property
The list-style-image allows you to specify an image so that you can use your own
bullet style. The syntax is similar to the background-image property with the letters
url starting the value of the property followed by the URL in brackets. If it does not
find the given image then default bullets are used.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result −

Maths
Social Science
Physics
Maths
2. Social Science
3. Physics

The list-stle Proert

ssssssssssssssssssssssssssssssssss

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 −

Live Demo

<html>
<head>
</head>

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

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


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

It will produce the following result −

Maths
Social Science
Physics

A. Maths
B. Social Science
C. Physics

The marker-offset Property


The marker-offset property allows you to specify the distance between the marker
and the text relating to that marker. Its value should be a length as shown in the
following example −

Unfortunately, this property is not supported in IE 6 or Netscape 7.

sssssssssssss
Here is an example −

<html>
<head>
</head>

<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result −

Maths
Social Science
Physics
A. Maths
B. Social Science
C. Physics

CSS - Paddings

The padding serves as shorthand for the preceding properties.Now, we will see how

to use these properties with examples. The addin-bottom Proert

sssssssssssssssssssssssssssssssssssssssssssss

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 −

Live Demo

<html>
<head>
</head>

<body>
<p style = "padding-bottom: 15px; border:1px solid
black;"> This is a paragraph with a specified
bottom padding
</p>

<p style = "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 −

This is a paragraph with a specified bottom padding

This is another paragraph with a specified bottom padding in percent

The padding-top Property


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

Here is an example −
Live Demo
<html>
<head>
</head>

<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>

<p style = "padding-top: 5%; border:1px solid black;">


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

It will produce the following result −

This is a paragraph with a specified top padding

This is another paragraph with a specified top padding in percent

The padding-left Property


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

Here is an example −

Live Demo

<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>

ssssssssssssssssssssssssssssssssssss

<p style = "padding-left: 15%; border:1px solid black;">


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

It will produce the following result −

This is a paragraph with a specified left padding

This is another paragraph with a specified left padding in percent

The padding-right Property


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

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "padding-right: 15px; border:1px solid black;"> This is a
paragraph with a specified right padding
</p>

<p style = "padding-right: 5%; border:1px solid black;">


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

It will produce the following result –

sssssssssssssssssssssssssssssssssssssssssss

s
ssssssssssssssssss

This is a paragraph with a specified right padding

This is another paragraph with a specified right padding in percent

The Padding Property


The padding property sets the left, right, top and bottom padding (space) of an
element. This can take a value in terms of length of %.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>

<p style = "padding:10px 2%; border:1px solid black;">


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

<p style = "padding: 10px 2% 10px; border:1px solid


black;"> top padding will be 10px, left and right
padding will
be 2% of the total width of the document, bottom padding will
be 10px </p>

<p style = "padding: 10px 2% 10px 10px; border:1px solid


black;"> top padding will be 10px, right padding will be
2% of
the total width of the document, bottom padding and top padding will
be 10px </p>
</body>
</html>
It will produce the following result −

all four padding will be 15px

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

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

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

CSS - Cursors
1 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...
2 crosshair
A crosshair or plus sign

3 default
An arrow

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

5 move
The I bar

6 e-resize
The cursor indicates that an edge of a box is to be moved right (east)

7 ne-resize
The cursor indicates that an edge of a box is to be moved up and right (north/east)

8 nw-resize
The cursor indicates that an edge of a box is to be moved up and left (north/west)

9 n-resize
The cursor indicates that an edge of a box is to be moved up (north)

10 se-resize
The cursor indicates that an edge of a box is to be moved down and right
(south/east)
11 sw-resize
The cursor indicates that an edge of a box is to be moved down and left (south/west)

1 s-resize
2 The cursor indicates that an edge of a box is to be moved down (south)

1 w-resize
3 The cursor indicates that an edge of a box is to be moved left (west)

14 text
The I bar

15 wait
An hour glass
1 help
6 A question mark or balloon, ideal for use over help buttons

17 <url>
The source of a cursor image file

NOTE − You should try to use only these values to add helpful information for
users, and in places, they would expect to see that cursor. For example, using the
crosshair when someone hovers over a link can confuse visitors.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p>Move the mouse over the words to see the cursor
change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>

<div style = "cursor:pointer">Pointer</div>


<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>

ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

<div style = "cursor:nw-resize">nw-resize</div>

<div style = "cursor:n-resize">n-resize</div>


<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>

<div style = "cursor:text">text</div>


<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>

It will produce the following result −

Move the mouse over the words to see the cursor change:
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

CSS - Outlines
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.

ssssssssssssssssssssssssssssssssssssssss

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 −
Live Demo

<html>
<head>
</head>

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

<p style = "outline-width:thick; outline-style:solid;">


This text is having thick outline.
</p>
<br />

<p style = "outline-width:5px; outline-style:solid;">


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

It will produce the following result −


This text is having thin outline.

This text is having thick outline.

This text is having 5x outline.

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 −

Live Demo

<html>
<head>
</head>

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

sssssssssssssssssssssssssssssssss

<br />

<p style = "outline-width:thick; outline-style:dashed;">


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

<p style = "outline-width:5px;outline-style:dotted;">


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

It will produce the following result −


This text is having thin solid outline.

This text is having thick dashed outline.

This text is having 5x dotted outline.

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.

Here is an example −

Live Demo

<html>
<head>
</head>

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

<p style = "outline-width:thick; outline-style:dashed;outline-


color:#009900"> This text is having thick dashed green outline.
</p>
<br />

<p style = "outline-width:5px;outline-style:dotted;outline-


color:rgb(13,33,232) This text is having 5x dotted blue outline.
</p>
</body>
</html>

It will produce the following result −


This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

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.

Here is an example −

Live Demo

<html>
<head>
</head>

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

<p style = "outline:thick dashed #009900;">


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

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


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

It will produce the following result −


This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

CSS - Dimension

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.

Here is an example −

Live Dem
ssssssssssssssssssssssssssss

<html>
<head>
</head>

<body>
<p style = "width:400px; height:100px; border:1px solid red;
padding:5px; margi This paragraph is 400pixels wide and 100 pixels
high
</p>
</body>
</html>
It will produce the following result −

This paragraph is 400pixels wide and 100 pixels high

The line-height Property


The line-height property allows you to increase the space between lines of text.
The value of the line-height property can be a number, a length, or a percentage.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "width:400px; height:100px; border:1px solid red;
padding:5px; margi This paragraph is 400pixels wide and 100 pixels
high and here line height is This paragraph is 400 pixels wide and
100 pixels high and here line height i </p>

ssssssssssssssssssssssssssssssssssss

</body>
</html>

It will produce the following result −

This paragraph is 400pixels wide and 100 pixels high and


here line height is 30pixels.This paragraph is 400 pixels wide
and 100 pixels high and here line height is 30pixels.

The max-height Property


The max-height property allows you to specify maximum height of a box. The value of
the max-height property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −

Live Demo

<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red;
padding:5px; ma This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height =
"84" /> </body>
</html>

sssssssssssssssssssssssssssssssssssssssssssss
It will produce the following result −

This paragraph is 400px wide and max height is 10px This


paragraph is 400px wide and max height is 10px This
paragraph is 400px wide and max height is 10px This
paragraph is 400px wide and max height is 10px
The min-height Property
The min-height property allows you to specify minimum height of a box. The value of
the min height property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "width:400px; min-height:200px; border:1px solid red;
padding:5px; m This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height
= "84" /> </body>
</html>

It will produce the following result −


This paragraph is 400px wide and min height is 200px This
paragraph is 400px wide and min height is 200px This
paragraph is 400px wide and min height is 200px This
paragraph is 400px wide and min height is 200px
The max-width Property
The max-width property allows you to specify maximum width of a box. The value of
the max width property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "max-width:100px; height:200px; border:1px solid red;
padding:5px; m This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height
= "84" /> </body>
</html>
This will produce following result −

This paragraph
is 200px high
and max width
is 100px This
paragraph is
200px high and
max width is
100px This
paragraph is
200px high and
max width is
100px This
paragraph is
200px high and
max width is
100px This
paragraph is
200px high and
max width is
100px

The min-width Property


The min-width property allows you to specify minimum width of a box. The value of
the min width property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p style = "min-width:400px; height:100px; border:1px solid red;
padding:5px; m This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height =
"84" />

ssssssssssssssssssssssssssss

</body>
</html>

It will produce the following result −

This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px

CSS - Scrollbars
1 visible
Allows the content to overflow the borders of its containing element.

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

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

4 auto
The purpose is the same as scroll, but the scrollbar will be shown only if the
content does overflow.

Here is an example –
Sssssssssssssssssssssssssssssssssss

<html>
<head>
<style type =
"text/css"> .scroll
{

sssssssssssssssssssssssssssssssssssssss

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

<body>
<p>Example of scroll value:</p>
<div class = "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>

<div class = "auto">


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>
</body>
</html>

It will produce the following result –


ssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

Example of scroll value:

I am going to keep lot of content here just


to show you how scrollbars works if there

Example of auto value:

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

CSS - Visibility
1 visible
The box and its contents are shown to the user.

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

3 collapse
This is for use only with dynamic table columns and row effects.

Here is an example −

Live Demo

<html>
<head>
</head>

<body>
<p>
This paragraph should be visible i
sssssssssssssssssssssssssssssssssssssssssssssssssssss

n normal way.
</p>

<p style = "visibility:hidden;">


This paragraph should not be visible.
</p>

sssssssssssssssssssssssssssssssssssssssssssssssssssssss

</body>
</html>

It will produce the following result −

This paragraph should be visible in normal way.

CSS - Positioning
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

Here is the example −

Live Demo

<html>
<head>
</head>

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

It will produce the following result –

sssssssssssssssssssssssssssssssssssssssssssssss

This div has relative positioning.

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.

NOTE − You can use bottom or right values as well in the same way as

top and left. Here is an example −

Live Demo

<html>
<head>
</head>

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

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.

NOTE − You can use bottom or right values as well in the same way as

top and left. Here is an example −

Live Demo

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

This div has fixed positioning.

You might also like