Welcome to Our Free Tutorial!

External - CSS

When we using CSS in our web page we keep the CSS separate from our HTML. Keep placing CSS in a separate file..

External CSS is a file that contains only CSS code and saved with a ".CSS" extension file. This CSS file in your HTML using the <link>.

We are going Teach whole step by step process.

File Creation

Let we start by making the external CSS file. Open notepad or any other plain text editor and type the following CSS code.

CSS Code:

body{ background-color: silver;} 
p { color: black; } 
h3{ color: yellow; }
      

Now save the file as (Design.CSS) file. Make sure you will not saving it as a (.txt) file. Now we create a new HTML file and write the following HTML Code:

HTML Code

CSS Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
<h3> A Yellow Header </h3>
<p> This paragraph has a black font.  
The background color of this page is silver because
 </p>
</body>
</html>
Then the save the file as “page.html” in the same directory, now open your HTML file in web browser and it look like this.

Display:

A Yellow Header

The background color of this page is silver because