Updated June 8, 2023
Overview of Add CSS in HTML
Cascading Style Sheets, commonly known as CSS, provide a means for web developers to style web pages as per their choice. Simple HTML pages without any styling format defined in CSS would appear very ugly and boring to the end users. Hence CSS is a critical component in modern websites to give them a beautiful, attractive, and appealing look. Traditionally, CSS was only responsible for controlling the look and feel of the website. Still, continuous upgrades and new CSS allows web developers and designers to control the website’s responsiveness for the web pages to have a distinguished UI for laptop, tablet, and mobile screens.
Since CSS is necessary for every website, it must be flexible and easy to define per the designer’s requirements. Also, since it can be very granular, CSS definitions must be re-usable for the same styling formats to be applied to several components together. Fortunately, CSS’s capabilities do meet these requirements.
Methods to Add CSS in HTML
You can add CSS to a web page using either one or all of the following options. Now, let’s explore these three methods in detail.
1. Inline CSS
With inline CSS, HTML designers can define styling information within the HTML element’s tag using the “style” attribute. It does possess several pros and cons, which will discuss with several examples shortly. Inline CSS is the most basic method for applying CSS. This method allows us to style just one HTML element at a time. It does not provide any styling re-usability. The style information is defined in the HTML element’s opening tag and is supplied as a value to the “style” attribute.
In the below example, we are changing the font color of h1, h6, and p elements using Inline CSS.
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">I am a Blue H1 heading</h1>
<h1 style="color:blue;">I am a Blue H6 heading</h1>
<p style="color:blue;">I am a Blue Paragraph</p>
</body>
</html>Output:
In the above example, we only wanted to change the font color of the H1, H6, and P tags to blue. Despite wanting to apply the same styling information, we could not re-use it and had to define it three times individually for each element. Because of its lack of reusability and increased time consumption, web designers do not prefer using Inline CSS when styling a website with multiple pages. Also, making a mobile responsive website would be almost impossible with Inline styling definitions.
2. Internal CSS
In Internal CSS, HTML designers can define styling information within the <style> </style> tags in the <head> </head> section of the HTML page with the help of class and id references. We will explore Internal CSS in-depth in the next section of this tutorial. As discussed before, internal CSS is defined in the same HTML file as the HTML code on which it is applied. The HTML code is in the body, whereas the CSS is in the <style> <style> tag header. You can bind the internal CSS with HTML elements using a class or an id. When you define CSS for a class, the CSS definition becomes reusable as multiple HTML elements can have the same class. However, when you bind it with an id, the CSS applies exclusively to the element with that specific id. In most cases, web designers prefer using class definitions of CSS instead of id.
Now let’s try the same example but implemented with internal CSS.
Code:
<!DOCTYPE html>
<html>
<head>
.bluecolor {
color : blue ;
}
</head>
<body>
<h1 class = " bluecolor "> I am a Blue H1 heading </h1>
<h1 class = " bluecolor "> I am a Blue H6 heading </h1>
<p class = " bluecolor "> I am a Blue Paragraph </p>
</body>
</html>Output:
As seen in the above example, we must declare the styling information once and then use it multiple times. Although internal CSS offers a significant level of styling reusability, the CSS defined in one HTML file cannot be utilized in another file. Also, declaring the CSS and HTML in the same file could significantly increase the file size and may cause a delay while loading the file.
3. External CSS
As the name suggests, External CSS can be applied to a webpage by defining all the CSS information in an external CSS file which is saved by the extension .css and can be imported with the <link></link> tag in the HTML file where the styling needs to be applied. The external CSS mechanism was built to overcome the drawbacks of internal and inline CSS. External CSS requires a .css file to carry all the styling information. You can then link this file to HTML files where the HTML elements refer to the id or classes defined in the linked CSS file.
You achieve linking with the assistance of the HTML link tag. Let’s understand this with an example. We will create a CSS file with the name mystyles and extension .css; This file will contact the following data:
Code:
.bluecolor{
color:blue;
}Now we will add the below content in the HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<h1 class = " bluecolor "> I am a Blue H1 heading </h1>
<h1 class = " bluecolor "> I am a Blue H6 heading </h1>
<p class = " bluecolor "> I am a Blue Paragraph </p>
</body>
</html>The above code will produce the following output in the browser:
Output:
Conclusion
With the above examples, we can conclude that External CSS would be the most efficient way of implementing CSS in the website due to the highest degree of code reusability that it provides limited time consumption. Web designers use External CSS for building all professionally developed and popular themes available because it greatly enhances manageability and efficiency in web designing.
Recommended Articles
We hope that this EDUCBA information on “How to Add CSS in HTML?” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
