Cascading Style Sheets

Description:

Use this wizard to create comprehensive dynamic CSS links. Control styles for normal links, active links, visited links and add link hover effects! Hover link effects work in IE and Netscape 6 only.

Directions:

Fill out as many of the fields below as required and click the "Generate Code" button. Grab the code and place it before the closing </head> tag within your HTML page. Use the 'Grab Text' buttons to select the code within the adjacent textarea. Then use Control-C or Edit -> Copy to buffer the text for pasting into your document.

CSS Links Wizard
Normal Links			Link Hover
Color:			Color:
Size:			Size:
Font:			Font:
Style			Style:
Weight:			Weight:
Underline:			Underline:
Cursor:			Cursor:
Variant:			Variant:
Case:			Case:
BG Color:			BG Color:

Active Links			Visited Links
Color:			Color:
Size:			Size:
Font:			Font:
Style:			Style:
Weight:			Weight:
Underline:			Underline:
Cursor:			Cursor:
Variant:			Variant:
Case:			Case:
BG Color:			BG Color:

Then use Control-C to copy the text into your web page.

Powered by www.cgiscript.net

CSS Template Layouts

View Sample XHTML CSS Template Layout

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML CSS Template</title>
<META NAME="DESCRIPTION" CONTENT="XHTML CSS Template, CSS Layout sample, copy and paste source code.">
<META NAME="KEYWORDS" CONTENT="XHTML CSS Template, CSS Layout sample, copy and paste source code.">
<style type="text/css" media="screen" />
html,body{margin:0;padding:0}
body{font: 85%/1.3 Garamond,Arial,sans-serif;
    text-align: left;background: #fff;padding-bottom:20px}
a { color: #0066B3; background: inherit; text-decoration: none;}
h1 { font: bold 2.1em Garamond, Arial, Sans-Serif; color: #036DA7 }
h2 { font: bold 1.1em Garamond, Arial, Sans-Serif; padding: 0; margin: 0; }

div#header{width:100%;overflow:hidden;background: #1E90FF; }
div#header h1,div#menu{width:770px;margin:0 auto;text-align:left}
div#header h1{padding: 30px 0 20px;color: #fff}

ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{float:right;font-size: 80%}
ul#nav li{float:left;margin-left: 3px;text-align: center}
ul#nav a{float:left;width: 95px;padding: 5px 0;background: #FF69B4;text-decoration:none;color: #FFF; border-top : 1px solid #fff; border-left : 1px solid #fff; border-right : 1px solid #fff;}
ul#nav a:hover{background: #fff;color: #000}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}

#right {
	float: left;
	width: 76%;
	padding: 1em;
	margin-bottom: 1.2em;
	background: #eee;
	text-align: justify;
}

#left {
	float: right;
	width: 20%;
	margin: 0 0 10px 0;
	
}

#left .box {
	
	padding: 1em;
	margin: 0 0 1em 0;
	background : #E6E6FA;
}

#content {
font: 95%/1.3 Garamond,Arial,sans-serif;
	margin: 0 auto;
    padding: 15px;
	background: #fff;
	
	
}

ul {  padding: 0; margin: 0;}
li { list-style-type: none;}
</style>

</head>
<body>
<div id="header">
<h1>XHTML/CSS Template</h1>
 <div id="menu">
  <ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About Me</a></li>
   <li><a href="#">Archives</a></li>
   <li><a href="#">Sitemap</a></li>
  </ul>
 </div>
