Css Examples

http://www.tizag.
com/cssT/liveExampleCss/
EXAMPLE 1
body{
}
background-color: #7FCAFF;
div#menuPane{
position: absolute;
top: 10px;
left: 2%;
width: 98%;
}
div.menu {
display: inline;
float: left;
margin-left: 1%;
padding: 0;
border: 2px solid #003961;
}
div.menu a {
display: inline;
font-size: 11px;
text-decoration: none;
text-align: left;
padding: 2px 5px;
color: black;
border-top: 1px solid black;
}
div.menu a:link{
background: #31AAFF;
}
div.menu a:visited{
}
div.menu a:hover{
background: #0078CC;
}
div.menu h4{
text-align: right;
padding: 2px;
margin: 0px;
}
div#content{
position: absolute;
left: 10%;
top: 135px;
width: 80%;
border: 2px double #003961;
background-color: #66A5D1;
padding: 2px;
}
div#content h3{
http://www.tizag.com/cssT/liveExampleCss/
background-color: #7FCAFF;
text-align: left;
display: block;
letter-spacing: -1px;
color: #003961;
padding: 2px;
div#content a:link{
color: black;
letter-spacing: 1px;
}
div#content a:visited{
color: black;
}
div#content a:hover{
background: #0078CC;
color: black;
}
EXAMPLE 1 HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="4style.css" />
<title>Tizag CSS Examples</title></head>
<body>
<div id="menuPane">
<div class="menu">
<h4>Site Info</h4>
<a href="http://www.tizag.com">Home</a><a
href="http://www.tizag.com/about/contact.php">Contact Us</a>
</div>
<div class="menu">
<h4>Beginner Tutorials</h4>
<a href="http://www.tizag.com/beginnerT/" >First Website
Guide</a><a href="http://www.tizag.com/htmlT/" >HTML Tutorial</a><a
href="http://www.tizag.com/cssT/" >CSS Tutorial</a><a
href="http://www.tizag.com/webhost/" >Web Host Guide</a>
</div>
<div class="menu">
<h4>Advanced Tutorials</h4>
<a href="http://www.tizag.com/javascriptT/" >Javascript
Tutorial</a><a href="http://www.tizag.com/phpT/" >PHP Tutorial</a><a
href="http://www.tizag.com/mysqlTutorial/" >MySQL Tutorial</a>
</div>
<div class="menu">
<h4>CSS Examples</h4>
<a href="http://www.tizag.com/cssT/liveExampleCss/">Soothing
Stuff</a><a
href="http://www.tizag.com/cssT/liveExampleCss/style2.php">Soothing
Reverse</a><a
href="http://www.tizag.com/cssT/liveExampleCss/style3.php">Vertical Limit</a><a
href="http://www.tizag.com/cssT/liveExampleCss/style4.php">Pancake Time</a>
</div>
</div>
<div id="content">
<h3>Total Conversion with CSS</h3>
<p>Every example that you will see inside our CSS Examples is made up of
the same HTML. All formatting, color changes, and
mouseovers are done with some changes to the CSS code. On every page we
urge you to examine the CSS code
to see how we did it. View the CSS Code for: <a href="style1Css.php"
target="_blank">Soothing stuff</a>,
<a href="style2Css.php" target="_blank">Soothing Reverse</a>, <a
href="style3Css.php" target="_blank">Verticle Limit</a> or,
<a href="style4Css.php" target="_blank">Pancake Time</a>.
</p>
<h3>Why Use CSS?</h3>
<ul>
<li> CSS allows you to expirement with many unique looks much
quicker than with HTML.</li>
<li> It seperates web site code into two logical groups: Content and
Design</li>
<li> Web sites can consist of many pages that are cumbersome to
manage. With a few changes to
a single CSS file that each page references, the entire site
can be changed in a fraction
of the time it took in the past.</li>
</ul>
<h3>Stick With It</h3>
<p>It may seem a little confusing at the beginning, but keep at it. Mastering
the intricacies of CSS will take
your web designing ability to a new level.
</p>
<h3>Sharing is Caring</h3>
<p>Feel free to take any and all of the CSS code from these examples and
use them in your own endeavors. If you don't have enough time
to learn CSS design and just want to have a template, take any of these
examples. And to those designers out there,
if you make an impressive layout, let me know about it and I might add it to
these examples.<br /> <br />
<a href="liveExampleCode.inc" target="_blank">View the HTML Code </a>.
</p>
</div>
</body>
</html>
EXAMPLE 2
body{
}
background-color: #A3F4A3;
div#menuPane{
position: absolute;
left: 25px;
top: 25px;
width: 25%;
}
div.menu {
display: block;
font-size: 14px;
margin: 0;
padding: 0;
border: 2px solid #7FC07F;
}
div.menu a {
display: block;
font-weight: bold;
text-decoration: none;
text-align: right;
margin: 0px;
color: black;
border-top: 1px solid #487048;
}
div.menu a:link{
background: #68D768;
}
div.menu a:visited{
}
div.menu a:hover{
background: #3FC73F;
}
div.menu h4{
padding: 2px;
margin: 0px;
}
div#content{
position: absolute;
left: 30%;
top: 25px;
width: auto;
border: 2px double #7FC07F;
background-color: #76D176;
padding: 2px;
margin-right: 5px;
}
div#content h3{
background-color: #A3F4A3;
text-align: right;
letter-spacing: -1px;
color: #386938;
padding: 2px;
border-bottom: 1px solid black;
}
div#content a:link, a:visited{
color: #A3F4A3;
}
div#content a:hover{
background: #3FC73F;
color: #A3F4A3;
}
EXAMPLE 2 HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="1style.css" />
<title>Tizag CSS Examples</title>
</head>
<body>
<div id="menuPane">
<div class="menu">
<h4>Site Info</h4>
<a href="http://www.tizag.com">Home</a><a
href="http://www.tizag.com/about/contact.php">Contact Us</a>
</div>
<div class="menu">
<h4>Beginner Tutorials</h4>
<a href="http://www.tizag.com/beginnerT/" >First Website
Guide</a><a href="http://www.tizag.com/htmlT/" >HTML Tutorial</a><a
href="http://www.tizag.com/cssT/" >CSS Tutorial</a><a
href="http://www.tizag.com/webhost/" >Web Host Guide</a>
</div>
<div class="menu">
<h4>Advanced Tutorials</h4>
<a href="http://www.tizag.com/javascriptT/" >Javascript
Tutorial</a><a href="http://www.tizag.com/phpT/" >PHP Tutorial</a><a
href="http://www.tizag.com/mysqlTutorial/" >MySQL Tutorial</a>
</div>
<div class="menu">
<h4>CSS Examples</h4>
<a href="http://www.tizag.com/cssT/liveExampleCss/">Soothing
Stuff</a><a
href="http://www.tizag.com/cssT/liveExampleCss/style2.php">Soothing
Reverse</a><a
href="http://www.tizag.com/cssT/liveExampleCss/style3.php">Vertical Limit</a><a
href="http://www.tizag.com/cssT/liveExampleCss/style4.php">Pancake Time</a>
</div>
</div>
<div id="content">
<h3>Total Conversion with CSS</h3>
<p>Every example that you will see inside our CSS Examples is made up of
the same HTML. All formatting, color changes, and
mouseovers are done with some changes to the CSS code. On every page we
urge you to examine the CSS code
to see how we did it. View the CSS Code for: <a href="style1Css.php"
target="_blank">Soothing stuff</a>,
<a href="style2Css.php" target="_blank">Soothing Reverse</a>, <a
href="style3Css.php" target="_blank">Verticle Limit</a> or,
<a href="style4Css.php" target="_blank">Pancake Time</a>.
</p>
<h3>Why Use CSS?</h3>
<ul>
<li> CSS allows you to expirement with many unique looks much
quicker than with HTML.</li>
<li> It seperates web site code into two logical groups: Content and
Design</li>
<li> Web sites can consist of many pages that are cumbersome to
manage. With a few changes to
a single CSS file that each page references, the entire site
can be changed in a fraction
of the time it took in the past.</li>
</ul>
<h3>Stick With It</h3>
<p>It may seem a little confusing at the beginning, but keep at it. Mastering
the intricacies of CSS will take
your web designing ability to a new level.
</p>
<h3>Sharing is Caring</h3>
<p>Feel free to take any and all of the CSS code from these examples and
use them in your own endeavors. If you don't have enough time
to learn CSS design and just want to have a template, take any of these
examples. And to those designers out there,
if you make an impressive layout, let me know about it and I might add it to
these examples.<br /> <br />
<a href="liveExampleCode.inc" target="_blank">View the HTML Code </a>.
</p>
</div>
</body>
</html>

Css Examples

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Css Examples

Încărcat de

Drepturi de autor:

Formate disponibile

http://www.tizag.

S-ar putea să vă placă și