![]()
Article posted by
Chikul on 1/23/2010 | Views: 4058 | Category:
CSS | Level: Beginner
If you found
plagiarised (copied) or inappropriate content,
please
let us know the original source along with your correct email id (to communicate) for further action.
External style sheets have many powerful that make them ubiquitous in professional Web sites:
It keeps your website design and content separate.
It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
You can make drastic changes to your web pages with just a few changes in a single CSS file.
It allows a single style sheet to control the rendering of multiple documents.
This results in a time-savings for the author, a savings of space for the web server, and less download time for the user.
This method can be used in both HTML and XML.
Introduction :
In Application When using CSS it is preferable to keep the CSS separate from your HTML.
Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design(CSS).
An External Style Sheet is a file containing only CSS syntax and should carry a MIME type of "text/css."
It is saved with a ".css" filename extensions that file is then referenced in your HTML using the <link> instead of <style>.
By using the Link Tag to load a basic external style sheet (CSS), it's possible to control the look n feel of multiply WebPages by making changes to One style sheet.
This means that it is easy to change font, bgcolor, background, etc on ALL pages - just by changing one external style sheet (CSS).
Those CSS files define page attributes for every page to which they are linked.
The style information is not explicitly tied directly to the document's elements, so Selector syntax is used to specify what styles attach to which portions of the document tree.
The full range of CSS syntax is allowed in this method.
Example with codes :
The 'link' is always added to the Head Section i.e anywhere between the <head> and the </head>
<link rel="stylesheet" type="text/css" href="style.css">
Just create a text (ASCII) file named (test.css) that contains the code shown below.
Put the style.css file in the same folder / directory as the file .
Let us create an external CSS file. Open up notepad.exe, or any other plain text editor and type the following CSS code.
CSS Code:
body
{
background-color: #FFFFF0;
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;
}
a
{
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: Blue;
text-decoration: underline
}
a:hover
{
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: Red;
background-color: Green
}
h1 { font-family: Arial, Verdana, sans-serif; font-size: 32px; color: blue }
table
{
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
Now save the file as a CSS (test.css) file.
Now create a new HTML file and fill it with the following code.
HTML Code:
<html>
<head runat="server">
<title>Style Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1> A Blue Header </h1>
<table>
<tr>
<td>
<a href="Download/Mama0147.jpg">Image</a>
</td>
</tr>
</table>
</body>
</html>
Then save this file as "Sample.html" (without the quotes) in the same directory as your CSS file.
Now open your HTML file in your web browser and it should look something like this..
Display:
A Blue Header
Image link in Blue Colour. then on Mouse hover it will be red colur with green background because we changed it with CSS!
Advantages :
External style sheets have many powerful that make them ubiquitous in professional Web sites:
- It keeps your website design and content separate.
- It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
- You can make drastic changes to your web pages with just a few changes in a single CSS file.
- It allows a single style sheet to control the rendering of multiple documents.This results in a time-savings for the author, a savings of space for the web server, and less download time for the user.
- This method can be used in both HTML and XML.
If you like this article, subscribe to our 
RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.
Found interesting? Add this to: