OurResource: CSS tutorial

A fixed background image (this image will not scroll with the rest of the page)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

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

</html>

output:
=====

The background-image is fixed. Try to scroll down the page.

=====================================================================
Control the letters in a text
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
This is some text.
This is some text.
This is some text.
</body>
</html>

output:
======

THIS IS SOME TEXT.

this is some text.

This Is Some Text.

=========================================================================

Add different colors to visited/unvisited links

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>

<body>
<a href="default.asp" target="_blank">This is a link</a>
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.
</body>
</html>

output:
======

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.

=======================================================================

Use of text-decoration on links

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
</style>
</head>

<body>
<a href="default.asp" target="_blank">This is a link</a>
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.
</body>
</html>

output:
=====

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.

======================================================================

Specify a background color for links

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>

<body>
<a href="default.asp" target="_blank">This is a link</a>
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.
</body>
</html>

output:
======

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.

=====================================================================

Add other styles to hyperlinks

<!DOCTYPE html>
<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>
Mouse over the links to see them change layout.

<a class="one" href="default.asp" target="_blank">This link changes color</a>
<a class="two" href="default.asp" target="_blank">This link changes font-size</a>
<a class="three" href="default.asp" target="_blank">This link changes background-color</a>
<a class="four" href="default.asp" target="_blank">This link changes font-family</a>
<a class="five" href="default.asp" target="_blank">This link changes text-decoration</a>
</body>

</html>

output:
=====

Mouse over the links to see 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

========================================================================

Add other styles to hyperlinks

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>outout:
======
This is a link

================================================================
Set an image as the list-item marker
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
===================================================================
Set an image as the list-item marker - Crossbrowser solution

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

======================================================================

OurResource

Monday, 23 July 2012

CSS tutorial

No comments:

Post a Comment