External CSS

Styling your Web page is one of the main concept while creating a webpage. With the help of CSS we can style our HTML file in three ways they are External CSS, Internal CSS  and Inline CSS . In this Blog we will learn about External styling.

External style sheet is a completely separate file where you can add styles to your HTML Page (or Website). Then you should link to the external style sheet from all your HTML pages.

External style sheet contains only style property with the help of tag attributes (Like class, id, heading, … etc). 

How to add External CSS to HTML file ?

By using <link> tag we can add External CSS to our HTML File. <link> tag should be put inside the head section.

Example: <head> <link rel=”stylesheet” type=”text/css” href=”mystyle.

Let’s understand it by doing small example

Example:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <div class="main">Welcome to Fullstackadda.com</div>
        <div id="sub">
            Get new Jobs Alerts Everyday
        </div>
    </div>
</body>

</html>

Now add External CSS

body {
    background-color:#f3e9d0;
}
.container {
    text-align:center;   
}
.main {
    color:red;
    font-size:50px;
    font-weight:bold;
}
#sub {
    font-style:bold;
    font-size:20px;
}

Output:

External CSS

In the above HTML file uses external style sheet to add styling.

Note: 

  • <link> tag is used to link the external style sheet to the html file.
  • href attribute specify the location of the external style sheet.

Example 2:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="yellow">Fullstackadda.com</h1>
    <p id="white">Happy Coding !!!</p>
</body>

</html>
body {
    background-color: black;
    text-align: center;
}

.yellow{
    color:yellow;
}

#white{
    color: white;
    font-size: 18px;
}

Output:

Priority of CSS:

  1. Now, coming to priority wise Inline styles has the highest priority than comes Internal style sheet and finally External style sheets have the least priority.

Points to Remember:

  1. By using <link> tag we can add External CSS to our HTML File. <link> tag should be put inside the head section.
  2. External style sheet contains only style property with the help of tag attributes (Like class, id, heading, … etc).
  3. <link> tag is used to link the external style sheet to the html file.
  4. href attribute specify the location of the external style sheet.