CSS External style sheet

EXTERNAL STYLE SHEET

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). External CSS is a file that contains only CSS code and is saved with a “.css” file extension.

HOW TO CREATE A CSS FILE:

1. Open any text editor (notepad,Dreamweaver)

2. Type the following CSS code:

body{background-color:blue;}
p{text-align:center}
h1{color:red;}

3. Save the file as sample.css

4. Now create a new HTML file with the following code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css"/>
</head>

<body>
<p>THE QUOTES</p>
<h1>LEARN WEB DEVELOPMENT</h1>
</body>
</html>

5. Then save this file as “index.html” in the same directory as your CSS file. Now open your HTML file in your web browser and see the output.

USE OF EXTERNAL STYLE SHEET:

  • 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.

Posted in CSS Tagged with: