Style Sheet Designs
Creating Link Boxes in CSS
<html>
<head>
<style type=”text/css”>
a:link,a:visited
//Styles to be applied in link Box
{
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>
Output:
The link box will be created with the Specified Styles.
To set an Background Image and repeat the image Horizontally by using CSS
<html>
<head>
<style type=”text/css”>
body
{
background-image:urlC:\Users\systemuser\Pictures\flower.jpg’);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hai Friends!!</h1>
</body>
</html>
Output:
The image in the given URL will be set as the Background with the Text “Hai Friends!!”.
External css
Steps:
1:Create new html file and copy link.html code and save it as link.html.
2.Create new css file and copy external.css code and save it as external.css.
3.link.html will connect css externally.
4.Run link.html to get output.
link.html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link rel=”stylesheet” type=”text/css” href=”external.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS</title>
</head>
<body>
<h3 align=”center”>External css</h3>
<p>This page uses external CSS.</p>
<p>p.first class code</p>
</body>
</html>
external.css:
body{ background-color:#00CCCC;}
p { color:#FFFFFF;
}
h3{ color:#000000;
text-decoration:underline;
text-transform:uppercase;
}
p.first{
color:#33FFCC;
}
output:
External css
This page uses external CSS.
p.first class code
Program to insert Background Image
<html>
<head>
<style type=”text/css”>
body {background-image:url(‘systeuser/desktop/bc.jpg’);}/*inserting background image*/
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
output:
Hello!
(If u run this code in Internet Explorer,the background image will be displayed with “Hello!” Message).
Change Your Page Background Color Dynamically using Java Script
Copy and Paste following code in your site page.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Change Your page Background Color Using Java Script</title>
<link href=”blue.css” type=”text/css” title=”pagestyle” rel=”stylesheet” id=”pagestyle”/>
<script type=”text/javascript”>
function setCookie(c_name,value,expiredays)
{
var changecolor=new Date();
changecolor.setDate(changecolor.getDate()+expiredays);
document.cookie=c_name+ “=” +escape(value)+
((expiredays==null) ? “” : “;expires=”+changecolor.toUTCString());
}
// Get value stored in Cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + “=”);
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(“;”,c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return “”;
}
// This function run on body load event
function loadTheme()
{
var c_val=getCookie(“colorscheme”);
if (c_val!=”")
document.getElementById(“pagestyle”).href=c_val+’.css’;
}
// This function call ensures to load the Previously selected color Scheme by User
loadTheme();
// This function call on change of select box options
function changeTheme()
{
var c_val=document.getElementById(“changescheme”).value;
document.getElementById(“pagestyle”).href=c_val+’.css’;
setCookie(“colorscheme”,c_val,30);
}
</script>
</head>
<body>
<h1>Please Select Your Page Background Color..</h1>
<select name=”changescheme” id=”changescheme” onchange=”changeTheme()”>
<option value=”white”>White</option>
<option value=”red”>Red</option>
<option value=”blue”>Blue</option>
<option value=”orange”>Orange</option>
<option value=”black”>Black</option>
</select>
</body>
</html>
Using Style sheet Files are
blue.css
root {
display: block;
}
body
{
background-color:#003366;
}
h1{font-family:helvitica;font-size:20px;color:#ffffff;}
white.css
root {
display: block;
}
body
{ background-color:#FFFFFF;
}
h1{font-family:helvitica;font-size:20px;color:#ffffff;}
Giving Links In CSS
/* The Example1 will be having the font styles,colors and font size for the content present in Example2. copy and paste the code of Example2 to get the output.*/
Example1.css
body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}
Example2.css
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”example1.css” />
</head>
<body>
<h1>Hai!!</h1>
<h2>Have A Nice Day</h2>
</body>
</html>
Output:
Hai!!
Have A Nice Day
A simple CSS code
/* A Simple CSS code to display A Message*/
<html>
<head>
<style type=”text/css” >
body
{
background-color:blue;
}
h1
{
color:blue;
text-align:center;
}
p
{
font-family:”times new roman”;
font-size=20px;
}
</style>
</head>
<body>
<h1> CSS WELCOME!!!</h1>
<p>Hi!!!Welcome To CSS.</p>
</body>
</html>
The output will be like this
Hi!!!Welcome To CSS.
Search
Blogroll
- Copywriting blog Searchenginegenie’s official copywriting blog
- Linkbuilding blog Searchenginegenie’s official link building blog – tips and tricks
- PPC Blog Searchenginegenie’s official PPC blog – Pay per clicks
- Programming Blog Searchenginegenie’s official programming blog
- SEO Blog Searchenginegenie’s official SEO blog
- SEO News Searchenginegenie’s official news on internet and SEO
- Web Design blog Searchenginegenie’s official web designing blog
- What's Hot @ SEG Most recent whacky happenings @ SEG
