SEO Tutorial
-------------------------------------------------------------------
1.Set the background color
---------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
----------------------------------------------------------------------
2.Set an image as the background-
-------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg')
}
</style>
</head>
<body>
</body>
</html>
-------------------------------------------------------
3.How to repeat a background image
----------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
---------------------------------------------------------------------------
4.How to repeat a background image only vertically
---------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------
5.How to repeat a background image only horizontally
---------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-x
}
</style>
</head>
<body>
</body>
</html>
----------------------------------------------------------------------
6.How to display a background image only one time
----------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image: url('bgdesert.jpg');
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
-------------------------------------------------------------------------
7.How to place the background image
---------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<p><b>Note:</b> For this to work in Mozilla, the background-attachment property must be set to "fixed".</p>
</body>
</html>
-----------------------------------------------------------------------------
8.How to position a background image using %
-----------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}
</style>
</head>
<body>
<p><b>Note:</b> For this to work in Mozilla, the background-attachment property must be set to "fixed".</p>
</body>
</html>
------------------------------------------------------------------------------------
9.How to position a background image using pixels
------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
</head>
<body>
<p><b>Note:</b> For this to work in Mozilla, the background-attachment property must be set to "fixed".</p>
</body>
</html>
-------------------------------------------------------------------------------------------
10.A fixed background image (this image will not scroll with the rest of the page)
----------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<body>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
</body>
</html>
---------------------------------------------------------------------------------------------------
11.All the background properties in one declaration
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>
</html>
---------------------------------------------------------------------------------------
11.Set the color of the text
---------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
------------------------------------------------------------------------------------------
12.Set the background-color of the text
-----------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span>
</p>
</body>
</html>
-------------------------------------------------------------------------------------
13.Specify the space between characters
-------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>
--------------------------------------------------------------------------------------------------
14.Specify the space between lines
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
----------------------------------------------------------------------------------------
15.Align the text
----------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
</body>
</html>
--------------------------------------------------------------------------------------------------
16.Decorate the text
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<p><a href="http://www.w3schools.com/default.asp">This is a link</a></p>
</body>
</html>
--------------------------------------------------------------------------------------------------
17.Indent text
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>
<body>
<p>
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
18.Control the letters in a text
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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 in a paragraph</p>
<p class="lowercase">This is some text in a paragraph</p>
<p class="capitalize">This is some text in a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
19.Set the text direction of an element
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
div.one
{
direction: rtl
}
div.two
{
direction: ltr
}
</style>
</head>
<body>
<div class="one">Some text. Right-to-left direction.</div>
<div class="two">Some text. Left-to-right direction.</div>
</body>
</html>
--------------------------------------------------------------------------------------------------
20.Increase the white space between words
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
word-spacing: 30px
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
21.Disable text wrapping inside an element
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
white-space: nowrap
}
</style>
</head>
<body>
<p>
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.
</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
22.Set the font of a text
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>
<body>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
23.Set a paragraph font using the "caption" value
--------------------------------------------------------------------------------------------------
<html>
<body>
<p>This is a normal paragraph</p>
<p style="font: caption">This is a paragraph with a "caption" font</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
24.Set the size of the font
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
25.Set the style of the font
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
26.Set the size of the font using font-size-adjust
-------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1 {font-size-adjust: 0.50}
h2 {font-size-adjust: 0.40}
p {font-size-adjust: 0.60}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
27.Set the variant of the font
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
28.Set the boldness of the font
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>
<p class="thicker">This is a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
29.All the font properties in one declaration
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
30.All the border properties in one declaration
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
31.Set different borders on each side
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>
<body>
<p class="soliddouble">Some text</p>
<p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
33.All the top border properties in one declaration
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-top: medium solid #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
34.All the bottom border properties in one declaration
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-bottom: medium solid #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
35.All the left border properties in one declaration
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-left: medium solid #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
36.All the right border properties in one declaration
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-right: medium solid #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
37.Set the style of the four borders
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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}
</style>
</head>
<body>
<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>
</body>
</html>
--------------------------------------------------------------------------------------------------
38.Set the style of the top border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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="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>
</body>
</html>
--------------------------------------------------------------------------------------------------
39.Set the style of the bottom border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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="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>
</body>
</html>
--------------------------------------------------------------------------------------------------
40.Set the style of the left border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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="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>
</body>
</html>
--------------------------------------------------------------------------------------------------
41.Set the style of the right border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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="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>
</body>
</html>
--------------------------------------------------------------------------------------------------
42.All the width border properties in one declaration
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-width: 5px
}
p.two
{
border-style: solid;
border-width: thick
}
p.three
{
border-style: solid;
border-width: 5px 10px
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px
}
p.five
{
border-style: solid;
border-width: 5px 10px 1px medium
}
</style>
</head>
<body>
<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><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
43.Set the width of the top border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-top-width: 15px
}
p.two
{
border-style: solid;
border-top-width: thin
}
</style>
</head>
<body>
<p class="one"><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>
<p class="two">Some text. Some more text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
44.Set the width of the bottom border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-bottom-width: 15px
}
p.two
{
border-style: solid;
border-bottom-width: thin
}
</style>
</head>
<body>
<p class="one"><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
45.Set the width of the left border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-left-width: 15px
}
p.two
{
border-style: solid;
border-left-width: thin
}
</style>
</head>
<body>
<p class="one"><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
46.Set the width of the right border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-right-width: 15px
}
p.two
{
border-style: solid;
border-right-width: thin
}
</style>
</head>
<body>
<p class="one"><b>Note:</b> The "border-right-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
47.Set the color of the four borders
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
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>
--------------------------------------------------------------------------------------------------
48.Set the color of the top border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-style: solid;
border-top-color: #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
49.Set the color of the bottom border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-style: solid;
border-bottom-color: #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
50.Set the color of the left border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-style: solid;
border-left-color: #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
51.Set the color of the right border
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border-style: solid;
border-right-color: #ff0000
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
52.Draw a line around an element (outline) (Does not work in IE)
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
outline: green dotted thick
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
53.Set the style of an outline (Does not work in IE)
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>
</head>
<body>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
54.Set the color of an outline (Does not work in IE)
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
outline-style: solid;
outline-color: #00ff00
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
55.Set the width of an outline (Does not work in IE)
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
border: red solid thin;
outline-style: solid;
outline-width: thick
}
p.two
{
border: red solid thin;
outline-style: solid;
outline-width: 2px
}
</style>
</head>
<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
56.All the margin properties in one declaration
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
57.Set the top margin of a text using a cm value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="topmargin">This is a paragraph with a specified top margin</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
58.Set the top margin of a text using a percent value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.topmargin
{
margin-top: 25%
}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="topmargin">This is a paragraph with a specified top margin</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
59.Set the bottom margin of a text using a cm value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="bottommargin">This is a paragraph with a specified bottom margin</p>
<p>This is a paragraph with no margin specified</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
60.Set the bottom margin of a text using a percent value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.bottommargin
{
margin-bottom: 25%
}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="bottommargin">This is a paragraph with a specified bottom margin</p>
<p>This is a paragraph with no margin specified</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
61.Set the left margin of a text using a cm value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="leftmargin">This is a paragraph with a specified left margin</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
62.Set the left margin of a text using a percent value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.leftmargin
{
margin-left: 25%
}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="leftmargin">This is a paragraph with a specified left margin</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
63.Set the right margin of a text using a cm value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 5cm}
</style>
</head>
<body>
<p style="text-align:right">This is a right aligned paragraph with no margin specified</p>
<p class="rightmargin" style="text-align:right">This is a right aligned paragraph with a specified right margin</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
64.Set the right margin of a text using a percent value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.rightmargin
{
margin-right:25%
}
</style>
</head>
<body>
<p style="text-align:right">This is a right aligned paragraph with no margin specified</p>
<p class="rightmargin" style="text-align:right">This is a right aligned paragraph with a specified right margin</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
65.Set the left padding of a tablecell
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
td {padding-left: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a left padding. This is a tablecell with a left padding.
</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
66.Set the right padding of a tablecell
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
td {padding-right: 5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a right padding. This is a tablecell with a right padding.
</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
67.Set the top padding of a tablecell
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
td {padding-top: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a top padding
</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
68.Set the bottom padding of a tablecell
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a bottom padding
</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
69.All the padding properties in one declaration
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
70.The different list-item markers in unordered lists
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
------------------------------------------------------------------------------------------------------
71.The different list-item markers in ordered lists
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="uroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lalpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="ualpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
------------------------------------------------------------------------------------------------------
72.All the list style types
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
</head>
<body>
<ul class="disc">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="circle">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>The "none" type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="decimal">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="decimal-leading-zero">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-roman">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="upper-roman">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-alpha">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="upper-alpha">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-greek">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="lower-latin">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="upper-latin">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="hebrew">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="armenian">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="georgian">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="cjk-ideographic">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="hiragana">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="katakana">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="hiragana-iroha">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="katakana-iroha">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
------------------------------------------------------------------------------------------------------
73.Set an image as the list-item marker
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
------------------------------------------------------------------------------------------------------
74.Place the list-item marker
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>This list has a list-style-position with a value of "inside":</p>
<ul class="inside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
<p>This list has a list-style-position with a value of "outside":</p>
<ul class="outside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
</body>
</html>
------------------------------------------------------------------------------------------------------
75.All list properties in one declaration
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
ul
{
list-style: square inside url('arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
TABLE
------------------------------------------------------------------------------------------------------
76.Set the layout of a table
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
77.Show empty cells in a table
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
78.Collapse a table border
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
table.coll
{
border-collapse: collapse
}
table.sep
{
border-collapse: separate
}
</style>
</head>
<body>
<table class="coll" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br />
<table class="sep" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
79.Set the space between table borders
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
table.one
{
border-collapse: separate;
border-spacing: 10px
}
table.two
{
border-collapse: separate;
border-spacing: 10px 50px
}
</style>
</head>
<body>
<table class="one" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br />
<table class="two" border="1">
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
80.Set the position of the table caption
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
caption
{
caption-side:bottom
}
</style>
</head>
<body>
<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Dimension
------------------------------------------------------------------------------------------------------
81.Set the height of an image using a pixel value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img.normal
{
height: auto
}
img.big
{
height: 160px
}
img.small
{
height: 30px
}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" />
<br />
<img class="big" src="logocss.gif" width="95" height="84" />
<br />
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
82.Set the height of an image using percent
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img.normal
{
height: auto
}
img.big
{
height: 50%
}
img.small
{
height: 10%
}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" />
<br />
<img class="big" src="logocss.gif" width="95" height="84" />
<br />
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
83.Set the width of an element using a pixel value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
width: 200px
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
84.Set the width of an element using percent
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
width: 50%
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
85.Set the maximum height of an element
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
max-height: 10px
}
</style>
</head>
<body>
<p>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.</p>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
86.Set the maximum width of an element using a pixel value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
max-width: 300px
}
</style>
</head>
<body>
<p>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.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
87.Set the maximum width of an element using percent
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
max-width: 50%
}
</style>
</head>
<body>
<p>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.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
88.Set the minimum height of an element
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
min-height: 100px
}
</style>
</head>
<body>
<p>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.</p>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
89.Set the minimum width of an element using a pixel value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
min-width: 1000px
}
</style>
</head>
<body>
<p>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.</p>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
90.Set the minimum width of an element using percent
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p
{
min-width: 200%
}
</style>
</head>
<body>
<p>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.</p>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
------------------------------------------------------------------------------------------------------
91.Specify the space between lines using a percent value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
92.Specify the space between lines using a pixel value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.small
{
line-height: 10px
}
p.big
{
line-height: 30px
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 20px.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
93.Specify the space between lines using a number value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in browsers is "1".
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
Classification
------------------------------------------------------------------------------------------------------
94.How to display an element as an inline element
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
<div>And this div section is not displayed!</div>
</body>
</html>
------------------------------------------------------------------------------------------------
95.How to display an element as a block element
----------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>A display property with a value of "block" results in</span>
<span>distance between two elements.</span>
</body>
</html>
-------------------------------------------------------------------------------------------------------
96.A simple use of the float property
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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="logocss.gif" width="95" height="84" />
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.
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.
</p>
</body>
</html>
-------------------------------------------------------------------------------------------
97.An image with border and margins that floats to the right in a paragraph
---------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
float:right;
border:1px dotted black;
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="logocss.gif" width="95" height="84" />
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.
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.
</p>
</body>
</html>
------------------------------------------------------------------------------------------
98.An image with a caption that floats to the right
---------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84" /><br />
CSS is fun!
</div>
<p>
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.
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.
</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>
-----------------------------------------------------------------------------------------------------
99.Let the first letter of a paragraph float to the left
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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.
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.
</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>
-----------------------------------------------------------------------------------------------------
100.Creating a horizontal menu
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>
</body>
</html>
-----------------------------------------------------------------------------------------------------
101.Creating a homepage without tables
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
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;
}
</style>
</head>
<body>
<div class="container">
<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,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------
102.Position an element relative to its normal position
--------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>This is a heading in normal position</h2>
<h2 class="pos_left">This heading is moved left to its normal position</h2>
<h2 class="pos_right">This heading is moved right to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>
-----------------------------------------------------------------------------------------------
103.Position an element with an absolute value
---------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
104.Position an element relative to the browser window
-------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">Some text</p>
<p class="two">Some more text</p>
</body>
</html>
-------------------------------------------------------------------------------------------------------
105.How to make an element invisible
------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
</head>
<body>
<h1 class="visible">This is a visible heading</h1>
<h1 class="invisible">This is an invisible heading</h1>
</body>
</html>
-----------------------------------------------------------------------------------------------------
106.How to make a table element collapse
----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
tr.coll
{
visibility:collapse
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="coll">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
----------------------------------------------------------------------------------------------------
107.Change the cursor
-----------------------------------------------------------------------------------------------------
<html>
<body>
<p>Move the mouse over the words to see the cursor change:</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:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>
</html>
----------------------------------------------------------------------------------------------------
108.Clear the sides of an element
------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
Positioning
-----------------------------------------------------------------------------------------------------------
109.Position an element relative to its normal position
-----------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>This is a heading in normal position</h2>
<h2 class="pos_left">This heading is moved left to its normal position</h2>
<h2 class="pos_right">This heading is moved right to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>
----------------------------------------------------------------------------------------------------------
110.Position an element with an absolute value
-----------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>
-------------------------------------------------------------------------------------------------
111.Set the shape of an element
---------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>
</html>
---------------------------------------------------------------------------------------------------------
112.How to show overflow in an element using scroll
------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</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, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------
113.How to hide overflow in an element
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
</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, scroll, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
How to show set the browser to automatically handle overflow
------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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>
----------------------------------------------------------------------------------------------------------
114.Vertical alignment of an image
----------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
This is an
<img class="top" border="0"
src="logocss.gif" width="95" height="84" />
image inside a paragraph.
</p>
<p>
This is an
<img class="bottom" border="0"
src="logocss.gif" width="95" height="84" />
image inside a paragraph.
</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------
115.Place an element "behind" another element
-----------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html>
----------------------------------------------------------------------------------------------------
116.Place an element "behind" another element 2
---------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------
117.Set the top edge of an image using a pixel value
-------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:0px
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------
118.Set the top edge of an image using a percent value
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:5%
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------
119.Set the bottom edge of an image using a pixel value
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
bottom:0px
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
120.Set the bottom edge of an image using a percent value
-------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
bottom:5%
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
121.Set the left edge of an image using a pixel value
--------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
122.Set the left edge of an image using a percent value
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:5%
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
123.Set the right edge of an image using a pixel value
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
right:0px
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
124.Set the right edge of an image using a percent value
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
img
{
position:absolute;
right:5%
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img src="logocss.gif" width="95" height="84" />
<p>Some text.</p>
</body>
</html>
Generated Content
-------------------------------------------------------------------------------------------------------
125.Changes the quotation marks on a page
-------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
q
{
quotes: ' '
}
</style>
</head>
<body>
<p><q>This is a <q>big</q> quote</q></p>
</body>
</html>
Pseudo-classes
--------------------------------------------------------------------------------------------------------
Add different colors to a hyperlink
-------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</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>
----------------------------------------------------------------------------
Add other styles to hyperlinks
-------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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 to see 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>
---------------------------------------------------------------------------
Hyperlink: use of :focus (does not work in IE)
-------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:focus {color: #00FF00}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
-----------------------------------------------------------------------------------
:first-child - change first child <p>
------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
-----------------------------------------------------------------------------------------
:first-child - change the first <i> in all <p> elements
--------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
:first-child - change all <i> elements in first child <p>
------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
:lang (does not work in IE)
--------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":</p>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Pseudo-elements
----------------------------------------------------------------------------------------------------------------
Make the first letter special in a text
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
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 letter of a text!
</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
Make the first line special in a text
----------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
Make the first letter and first line special
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
p:first-line
{
color: #0000ff;
font-variant: small-caps
}
</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>
------------------------------------------------------------------------------------------------------
Use :before to insert some content before an element (Does not work in IE)
---------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1:before
{
content: url(smiley.gif)
}
</style>
</head>
<body>
<h1>This is a header</h1>
<p>
The :before pseudo-element can be used to insert some content before the content
of an element.</p>
</body>
</html>
--------------------------------------------------------------------------------------
Use :after to insert some content after an element (Does not work in IE)
---------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
h1:after
{
content: url(smiley.gif)
}
</style>
</head>
<body>
<h1>This is a header</h1>
<p>
The :after pseudo-element can be used to insert some content after the content
of an element.</p>
</body>
</html>
Product Spotlight
---------------------------------------------------------------------------------------------------------------------
Stop hand-coding!
----------------------------------------------------------------------------------------------------------------------
