How To Include a style Sheet on HTML

How To Include a style Sheet on HTML

Adding all of our css between <style> and </style> tags creates huge HTML file that are difficult to edit.

To make larger webpages more manageable

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 ?

  1. 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”/>

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

Leave a Reply

Your email address will not be published.

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!