</div>
<div id="content">
<div id="right">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse facilisis nisl quis erat. Quisque ac felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu turpis ut nisi fringilla feugiat. Vestibulum mollis elementum libero. Maecenas erat. Quisque auctor ultricies lacus. Mauris sollicitudin elit sed felis. Curabitur egestas suscipit lectus. Fusce tempor est quis lorem. Suspendisse bibendum, sem at luctus semper, ante lorem auctor diam, sit amet fringilla diam magna non metus. Ut eget nibh. Morbi felis eros, ultricies sed, auctor nec, tincidunt id, tellus. Maecenas eu massa. Donec gravida. Aliquam erat nisl, eleifend eget, aliquam ultricies, consectetuer in, orci.
</p>
<p>
Nunc commodo metus et lorem. Phasellus vel libero. Vestibulum eu enim. Mauris pharetra. Vestibulum ligula libero, vestibulum quis, commodo non, sagittis eget, elit. Ut nec tellus. Nunc ligula quam, vulputate ut, imperdiet nec, luctus at, magna. Nunc posuere nulla ac tortor. Donec facilisis, turpis eu hendrerit ultricies, lectus sapien nonummy justo, eget rutrum lorem nulla sed nunc. Nam vestibulum neque vitae lacus aliquam tristique. Ut odio quam, mollis in, ultrices vel, ullamcorper id, diam. Curabitur eget odio a lacus pulvinar condimentum. Suspendisse elementum.
</p>
<p>
Quisque vulputate. Aliquam condimentum, odio vel ultrices sodales, augue lorem vehicula mi, vel nonummy nisl eros et tortor. Duis laoreet pellentesque lorem. Nam sagittis condimentum libero. Nullam a ante vel massa accumsan elementum. Sed mauris metus, tincidunt quis, blandit at, viverra a, ligula. Pellentesque neque metus, mattis non, tincidunt vitae, euismod scelerisque, nulla. Fusce justo. Donec nec nibh. Sed suscipit bibendum leo. Nulla erat ligula, egestas consequat, sagittis ut, fermentum a, diam. Sed turpis est, aliquam nec, lacinia sed, aliquam non, libero. Ut turpis. Pellentesque viverra pharetra quam.
</p>
<p>
Aenean dapibus, leo vitae eleifend porta, sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros ut erat. Ut purus. Nullam ac tellus et eros condimentum interdum.
</p>
<p>
Mauris orci mauris sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros.
</p>
<br /><br />
<div style="width:100%;color:DeepPink;background:LightGrey;padding-left:2px;padding-top:5px;font-family:Georgia,Times;font-size:14px;font-weight:bold;line-height:1em;padding-bottom:5px;" onClick="top.location.href='http://surfcitydomains.com/';">
<span title="Link to Home" onmouseover="this.style.color='white';" onmouseout="this.style.color='DeepPink';">Your Company</span>
<span style="font-family:geneva,arial;color:DeepPink;font-size:14px;font-weight:bold;padding-left:5px;">	  
	  © 2006 - <script language="JavaScript" type="text/javascript">
      var today = new Date()
      var year = today.getYear()
      if (year < 1900)
      {
      year = year + 1900;
      }
      document.write(year)
      </script>   All Rights Reserved</span>
</div>

</div>
	
<div id="left">
	<div class="box">
			<h2>News :</h2>	
			<p>This XHTML/CSS Template was inspired by great NiftyCube layouts. It is released under GPL and it is xhtml/css valid.</p>
	</div>
			
	<div class="box">
				<h2>Links :</h2>
				<ul>
				<li><a href="http://www.surfcitydomains.com/links.php">Link Network</a></li>
				<li><a href="http://www.surfcitydomains.com/netlinks.html">Webmaster Link Partners</a></li>
				</ul>
	</div>
		
    <div class="box">
	   <div style="font-size: 0.8em;">Compliments of <a href="http://www.surfcitydomains.com">Surf City Domains</a></div>
	</div>

<div class="box">	
<div style="width: 150px;padding:10px; background-color: black;">
<br> 
<span style="border: 5px solid silver;margin-left:10px; margin-top: 10px; font-size: 64px; line-height: 1.1em;color:White; font-weight: bold; letter-spacing: -10px;">Sleek</span>
<br><span style="border: 2px solid Violet; width: 60px; height: 60px; margin-left: -3px; font-size: 44px; color: deeppink; font-weight: bold;">Design</span>
<b style="border: 2px solid Lime;margin-top: -25px; color: Lime; width: 30px; font-size: 20px; font-style: italic; line-height: 1.2em;">by</b>
<div style="border: 2px solid silver;color: Aqua; font-weight: bold; margin-left: 3px; margin-top: -1px; font-size: 16px; line-height: 1.1em;">Surf City Domains</div>
<br>
</div>
</div>

