CSS Commands

`
CSS Examples
CSS Syntax
The element selector

The id selector
The class selector (for all elements)
The class selector (for only <p> elements)
Grouping selectors
CSS syntax explained
1) <!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>

<p>And me!</p>
</body>
</html>
Rezultati
Every paragraph will be affected by the style.
Me too!
And me!
2) <!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Rezultati
Hello World!
This paragraph is not affected by the style.
3) <!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Rezultati
Red and center-aligned heading
Red and center-aligned paragraph.

4) <!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Rezultati
This heading will not be affected
This paragraph will be red and center-aligned.
5) <!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Rezultati
Hello World!
Smaller heading!
This is a paragraph.
CSS Backgrounds
Set the background color of a page

Set the background color of different elements
Set an image as the background of a page
How to repeat a background image only horizontally
How to position a background image
A fixed background image (this image will not scroll with the rest of the page)
All the background properties in one declaration
Advanced background example
Background properties explained
1) <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
</style>
</head>
<body>
<p>This page has a background color!</p>
</body>
</html>
Rezultati
Hello World!
This page has a background color!
2) <!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
div {
p{
background-color: yellow;
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Rezultati
CSS background-color example!

This is a text inside a div element.
This paragraph has its own background color.

We are still in the div element.
3) <!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
</style>
</head>
<body>
<p>This page has an image as the background!</p>
</body>
</html>
Rezultati
Hello World!
This page has an image as the background!
4) <!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
</style>
</head>
<body>
<p>Here, a backgound image is repeated only horizontally!</p>
</body>
</html>
Rezultati
Hello World!
Here, a backgound image is repeated only horizontally!
5) <!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;

margin-right: 200px;
</style>
</head>
<body>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the
text.</p>
<p>In this example we have also added a margin on the right side, so the
background image will never disturb the text.</p>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-position: right top;
background-attachment: fixed;
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
</style>
</head>
<body>
<p>Now the background image is only shown once, and it is also positioned away
from the text.</p>
<p>In this example we have also added a margin on the right side, so that the
background image will not disturb the text.</p>
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<head>
<style>
body {
margin-left: 200px;
background: #5d9ab2 url("img_tree.png") no-repeat top left;
.center_div {
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
width: 90%;
background-color: #d0f0f6;
text-align: left;
padding: 8px;
</style>
</head>
<body>
<div class="center_div">
<p>This example contains some advanced CSS methods you may not have
learned yet. But, we will explain these methods in a later chapter in the
tutorial.</p>
</div>
</body>
</html>
Rezultati
CSS Borders
Set the width of the four borders
Set the width of the top border
Set the width of the bottom border
Set the width of the left border
Set the width of the right border
Set the style of the four borders
Set the style of the top border
Set the style of the bottom border
Set the style of the left border
Set the style of the right border
Set the color of the four borders
Set the color of the top border
Set the color of the bottom border
Set the color of the left border
Set the color of the right border
All the border properties in one declaration
Set different borders on each side
All the top border properties in one declaration
All the bottom border properties in one declaration
All the left border properties in one declaration
All the right border properties in one declaration
Border properties explained
1) <!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
p.two {
border-width: medium;
p.three {
border-style: dotted;
border-width: 2px;
p.four {
border-width: thick;
p.five {
border-style: double;
border-width: 15px;
p.six {
border-style: double;
border-width: thick;
p.seven {
border-width: 2px 10px 4px 20px;
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.</p>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-width: 15px;
</style>
</head>
<body>
<p><b>Note:</b> The "border-top-width" property does not work if it is used
alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-bottom-width: 15px;
}
</style>
</head>
<body>
<p><b>Note:</b> The "border-bottom-width" property does not work if it is used

</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-left-width: 15px;
</style>
</head>
<body>
<p><b>Note:</b> The "border-left-width" property does not work if it is used

</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-right-width: 15px;
</style>
</head>
<body>
<p><b>Note:</b> The "border-right-width" property does not work if it is used

</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}

p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
p{
p.none {border-top-style: none;}
p.dotted {border-top-style: dotted;}

p.dashed {border-top-style: dashed;}
p.solid {border-top-style: solid;}
p.double {border-top-style: double;}
p.groove {border-top-style: groove;}
p.ridge {border-top-style: ridge;}
p.inset {border-top-style: inset;}
p.outset {border-top-style: outset;}
</style>
</head>
<body>
<p class="none">No top border.</p>
<p class="dotted">A dotted top border.</p>
<p class="dashed">A dashed top border.</p>
<p class="solid">A solid top border.</p>
<p class="double">A double top border.</p>
<p class="groove">A groove top border.</p>
<p class="ridge">A ridge top border.</p>
<p class="inset">An inset top border.</p>
<p class="outset">An outset top border.</p>
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}

p.outset {border-bottom-style: outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>
Rezultati
9) <!DOCTYPE html>
<html>
<head>
<style>
p{
p.none {border-left-style: none;}
p.dotted {border-left-style: dotted;}
p.dashed {border-left-style: dashed;}
p.solid {border-left-style: solid;}
p.double {border-left-style: double;}
p.groove {border-left-style: groove;}

p.ridge {border-left-style: ridge;}
p.inset {border-left-style: inset;}
p.outset {border-left-style: outset;}
</style>
</head>
<body>
<p class="none">No left border.</p>
<p class="dotted">A dotted left border.</p>
<p class="dashed">A dashed left border.</p>
<p class="solid">A solid left border.</p>
<p class="double">A double left border.</p>
<p class="groove">A groove left border.</p>
<p class="ridge">A ridge left border.</p>
<p class="inset">An inset left border.</p>
<p class="outset">An outset left border.</p>
</body>
</html>
Rezultati
10) <!DOCTYPE html>
<html>
<head>
<style>
p{
p.none {border-right-style: none;}
p.dotted {border-right-style: dotted;}
p.dashed {border-right-style: dashed;}
p.solid {border-right-style: solid;}
p.double {border-right-style: double;}
p.groove {border-right-style: groove;}

p.ridge {border-right-style: ridge;}
p.inset {border-right-style: inset;}
p.outset {border-right-style: outset;}
</style>
</head>
<body>
<p class="none">No right border.</p>
<p class="dotted">A dotted right border.</p>
<p class="dashed">A dashed right border.</p>
<p class="solid">A solid right border.</p>
<p class="double">A double right border.</p>
<p class="groove">A groove right border.</p>
<p class="ridge">A ridge right border.</p>
<p class="inset">An inset right border.</p>
<p class="outset">An outset right border.</p>
</body>
</html>
Rezultati
11) <!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-color: #0000ff;
p.two {
border-color: #ff0000 #0000ff;
}
p.three {
border-color: #ff0000 #00ff00 #0000ff;
p.four {
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone.

Use the "border-style" property to set the borders first.</p>
</body>
</html>
Rezultati
12) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-color: #ff0000;
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>

</body>
</html>
Rezultati
13) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-bottom-color: #ff0000;
</style>
</head>
<body>
</body>
</html>
Rezultati
14) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-left-color: #ff0000;
</style>
</head>
<body>
</body>
</html>
Rezultati
15) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-right-color: #ff0000;
</style>
</head>
<body>
</body>
</html>
Rezultati
16) <!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid red;
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and border-

color:</p>
<div>This is some text.</div>
</body>
</html>
Rezultati
17) <!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: dotted solid dashed double;
p.two {
border-style: dotted solid dashed;
p.three {
border-style: dotted solid;
p.four {
</style>
</head>
<body>
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
<p class="three">This is some text in a paragraph.</p>
<p class="four">This is some text in a paragraph.</p>
</body>
</html>
Rezultati
18) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-top: thick double #ff0000;
</style>
</head>
<body>

</body>
</html>
Rezultati
19) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-bottom: thick dotted #ff0000;
</style>
</head>
<body>
</body>
</html>
Rezultati
20) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-left: thick double #ff0000;

}
</style>
</head>
<body>
</body>
</html>
Rezultati
21) <!DOCTYPE html>
<html>
<head>
<style>
p{
border-right: thick double #ff0000;
</style>
</head>
<body>
</body>
</html>
Rezultati
CSS Margins
Specify different margins for each side of an element
Let the left margin be inherited from the parent element
The margin shorthand property
Set margin to auto to center the element within its container
Margin properties explained
1) <!DOCTYPE html>
<html>
<head>
<style>
p{
p.ex {
border:1px solid red;
margin-top: 100px;
margin-bottom: 100px;
margin-left: 80px;
</style>
</head>
<body>
<h2>Using Individual margin Properties:</h2>
<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin
of 80px, and a right margin of 150px.</p>
</body>
</html>
Rezultati
Using Individual margin Properties:

This is a paragraph with no specified margins.
This paragraph has a top and bottom margin of 100px, a

left margin of 80px, and a right margin of 150px.
2) <!DOCTYPE html>
<html>
<head>
<style>
div.container {
margin-left: 100px;
p.one {
margin-left: inherit;
</style>
</head>
<body>
<h2>Use of the inherit Value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div class="container">
<p class="one">This is a paragraph with an inherited left margin (from the div
element).</p>
</div>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
p{
p.ex {
border:1px solid red;
margin: 100px 150px 100px 80px;
</style>
</head>
<body>
<h2>Using The margin Shorthand Property:</h2>
<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin
of 80px, and a right margin of 150px.</p>
</body>
</html>
Rezultati
Using The margin Shorthand Property:

This is a paragraph with no specified margins.
This paragraph has a top and bottom margin of 100px, a

left margin of 80px, and a right margin of 150px.
4) <!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
</style>
</head>
<body>
<h2>Use of the auto Value</h2>
<p>You can set the margin property to auto to horizontally center the element
within its container.
The element will then take up the specified width, and the remaining space will be
split equally between the left and right margins:</p>
<div>
This div will be centered because it has margin: auto;
</div>
</body>
</html>
Rezultati
CSS Padding
Set the left padding of an element

Set the right padding of an element
Set the top padding of an element
Set the bottom padding of an element
All the padding properties in one declaration
Padding properties explained
1) <!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-left: 2cm;
p.padding2 {
padding-left: 50%;
</style>
</head>
<body>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-right: 2cm;
p.padding2 {
padding-right: 50%;
</style>
</head>
<body>
<p>This is a text with no right padding. This is a text with no right padding. This is
a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right
padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right
padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>
Rezultati
This is a text with no right padding. This is a text with no right padding. This is a text
with no right padding.
This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text
has a right padding of 2 cm.
This text has a right padding of 50%. This text has a right padding of 50%. This text
has a right padding of 50%.
3) <!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
p.padding2 {
padding-top: 50%;
</style>
</head>
<body>
<p>This is a text with no top padding. This is a text with no top padding. This is a
text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top
padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top
padding of 50%. This text has a top padding of 50%.</p>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom:2cm;
p.padding2 {
padding-bottom:50%;
</style>
</head>
<body>
<p>This is a text with no bottom padding. This is a text with no bottom padding.
This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a
bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a
bottom padding of 50%. This text has a bottom padding of 50%.</p>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
padding: 2cm;
p.ex2 {
padding: 0.5cm 3cm;
</style>
</head>
<body>
<p class="ex1">This text has equal padding on each side. The padding on each
side is 2cm.</p>
<p class="ex2">This text has a top and bottom padding of 0.5cm and a left and
right padding of 3cm.</p>
</body>
</html>
Rezultati
CSS Text
Set the text color of different elements

Align the text
Remove the line under links
Decorate the text
Control the letters in a text
Indent text
Specify the space between characters
Specify the space between lines
Set the text direction of an element
Increase the white space between words
Disable text wrapping inside an element
Vertical alignment of an image inside text
Text properties explained

1) <!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
h1 {
color: green;
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text
color for a page is defined in the body selector.</p>
</body>
</html>
Rezultati
This is heading 1
This is an ordinary paragraph. Notice that this text is blue. The default text color for a
page is defined in the body selector.
2) <!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
</style>
</head>
<body>
<h1>Example text-align: justify;</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal
width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me some advice that I've
been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,'
he told me, 'just remember that all the people in this world haven't had the
advantages that you've had.'
</div>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
a{
text-decoration: none;
</style>
</head>
<body>
<p>A link with no underline: <a

href="http://www.w3schools.com">W3Schools.com</a></p>
</body>
</html>
Rezultati
A link with no underline: W3Schools.com
4) <!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
h2 {
text-decoration: line-through;
h3 {
text-decoration: underline;
</style>
</head>
<body>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
Rezultati
THIS IS SOME TEXT.
this is some text.
This Is Some Text.
6) <!DOCTYPE html>
<html>
<head>
<style>
p{
text-indent: 50px;
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people in this world haven't had the
advantages that you've had.'</p>
</body>
</html>
Rezultati
In my younger and more vulnerable years my father gave me

some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just
remember that all the people in this world haven't had the
advantages that you've had.'
7) <!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
h2 {
letter-spacing: -3px;
</style>
</head>
<body>
</body>
</html>
Rezultati
This is heading 1
This is heading 2
8) <!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
p.big {
line-height: 1.8;
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>
Rezultati
9) <!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
direction: rtl;
}
</style>
</head>
<body>
<div>This is default text direction.</div>
<div class="ex1">This is right-to-left text direction.</div>
</body>
</html>
Rezultati
10) <!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
h2 {
word-spacing: -5px;
</style>
</head>
<body>
</body>
</html>
Rezultati
11) <!DOCTYPE html>
<html>
<head>
<style>
p{
white-space: nowrap;
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Rezultati
This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some
text. This is some text.
12) <!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
</style>
</head>
<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270"

height="50"> image with a default alignment.</p><br>
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools"

width="270" height="50"> image with a text-top alignment.</p><br>
<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools"

width="270" height="50"> image with a text-bottom alignment.</p>
</body>
</html>
Rezultati
CSS Fonts
Set the font of a text

Set the size of the font
Set the size of the font in px
Set the size of the font in em
Set the size of the font in percent and em
Set the style of the font
Set the variant of the font
Set the boldness of the font
All the font properties in one declaration
Font properties explained
1) <!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Rezultati
CSS font-family
This is a paragraph, shown in the Times New Roman font.
This is a paragraph, shown in the Arial font
2) <!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size:250%;
h2 {
font-size:200%;
p{
font-size:100%;
</style>
</head>
<body>
</body>
</html>
Rezultati
This is heading 1
This is heading 2
3) <!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
h2 {
font-size: 30px;
p{
font-size: 14px;
}
</style>
</head>
<body>
<p>This is another paragraph.</p>
</body>
</html>
Rezultati
This is heading 1
This is heading 2
This is another paragraph.
4) <!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
h2 {
font-size: 1.875em; /* 30px/16=1.875em */

}
p{
font-size: 0.875em; /* 14px/16=0.875em */
</style>
</head>
<body>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the
text, it becomes larger/smaller than it should.</p>
</body>
</html>
Rezultati
This is heading 1
This is heading 2
Specifying the font-size in em allows all major browsers to resize the text. Unfortunately, there is still a
problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.
5) <!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
h1 {
font-size: 2.5em;
h2 {
font-size: 1.875em;
p{
font-size: 0.875em;
</style>
</head>
<body>
<p>Specifying the font-size in percent and em displays the same size in all major
browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Rezultati
This is heading 1
This is heading 2
Specifying the font-size in percent and em displays the same size in all major browsers, and allows all
browsers to resize the text!
6) <!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>

<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Rezultati
This is a paragraph in normal style.
This is a paragraph in italic style.
This is a paragraph in oblique style.

7) <!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>

<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
Rezultati
My name is Hege Refsnes.
MY NAME IS HEGE REFSNES.
8) <!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
p.thicker {
font-weight: 900;
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
Rezultati
9) <!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
font: 15px arial, sans-serif;
p.ex2 {
font:italic bold 12px/30px Georgia, serif;
</style>
</head>
<body>
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This

is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is
a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This

is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is
a paragraph.</p>
</body>
</html>
Rezultati
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
CSS Icons
Font Awesome icons

Bootstrap icons
Google icons
1) <!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>Some Font Awesome icons:</p>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
s">
</head>
<body class="container">
<p>Some Bootstrap icons:</p>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>
<p>Styled Bootstrap icons (size and color):</p>

<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-
size:60px;color:lightblue;"></i>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons (size and color):</p>

<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>
Rezultati
CSS Links
Add different colors to visited/unvisited links

Use of text-decoration on links
Specify a background color for links
Add other styles to hyperlinks
Advanced - Create link boxes
Advanced - Create link boxes with borders
1) <!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in
order to be effective.</p>
</body>
</html>
Rezultati
This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be
effective.
2) <!DOCTYPE html>
<html>
<head>
<style>
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
</style>
</head>
<body>

</body>
</html>
Rezultati
This is a link
be effective.
effective.
3) <!DOCTYPE html>
<html>
<head>
<style>
a:link {
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>

</body>
</html>
Rezultati
This is a link
be effective.
effective.
4) <!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links and watch them change layout:</p>
<p><b><a class="one" href="default.asp" target="_blank">This link

changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link
changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link
changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link
changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link
changes text-decoration</a></b></p>
</body>
</html>
Rezultati
Mouse over the links and watch them change layout:
This link changes color
This link changes font-size
This link changes background-color
This link changes font-family
This link changes text-decoration
5) <!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>
Rezultati
CSS Lists
All the different list item markers in lists

Set an image as the list-item marker
Position the list-item marker
All list properties in one declaration
Style lists with colors
Full-width bordered list
1) <!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: armenian;}

ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Rezultati
o Circle type
o Tea
o Coca Cola
Disc type
Tea
Coca Cola
Square type
Tea
Coca Cola
1. Armenian type
2. Tea
3. Coca Cola
1. Cjk-ideographic type
2. Tea
3. Coca Cola
1. Decimal type
2. Tea
3. Coca Cola
1. Decimal-leading-zero type
2. Tea
3. Coca Cola
1. Georgian type
2. Tea
3. Coca Cola
1. Hebrew type
2. Tea
3. Coca Cola
1. Hiragana type
2. Tea
3. Coca Cola
1. Hiragana-iroha type
2. Tea
3. Coca Cola
1. Katakana type
2. Tea
3. Coca Cola
1. Katakana-iroha type
2. Tea
3. Coca Cola
a. Lower-alpha type
b. Tea
c. Coca Cola
1. Lower-greek type
2. Tea
3. Coca Cola
1. Lower-latin type
2. Tea
3. Coca Cola
i. Lower-roman type
ii. Tea
iii. Coca Cola
A. Upper-alpha type
B. Tea
C. Coca Cola
1. Upper-latin type
2. Tea
3. Coca Cola
I. Upper-roman type
II. Tea
III. Coca Cola
1. None type
2. Tea
3. Coca Cola
1. inherit type
2. Tea
3. Coca Cola
2) <!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-position:inside;}
ul.b {list-style-position:outside;}
</style>
</head>
<body>
<p>The following list has list-style-position: inside:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>The following list has list-style-position: outside:</p>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>"list-style-position: outside" is the default setting.</p>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
ul li {
background: #cce5ff;
margin: 5px;
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0;
border: 1px solid #ddd;
ul li {
padding: 8px 16px;

border-bottom: 1px solid #ddd;
ul li:last-child {
border-bottom: none
</style>
</head>
<body>
<p>Full-width bordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Rezultati
CSS Tables
Specify a black border for table, th, and td elements

Use of border-collapse
Single border around the table
Specify the width and height of a table
Set the horizontal alignment of content (text-align)
Set the vertical alignment of content (vertical-align)
Specify the padding for th and td elements
Horizontal dividers
Hoverable table
Striped tables
Specify the color of the table borders
Set the position of the table caption
Responsive Table
Create a fancy table
1) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
</style>
</head>
<body>
<h2>Let the borders collapse:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse

property can produce unexpected results
in IE8 and earlier versions.</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
table {
}
</style>
</head>
<body>
<h2>Single Border Around The Table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
table {
width: 100%;
th {
height: 50px;
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
table {
width: 100%;
th {
text-align: left;
</style>
</head>
<body>
<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of
the content in th or td:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
table {
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<p>This property sets the vertical alignment (like top, bottom, or middle) of
the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
text-align: left;
table {
width: 100%;
th, td {
padding: 15px;
</style>
</head>
<body>
<h2>The padding Property</h2>
<p>This property adds space between the border and the content in a
table.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
th, td {
padding: 8px;
text-align: left;
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
9) <!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
th, td {
padding: 8px;
text-align: left;
tr:hover{background-color:#f5f5f5}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
10) <!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
th, td {
text-align: left;
padding: 8px;
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h2>Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a

background-color to all even (or odd) table rows:</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
11) <!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
th, td {
text-align: left;
padding: 8px;
th {
background-color: #4CAF50;
color: white;
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Rezultati
12) <!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbkp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
</table>
<p><b>Note:</b> IE8 supports the caption-side property if a !DOCTYPE is

specified.</p>
</body>
</html>
Rezultati
13) <!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
th, td {
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content. Resize the browser window to see the
effect:</p>
<p>To create a responsive table, add a container element (like div) with
<strong>overflow-x:auto</strong> around the table element:</p>
<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
Rezultati
14) <!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
#customers td, #customers th {
padding: 8px;
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: white;
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Kniglich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spcialits</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
Rezultati
CSS Display
How to hide an element (visibility:hidden)

How to not display an element (display:none)
How to display a block-level element as an inline element
How to display an inline element as a block-level element
How to to use CSS together with JavaScript to show hidden content
1) <!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
Rezultati
This is a visible heading

Notice that the hidden heading still takes up space.
2) <!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>
</body>
</html>
Rezultati
This is a visible heading

Notice that the h1 element with display: none; does not take up any space.
3) <!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
float: left;
text-align: center;
width: 120px;
margin: 4px;
padding: 6px;
button {
width: 100%;
</style>
</head>
<body>
<h3>Difference between display:none and visiblity: hidden</h3>
<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in

the layout.</p>
<p><strong>display:none</strong> removes the element from the document. It does

not take up any space.</p>
<div class="imgbox" id="imgbox1">Box 1<br>

<img src="img_fjords.jpg" alt="Fjords" style="width:100%">
<button onclick="removeElement()">Remove</button>
</div>
<div class="imgbox" id="imgbox2">Box 2<br>
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<button onclick="changeVisibility()">Hide</button>
</div>
<div class="imgbox">Box 3<br>
<img src="img_forest.jpg" alt="Forest" style="width:100%">
<button onclick="resetElement()">Reset All</button>
</div>
<script>
function removeElement() {
document.getElementById("imgbox1").style.display = "none";
function changeVisibility() {
document.getElementById("imgbox2").style.visibility = "hidden";
function resetElement() {
document.getElementById("imgbox1").style.display = "block";
document.getElementById("imgbox2").style.visibility = "visible";
</script>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
</style>
</head>
<body>
<span>A display property with a value of "block" results in</span> <span>a line
break between the two elements.</span>
</body>
</html>
Rezultati
A display property with a value of "block" results ina line break

between the two elements.
5) <!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">Click to show panel</p>
<div id="panel">
<p>This panel contains a div element, which is hidden by default

(display: none).</p>
<p>It is styled with CSS and we use JavaScript to show it (display:

block).</p>
<p>How it works: Notice that the p element with class="flip" has

an onclick attribute attached to it. When the user clicks on the p
element, a function called myFunction() is executed, which changes
the style of the div with id="panel" from display:none (hidden) to
display:block (visible).</p>
<p>You will learn more about JavaScript in our JavaScript

Tutorial.</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
Rezultati
CSS Positioning
Position an element relative to the browser window
Position an element relative to its normal position
Position an element with an absolute value
Overlapping elements
Set the shape of an element
How to create a scroll bar when an element's content is too big to fit
How to set the browser to automatically handle overflow
Set the top edge of an image using a pixel value
Set the bottom edge of an image using a pixel value
Set the left edge of an image using a pixel value
Set the right edge of an image using a pixel value
Change the cursor
Position image text (top left corner)
Position image text (top right corner)
Position image text (bottom left corner)
Position image text (bottom right corner)
Position image text (centered)
1) <!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal

position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140">
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: #00FFFF;
width: 100px;
height: 100px;
overflow: scroll;
div.hidden {
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds

the size of the element's box.</p>
<p>Result with overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better
control of the layout. The default value is visible.</div>
<p>Result with overflow:hidden</p>

<div class="hidden">You can use the overflow property when you want to have better
control of the layout. The default value is visible.</div>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #00FFFF;
width: 150px;
height: 150px;
overflow: auto;
</style>
</head>
<body>
<p>The overflow property decides what to do if the content inside an element exceeds
the given width and height properties.</p>
<div>You can use the overflow property when you want to have better control of the
layout. Try to change the overflow property to: visible, hidden, scroll, or inherit and
see what happens. The default value is visible.</div>
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
top: 0px;
</style>
</head>
<body>
<img src="smiley.gif" width="42" height="42">
</body>
</html>
Rezultati
9) <!DOCTYPE html>
<html>
<head>
<style>
img.ex1 {
position: absolute;
bottom: 0px;
img.ex2 {
position: relative;
bottom: -100px;
}
</style>
</head>
<body>
<img class="ex1" src="smiley.gif" width="42" height="42">
<img class="ex2" src="smiley.gif" width="42" height="42">
</body>
</html>
Rezultati
10) <!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 50px;
</style>
</head>
<body>
</body>
</html>
Rezultati
11) <!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
right: 50px;
</style>
</head>
<body>
</body>
</html>
Rezultati
12) <!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
Rezultati
Mouse over the words to change the cursor.

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
13) <!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
Rezultati
14) <!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
img {
width: 100%;
height: auto;
opacity: 0.3;
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="topright">Top Right</div>
</div>
</body>
</html>
Rezultati
15) <!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
img {
width: 100%;
height: auto;
opacity: 0.3;
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>
<div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>
Rezultati
16) <!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
img {
width: 100%;
height: auto;
opacity: 0.3;
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="bottomright">Bottom Right</div>
</div>
</body>
</html>
Rezultati
17) <!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
img {
width: 100%;
height: auto;
opacity: 0.3;
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>

<div class="center">Centered</div>
</div>
</body>
</html>
Rezultati
CSS Overflow
Using overflow: visible - The overflow is not clipped. It renders outside the element's
box.
Using overflow: hidden - The overflow is clipped, and the rest of the content is hidden.
Using overflow: scroll - The overflow is clipped, but a scrollbar is added to see the rest
of the content.
Using overflow: auto - If overflow is clipped, a scrollbar should be added to see the rest
of the content.
Using overflow-x and overflow-y.
1) <!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders
outside the element's box:</p>
layout. The overflow property specifies what happens if content overflows an element's
box.</div>
</body>
</html>
Rezultati
CSS Overflow
By default, the overflow is visible, meaning that it is not clipped and it renders outside
the element's box:
You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens
if content overflows an element's box.
2) <!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 50px;
overflow: hidden;
</style>
</head>
<body>
<p>With the hidden value, the overflow is clipped, and the rest of the content is
hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>
layout. The overflow property specifies what happens if content overflows an element's
box.</div>
</body>
</html>
Rezultati
CSS Overflow
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
Try to remove the overflow property to understand how it works.
You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens
if content overflows an element's box.
3) <!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 50px;
overflow: scroll;
</style>
</head>
<body>
<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is
added to scroll inside the box. Note that this will add a scrollbar both horizontally and
vertically (even if you do not need it):</p>
layout. The overflow property specifies what happens if content overflows an
element's box.</div>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 50px;
overflow: auto;
</style>
</head>
<body>
<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 50px;
overflow-x: hidden;
overflow-y: scroll;
</style>
</head>
<body>
<p>You can also change the overflow of content horizontally or vertically.</p>
<p>overflow-x specifies what to do with the left/right edges of the content.<br>
overflow-y specifies what to do with the top/bottom edges of the content.</p>

</body>
</html>
Rezultati
CSS Floating
A simple use of the float property

An image with border and margins that floats to the right in a paragraph
An image with a caption that floats to the right
Let the first letter of a paragraph float to the left
Create an image gallery with the float property
Turning off float (using the clear property)
Creating a horizontal menu
Creating a homepage without tables
1) <!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>.
The result is that the image will float to the right in the paragraph.</p>
<p><img src="w3css.gif" width="100" height="140">

</p>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
margin: 0px 0px 15px 20px;
</style>
</head>
<body>
<p>In the paragraph below, the image will float to the right. A dotted black border is
added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin
on the left side of the image.
</p>
<p><img src="w3css.gif" width="100" height="140">

</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
div {
float: right;
width: 120px;
margin: 0 0 15px 20px;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="w3css.gif" width="100" height="140"><br>CSS is fun!
</div>
<p>

</p>
<p>
In the paragraph above, the div element is 120 pixels wide and it contains the image.
The div element will float to the right. Margins are added to the div to push the text
away from the div.
Borders and padding are added to the div to frame in the picture and the caption.
</p>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.

</p>
<p>
In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".
</p>
</body>
</html>
Rezultati
This is some text. This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text.
In the paragraph above, the first letter of the text is embedded in a span element. The
span element has a width that is 0.7 times the size of the current font. The font-size of
the span element is 400% (quite large) and the line-height is 80%. The font of the
letter in the span will be in "Algerian".
5) <!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
</style>
</head>
<body>
<h2>Floating boxes</h2>
<div class="floating-box">Floating box</div>

</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
.div2 {
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
.div4 {
clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML
code. However, since div1 is floated to the left, this happens: the text in div2 is floated
around div1, and div2 surrounds the whole thing.</div>
<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the floated div3. The
value "left" clears elements floated to the left. You can also clear "right" and
"both".</div>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
li a {
color: white;
text-align: center;
padding: 14px 16px;
li a:hover {
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
margin: 0px;
line-height: 150%;
div.header, div.footer {
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
h1.header {
padding: 0;
margin: 0;
div.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
div.content {
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
</style>
</head>
<body>
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of

entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need.</p>
<p>W3Schools.com - The largest Web Developers' Site on the internet!</p>

</div>
<div class="footer"> Copyright by Refsnes Data.</div>
</div>
</body>
</html>
Rezultati
CSS Aligning Elements
Center aligning with margin

Center aligning text
Center an image
Left/Right aligning with position
Left/Right aligning with position - Crossbrowser solution
Left/Right aligning with float
Left/Right aligning with float - Crossbrowser solution Center vertically with padding
Center vertically and horizontally
Center vertically with line-height
Center vertically and horizontally with position
1) <!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
padding: 10px;
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is

declared.</p>
</div>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<p>This text is centered.</p>
</div>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin: 0 auto;
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, use margin: auto; and make it into a block element:</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
</style>
</head>
<body>
<h2>Right Align</h2>
<p>An example of how to right align elements with the position property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
</style>
</head>
<body>
<div class="right">
<p><b>Note: </b>When aligning using the position property, always include the !
DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</div>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
padding: 10px;
</style>
</head>
<body>
<p>An example of how to right align elements with the float property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some

advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
</style>
</head>
<body>
<div class="right">
<p><b>Note: </b>When aligning using the float property, always include

the !DOCTYPE declaration! If missing, it can produce strange results in IE
browsers.</p>
</div>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
</style>
</head>
<body>
<h2>Center Vertically</h2>
<p>In this example, we use the padding property to center the div element
vertically:</p>
<p>I am vertically centered.</p>
</div>
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
text-align: center;
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use padding and text-align to center the div element
vertically and horizontally:</p>
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Rezultati
9) <!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
text-align: center;
.center p {
line-height: 1.5;
vertical-align: middle;
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is
equal to the height property to center the div element:</p>
</div>
</body>
</html>
Rezultati
10) <!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use positioning and the transform property to

vertically and horizontally center the div element:</p>
</div>
<p>Note: The transform property is not supported in IE8 and earlier

versions.</p>
</body>
</html>
Rezultati
CSS Combinators
Descendant selector
Child selector
Adjacent Sibling selector
General Sibling selector
1) <!DOCTYPE html>
<html>
<head>
<style>
div p {
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
div > p {
</style>
</head>
<body>
<div>
<span><p>Paragraph 3 in the div.</p></span> 
</div>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
div + p {
</style>
</head>
<body>
<div>

</div>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
}
</style>
</head>
<body>
<p>Paragraph 1.</p>
<div>
<code>Some code.</code>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
Rezultati
CSS Generated Content
Insert the URL in parenthesis after each link with the content property
Numbering sections and sub-sections with "Section 1", "1.1", "1.2", etc.
Specify the quotation marks with the quotes property
1) <!DOCTYPE html>
<html>
<head>
<style>
a:after {
content: " (" attr(href) ")";
</style>
</head>
<body>
<p><a href="http://www.w3schools.com">W3Schools</a> contains free
tutorials and references.</p>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is

specified.</p>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
</style>
</head>
<body>
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is

specified.</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>JQuery</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
Rezultati
3) <html lang="en">
<head>
<style>
q:lang(en) {
quotes: "" "" "'" "'";
</style>
</head>
<body>
<p><q>This is a <q>big</q> quote.</q></p>
<p><b>Note:</b> IE8 supports the quotes property only if a !DOCTYPE is

specified.</p>
</body>
</html>
Rezultati
CSS Pseudo-classes
Add different colors to a hyperlink

Add other styles to hyperlinks
Use of :focus
:first-child - match the first p element
:first-child - match the first i element in all p elements
:first-child - Match all i elements in all first child p elements
Use of :lang
1) <!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
/* mouse over link */
a:hover {
color: hotpink;
/* selected link */
a:active {
color: blue;
</style>
</head>
<body>

</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links and watch them change layout:</p>
<p><b><a class="one" href="default.asp" target="_blank">This link

changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link

changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link

changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link

changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link

changes text-decoration</a></b></p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
input:focus {
</style>
</head>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<p><b>Note:</b> IE8 supports the :focus pseudo-class only if a !DOCTYPE

is specified.</p>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must

be declared.</p>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must
be declared.</p>
</body>
</html>
Rezultati
I am a strong person. I am a strong person.
Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
6) <!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
</style>
</head>
<body>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be
declared.</p>
</body>
</html>
Rezultati
Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
7) <!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

<p>In this example, :lang defines the quotation marks for q elements with
lang="no":</p>
<p><b>Note:</b> IE8 supports the :lang pseudo class only if a !DOCTYPE is

specified.</p>
</body>
</html>
Rezultati
CSS Pseudo-elements
Make the first letter special in a text

Make the first line special in a text
Make the first letter and first line special
Use :before to insert some content before an element
Use :after to insert some content after an element
1) <!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line
of a text. Some more text. And even more, and more, and more, and more, and more,
and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
p::first-line {
color: #0000ff;
</style>
</head>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special
effect to the first letter and the first line of a text!</p>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
</style>
</head>
<body>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

specified.</p>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
</style>
</head>
<body>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

specified.</p>
</body>
</html>
Rezultati
CSS Opacity
Creating transparent images

Creating transparent images - mouseover effect
Reversed mouseover effect for transparent images
Transparent box/div
Transparent box/div with RGBA values
Creating a transparent box with text on a background image
1) <!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
img:hover {
opacity: 1.0;
</style>
</head>
<body>
<p>The opacity property is often used together with the :hover selector to change the
opacity on mouse-over:</p>
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work
on other elements than the a element.</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
</style>
</head>
<body>
<p>The opacity property is often used together with the :hover selector to change the
opacity on mouse-over:</p>
<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work
on other elements than the a element.</p>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 10px;
div.first {
opacity: 0.1;
div.second {
opacity: 0.3;
div.third {
opacity: 0.6;
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an

element, all of its child elements become transparent as well. This can make the text
inside a fully transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(76, 175, 80);
padding: 10px;
div.first {
background: rgba(76, 175, 80, 0.1);
div.second {
div.third {
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using
the opacity property.</p>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
div.transbox {
margin: 30px;
background-color: #ffffff;
opacity: 0.6;
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Rezultati
CSS Navigation Bars
Fully styled vertical navigation bar

Fully styled horizontal navigation bar
1) <!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
li a {
display: block;
color: #000;
padding: 8px 16px;
li a.active {
color: white;
li a:hover:not(.active) {
color: white;
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a
white text. The class is added to the "Home" link.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
</ul>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
a:hover:not(.active) {
.active {
background-color:#4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
</ul>
</body>
</html>
Rezultati
CSS Dropdowns
Dropdown text
Dropdown menu
Right-aligned dropdown menu
Dropdown image
Dropdown navigation bar
1) <!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
.dropdown:hover .dropdown-content {
display: block;
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
Rezultati
Hoverable Dropdown
Move the mouse over the text below to open the dropdown content.
Mouse over me
2) <!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
.dropdown {
position: relative;
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
.dropdown-content a:hover {background-color: #f1f1f1}
display: block;
.dropdown:hover .dropbtn {
background-color: #3e8e41;
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<button class="dropbtn">Dropdown</button>
<a href="#">Link 1</a>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this
would be URLs.</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 160px;
color: black;
padding: 12px 16px;
display: block;
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
</style>
</head>
<body>
<h2>Aligned Dropdown Content</h2>
<p>Determine whether the dropdown content should go from left to right or right to
left with the left and right properties.</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>

</div>
</div>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
display: block;
.desc {
padding: 15px;
text-align: center;
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="100" height="50">

<div class="desc">Beautiful Trolltunga, Norway</div>
</div>
</div>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
li {
float: left;
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
color: black;
padding: 12px 16px;
display: block;
text-align: left;
display: block;
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Rezultati
CSS Tooltips
Right tooltip
Left tooltip
Top tooltip
Bottom tooltip
Tooltip with arrow
Animated tooltip
1) <!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
</style>
<h2>Left Tooltip</h2>
</div>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
</style>
<h2>Top Tooltip</h2>
</div>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
</style>
<h2>Bottom Tooltip</h2>
</div>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-color: black transparent transparent transparent;
</style>
<h2>Top Tooltip w/ Bottom Arrow</h2>
</div>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
opacity: 1;
}
</style>
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and
take 1 second to go from completely invisible to visible.</p>
</div>
</body>
</html>
Rezultati
CSS Image Gallery
Image gallery
Responsive Image gallery
1) <!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
div.img:hover {
border: 1px solid #777;
div.img img {
width: 100%;
height: auto;
div.desc {
padding: 15px;
text-align: center;
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
</a>
</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
</a>
</div>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
div.img {
div.img:hover {
div.img img {
width: 100%;
height: auto;
div.desc {
padding: 15px;
text-align: center;
*{
box-sizing: border-box;
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
.clearfix:after {
content: "";
display: table;
clear: both;
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
</a>
</div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
</a>
</div>
</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
</div>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
</a>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will
show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than
500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>
</body>
</html>
Rezultati
CSS Image Sprites
An image sprite
An image sprite - a navigation list
An image sprite with hover effect
1) <!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
</style>
</head>
<body>
<img id="home" src="img_trans.gif"><br><br>
<img id="next" src="img_trans.gif">
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
#navlist li, #navlist a {
height: 44px;
display: block;
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
#home {
left: 0px;
width: 46px;
background: url('img_navsprites_hover.gif') 0 0;
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
#next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;

}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Rezultati
CSS Attribute Selectors
Selects all <a> elements with a target attribute

Selects all <a> elements with a target="_blank" attribute
Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"
Selects all elements with a class attribute value that begins with "top" (must be whole word)
Selects all elements with a class attribute value that begins with "top" (must not be whole word)
Selects all elements with a class attribute value that ends with "test"
Selects all elements with a class attribute value that contains "te"
1) <!DOCTYPE html>
<html>
<head>
<style>
a[target] {
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
</style>
</head>
<body>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">

<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>

<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Rezultati
CSS Forms
Full-width input field

Padded input field
Bordered input field
Bottom bordered input field
Colored input fields
Focused input fields
Focused input fields 2
Input with icon/image
Animated search input
Styling textareas
Styling select menus
Styling input buttons
1)
2)
3)
4)
5)
6) <!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
outline: none;
}
input[type=text]:focus {
</style>
</head>
<body>
<p>In this example, we use the :focus selector to add a background color to the text field when it gets focused (clicked on):</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Rezultati
7) <!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
</style>
</head>
<body>
<p>In this example, we use the :focus selector to add a black border color to the text
field when it gets focused (clicked on):</p>
<p>Note that we have added the CSS3 transition property to animate the border color
(takes 0.5 seconds to change the color on focus).</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">

</form>
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
border-radius: 4px;
font-size: 16px;
background-image: url('searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Rezultati
9) <!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
border-radius: 4px;
font-size: 16px;
background-image: url('searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
width: 100%;
</style>
</head>
<body>
<p>Animated search input:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Rezultati
10) <!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
border-radius: 4px;
font-size: 16px;
resize: none;
}
</style>
</head>
<body>
<p><strong>Tip:</strong> Use the resize property to prevent textareas

from being resized (disable the "grabber" in the bottom right corner):</p>
<form>
<textarea>Some text...</textarea>
</form>
</body>
</html>
Rezultati
11) <!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
</style>
</head>
<body>
<p>A styled select menu.</p>
<form>
<select id="country" name="country">
<option value="au">Australia</option>
<option value="ca">Canada</option>
<option value="usa">USA</option>
</select>
</form>
</body>
</html>
Rezultati
12) <!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
border: none;
color: white;
padding: 16px 32px;
margin: 4px 2px;
cursor: pointer;
</style>
</head>
<body>
<p>Styled input buttons.</p>
<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</body>
</html>
Rezultati
CSS Counters
Create a counter
Nested counters 1
Nested counters 2
1)
2) <!DOCTYPE html>
<html>
<head>
<style>
body {
h1 {
counter-reset: subsection;
}
h1::before {
content: "Section " counter(section) ". ";
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
</style>
</head>
<body>
<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>
specified.</p>
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<head>
<style>
ol {
}
li::before {
content: counters(section,".") " ";
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>

specified.</p>
</body>
</html>
Rezultati

CSS Commands

Uploaded by

CSS Commands

Uploaded by

`

