Tuesday, December 16, 2014

Linking CSS file to a HTML file


We have to use CSS to beautify a website and to add various types of effects. We may use CSS codes inside the <head> and </head> tags, but it is not the best practice. That's why we need to know how to create a css file and how to link it with the html file.

 Step 01  Link the css file to the html file
Create a simple webpage and inside the <head> and </head> tag add the line <link rel="stylesheet" type="text/css" href="main.css"/>. The text main.css will be replaced by the name of the CSS file.

linking css to html,linking stylesheet,css tutorial

 Step 02  Add two more lines
Add two more lines <h1>Header Tag</h1> and <p>This is a paragraph</h1> inside the <body> and </body> tags. Then save the html file.

 Step 03  Create a CSS file
Create a new document using notepad or any other text editor, type the CSS codes given below in it and save it with .css extension. For example: main.css

h1{
color:crimson;
size:32px;
}

p{
color: #fff;
background-color: #333;
}

After adding the codes, save the document as main.css file.

The above codes will format the text inside of the <h1> and </h1> tags as we have defined. And it will also format the text inside of the <p> and </p> tags.

 Step 04  Check the html file whether it is working or not
Finally open the html file in a browser like Google Chrome, Mozilla Firefox etc. But remember to keep both of the html and css files in the same directory.


No comments:

Post a Comment