Adding all of our css between <style> and </style> tags creates huge HTML file that are difficult to edit.
We can move css to a style sheet, or a special file just for styling webpage. As the index.html the css style sheet name will end with the ( .css ) style.css.
Now our webpage have to files :
- index.html
- style.css
How to Link a style sheet to html ?
- We use the link tags inside the head element
To know what kind of file to include, the opening link tag need the rel attribute. The rel attribute value is always set to stylesheet.
<link rel =”stylesheet”/> - How To specify the style sheet’s location
To specify the style sheet’s location we set the href attribute.
<link rel=”stylesheet” href=”style.css”/>
Now let se up a good configuration of our webpages. First let start with the index.html
<!DOCTYPE html>
<html>
<head>
<title> My website </title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1> My title here </h1>
<p> How to add css in html page </p>
</h3> Css attribute </h3>
<div> <p> Css attribute ar </P>
<ol>
<li> Rel </li>
<li> Href </li>
</ol>
</div>
</body>
</html>Then the style.css file:
// css property
body {
Background-color: lightBlue;
}
h1 {
font-size: 30px;
color: green;
}
h3 {
font-size: 25px;
color: red;
}
p {
font-family: Papyrus;
}
Hey! Guess what ? Now you can create your own webpage with a lot of style. In the incoming posts we will talk about CSS in deep.
