This tutorial will cover the process of including external CSS stylesheets in an HTML document.
HTML stands for Hypertext Markup Language, a fundamental tool used to define the structure of a webpage.
CSS stands for Cascading Style Sheets, a technology used to enhance the appearance of HTML elements, making them visually appealing and improving the overall look of a webpage.
There are 3 methods by which we can add CSS in HTML:
- External CSS
- Internal CSS
- Inline CSS
We will thoroughly understand each technique individually.
1. External CSS
Utilizing external CSS allows for styling across various HTML pages by employing a distinct file dedicated to CSS, saved with the .css extension. This file can be linked to any HTML file, enabling seamless updates to the styling without altering the HTML content.
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 serves to indicate the connection between the CSS file and the HTML file. On the other hand, the "type" attribute is employed to specify the nature of the content being linked to the HTML file. While the "type" attribute is not mandatory, if it is being used for a stylesheet, it should be assigned the value of text/CSS.
Demonstration to Add External CSS in HTML
We will create distinct HTML and CSS files and subsequently connect them by utilizing the <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:
If an HTML document does not have a linked CSS document, the webpage will display in a plain and unstyled manner as demonstrated below. To enhance its appearance and make it more visually appealing, additional styling is required.
Upon linking a CSS file to an HTML document, the resulting web page will display with a visually appealing modern layout, as observed below.
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:
In this example, we will be incorporating both CSS and HTML within a single document.
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:
Below is the following output displaying the login form that has been styled using internal CSS.
3. Inline CSS
Inline CSS is the practice of including CSS directly within individual HTML elements to apply styles. This is achieved using the "style" attribute. However, it is generally discouraged due to the inefficiency of having to apply styles to each HTML element separately and the difficulty of making subsequent style changes to elements.
Demonstration to add inline CSS in HTML:
In this example, we will create a list box and apply inline CSS styling to it.
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:
In the output below, you will see a list box styled using inline CSS.
Conclusion
We have comprehended how to add external CSS in HTML . Some points to remember are given below:
- 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 .