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