How to Add External CSS in HTML

In this article, we will discuss how to add external CSS in HTML.

HTML

HTML is short for Hypertext Markup Language, which is utilized to give the structure of the web page.

CSS

CSS is the short for Cascading Style Sheet which is utilized to give the style to the elements of HTML so that they look attractive to make the web page look eye-catching.

There are 3 methods by which we can add CSS in HTML:

External CSS
Internal CSS
Inline CSS

We will comprehend each method properly one by one.

1. External CSS

External CSS is utilized to give the style on multiple HTML pages because we use a separate file that contains CSS. This separate file is saved with the .css extension. This file can be added to any HTML document. If there are changes in the style, then we can easily change the style without even changing the HTML document.

We can link the CSS file with the HTML document to provide the style of the web page. We can use the "link" HTML element to add the external file. The <link> tag comes under the <head> tag. There are many attributes that <link> tag involves, such as src, rel, type, etc. The "src" attribute is used to define the location, so the CSS file name that we want to add is written inside it.

The "rel" attribute is used to explain the relationship between the CSS document and the HTML document. The "type" attribute is utilized to define the content we are linking with the HTML document. The "type" attribute is optional, but if utilizing it, then for the stylesheet, we have to set the value as text/CSS.

Demonstration to Add External CSS in HTML

We will construct separate files of HTML & CSS and then link both files using <link> tag.

CSS code:

* {
    margin: 5px;
    padding: 5px;
    background-color: bisque;	
    color: brown;
    box-sizing: border-box;
}
h3 {
    font-size: 40px;
}
label {
    display: block;
    font-size: 18px;
    font-weight: bold;
}
input {
    border-radius: 5px;
    border: 1px solid rgb(240, 156, 156);
    box-shadow: inset 0px 0px 15px brown;
    width: 350px;
    height: 36px;
}
#submit {
    width: 86px;
    font-weight: bold;
}

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Student Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Student Form</h3>
    <form>
        <label for="first_name">First Name:</label> 
        <input type="text" id="first_name" name="first_name"> <br>
        <label for="last_name">Last Name:</label> 
        <input type="text" id="last_name" name="last_name"> <br>
        <label for="email_id">Email ID:</label> 
        <input type="email" id="email_id" name="email_id"> <br>
        <label for="course">Course:</label> 
        <input type="text" id="course" name="course"> <br><br>
        <input type="submit" id="submit" value="Submit">
      </form> 
</body>
</html>

Output:

When a CSS document is not linked to an HTML document, then the web page will appear, as you can witness below. It is very simple and needs to look more eye-catching.

When a CSS document is linked to an HTML document, the web page will appear, as we can witness downward. It is modern and looks eye-catching.

2. Internal CSS

Internal CSS is written inside the "style" HTML element. The CSS that we need to apply to the HTML document is written inside the <style> tag, and the <style> tag is written inside the <head> tag after the <title> tag.

Demonstration to add internal CSS in HTML:

We will write both CSS and HTML in the same document in this illustration.

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Login Form</title>
        <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }
  
        body {
            background: Peru;
            font-family: 'Rubik', sans-serif;
        }
        
        .login-form {
            background: #fff;
            width: 500px;
            margin: 65px auto;
            display: -webkit-box;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                    flex-direction: column;
            border-radius: 4px;
            box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
        }
        .login-form h1 {
            padding: 35px 35px 0 35px;
            font-weight: 300;
        }
        .login-form .content {
            padding: 35px;
            text-align: center;
        }
        .input-field {
            padding: 12px 5px;
        }
        input {
            font-size: 16px;
            display: block;
            font-family: 'Rubik', sans-serif;
            width: 100%;
            padding: 10px 1px;
            border: 0;
            border-bottom: 1px solid #747474;
            outline: none;
            -webkit-transition: all .2s;
            transition: all .2s;
        }
        input::placeholder {
            text-transform: uppercase;
        }
        input:focus {
            border-color: #222;
        }
        .link {
            text-decoration: none;
            color: #b38787;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            display: inline-block;
            margin-top: 10px;
        }
        .button{
            text-decoration: none;
            color: #5e0f0f;
            letter-spacing: 0.2px;
            text-transform: uppercase;
            display: inline-block;
            margin-top: 10px;
        }
</style>
</head>
<body>

<div class="login-form">
    <form>
        <h1>Login</h1>
        <div class="content">
            <div class="input-field">
                <input type="email" placeholder="Email" autocomplete="nope">
            </div>
        <div class="input-field">
            <input type="password" placeholder="Password" autocomplete="new-password"> <br> <br>    
            <button class="button" type="submit" form="login-form" value="Submit">Submit</button>
            <button class="button" type="button">Cancel</button>
        </div>
        <a href="#" class="link">Forgot Your Password?</a>
        </div>
    </form>
</div>
</html>

Output:

Here is the output downwards, in which we can witness the login form, which is given a style using internal CSS.

3. Inline CSS

When CSS is written inside each element where we require to apply style then it is known as inline CSS. The "style" attribute is utilized to add the style. It is not recommended to use because it takes a lot of time to apply style to each HTML element and it is hard to alter the style of any element afterwards.

Demonstration to add inline CSS in HTML:

We will construct a list box and add inline CSS in this illustration.

Code:

<!DOCTYPE html>    
<html> 
    <head>
        <title>List Box</title>  
    </head>   
<body style="background-color: rgb(249, 249, 145)">   
<h3 > FOOD : </h3>

<select name="Food" size="10" id="Food">  
<optgroup label="Pizza" style="background-color: rgb(249, 249, 145);">
    <option value="Corn Pizza">Corn Pizza</option>    
    <option value="Margherita Pizza">Margherita Pizza</option>
    <option value="Chilli Paneer Pizza">Chilli Paneer Pizza</option> 
    <option value="Paneer & Onion Pizza">Paneer & Onion Pizza</option>
    <option value="Cheesy Pizza">Cheesy Pizza</option>
    <option value="Capsicum Pizza">Capsicum Pizza</option> 
    <option value="Onion Pizza">Onion Pizza</option>  
    <option value="Paneer Pizza"> Paneer Pizza</option> 
</optgroup> 
<optgroup label="Burger" style="background-color: rgb(249, 249, 145);">
    <option value="Aloo Tikki Burger">Aloo Tikki Burger</option>
    <option value="Egg Burger">Egg Burger</option>
    <option value="Dosa Masala Burger">Dosa Masala Burger</option>
    <option value="Chicken Burger">Chicken Burger</option>
    <option value="Schezwan Veggie Burger">Schezwan Veggie Burger</option>  
    <option value="Aloo Cheese Burger">Aloo Cheese Burger</option>  
    <option value="Veggie Burger">Veggie Burger</option>
    <option value="Veg Chilli Burger">Veg Chilli Burger</option>
</optgroup>   
</select> <br> <br>
<input type="submit" value="submit" style="background-color: rgb(119, 241, 129); width: 75px; height: 36px; border-radius: 5px; font-weight: bold;">
</body>    
</html>

Output:

Here in the output, we can witness a list box, which is given style utilizing inline CSS.

Conclusion

We have comprehended how to add external CSS in HTML. Some points to remember are given below:

1. There are three methods to add CSS in HTML:

External CSS: It is written in a separate document with the .css extension.
Internal CSS: It is written inside <style> tag under <head> tag.
Inline CSS: It is written inside each element that we require to style using the "style" attribute.