The element selector

CSS syntax explained

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

Every paragraph will be affected by the style.

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

This paragraph is not affected by the style.

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

Red and center-aligned heading

Red and center-aligned paragraph.

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

This heading will not be affected

This paragraph will be red and center-aligned.

Set the background color of a page

Background properties explained

<p>This page has a background color!</p>

This page has a background color!

<h1>CSS background-color example!</h1>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

CSS background-color example!

This paragraph has its own background color.

<p>This page has an image as the background!</p>

This page has an image as the background!

<p>Here, a backgound image is repeated only horizontally!</p>

Here, a backgound image is repeated only horizontally!

background-position: right top;

<p>W3Schools background no-repeat, set position example.</p>

background-position: right top;

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

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

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

background: #ffffff url("img_tree.png") no-repeat right top;

background: #5d9ab2 url("img_tree.png") no-repeat top left;

border: 1px solid gray;

Border properties explained

border-width: 2px 10px 4px 20px;

<h2>The border-width Property</h2>

<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>

<p class="two">Some text.</p>

<p class="three">Some text.</p>

<p class="four">Some text.</p>

<p class="five">Some text.</p>

<p class="six">Some text.</p>

<p class="seven">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.

Always specify the "border-style" property to set the borders first.</p>

<p><b>Note:</b> The "border-bottom-width" property does not work if it is used

<p><b>Note:</b> The "border-left-width" property does not work if it is used

<p><b>Note:</b> The "border-right-width" property does not work if it is used

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}