</div>

</body>
</html>

CSS Premade 2 Column Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 2 Column Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="CSS 2 Column Layout" />
<meta name="keywords" content="CSS 2 Column Layout" />

* { padding: 0; margin: 0; }

body
{
margin:0px 0px 0px 0px;
}

#wrapper
{ 
margin: 0 auto;
width: 100%;
}

#header {
color: #333;
width: 100%;
float: left;
padding: 10px;
border: 0px solid #ccc;
height: 50px;
margin: 0px 0px 0px 0px;
}

#subheader
{
float: left;
width: 100%;
color: #FFFFFF;
padding: 5px;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
background: #000080;
}

#leftcolumn
{ 
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 200px;
float: left;
background-color:#8B0000;
}

#centercolumn
{ 
float: left;
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width:600px;
display: inline;
background: #F2F2E6;
}

#footer
{ 
width: 100%;
clear: both;
color: #333;
border: 0px solid #ccc;
background: #000080;
margin: 0px 0px 10px 0px;
padding: 3px;
}

h1
{
font-family: verdana, arial, times;
text-align:center;
}

p
{
text-align: left;
font-family: arial, times;
font-size: 100%;
line-height: .5cm;
}

p.subheader
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.lefthandcolumn
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.footer
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

a.free:link{color: #ffffff}
a.free:link {text-decoration: none}
a.free.link {font-size: 100%}
a.free:visited {text-decoration: none}
a.free:visited {color: #ffffff}
a.free:visited {font-size: 100%}
a.free:hover {text-decoration: none}
a.free:hover {color: #ffffff}
a.free:hover {font-size: 100%}
a.free:active {color: #ffffff}
a.free:active {font-size: 100%}

</style>

</head>

<body>

<h1>
 
your Header goes here

</h1>
		 </div>

your subheader goes here

</p>

</div>

left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />

</p>
		 
		 </div>

<p>

center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />

</p>

</div>

© 2006 - <script language="JavaScript" type="text/javascript">
      var today = new Date()
      var year = today.getYear()
      if (year < 1900)
      {
      year = year + 1900;
      }
      document.write(year)
      </script>   Your Company   All Rights Reserved

</p>
		    
</div>

</div>

</body>
</html>

CSS Premade 3 Column Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 3 Column Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="CSS 3 Column Layout" />
<meta name="keywords" content="CSS 3 Column Layout" />

* { padding: 0; margin: 0; }

body
{
margin:0px 0px 0px 0px;
}

#wrapper
{ 
margin: 0 auto;
width: 100%;
}

#header {
color: #333;
width: 100%;
float: left;
padding: 10px;
border: 0px solid #ccc;
height: 50px;
margin: 0px 0px 0px 0px;
}

#subheader
{
float: left;
width: 100%;
color: #FFFFFF;
padding: 5px;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
background: #000080;
}

#leftcolumn
{ 
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 180px;
float: left;
background-color:#8B0000;
}

#centercolumn
{ 
float: left;
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 450px;
display: inline;
background: #F2F2E6;
}

#rightcolumn
{ 
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 180px;
float: left;
background-color:#008000;
}

#footer
{ 
width: 100%;
clear: both;
color: #333;
border: 0px solid #ccc;
background: #000080;
margin: 0px 0px 10px 0px;
padding: 3px;
}

h1
{
font-family: verdana, arial, times;
text-align:center;
}

p
{
text-align: left;
font-family: arial, times;
font-size: 100%;
line-height: .5cm;
}

p.subheader
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.lefthandcolumn
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.righthandcolumn
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.footer
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

</style>

</head>

<body>

<h1>
 
your Header goes here

</h1>
		 </div>

your subheader goes here

</p>

</div>

</p>
		 
		 </div>

<p>

</p>

</div>

right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />

</p>
		 
</div>

</p>
		    
</div>

</div>

</body>
</html>

CSS Generator Powered by SearchBliss Web Tools