External Style Sheet

Chikul
Posted by in CSS 3 category on for Beginner level | Views : 6674 red flag

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.
Page copy protected against web site content infringement by Copyscape

About the Author

Chikul
Full Name: Prasanti Prusty
Member Level: Bronze
Member Status: Member
Member Since: 11/20/2009 10:34:27 PM
Country: India

http://knowledgeparlour.blogspot.com/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)