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 very 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, but with continuous upgradations and new CSS provides the ability for web developers and designers to control the responsiveness of the website for the web pages to have a distinguished UI for laptop, tablet, and mobile screens.

Since CSS is a necessity for every website, it needs to be flexible and easy to define as per the designer’s requirements. Also, since it can be very granular, CSS definitions need to 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

CSS can be added to a web page using either or all of the following options. Now, let’s explore these 3 methods in detail.

1. Inline CSS

With inline CSS, HTML designers can define styling information within the HTML element’s tag itself 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. With this method, we can apply to style to 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 itself 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 element 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, all we wanted to do was to change the font color of the H1, H6 and P tag to blue. Despite wanting to apply the same styling information, we were unable to re-use it and had to define it 3 times individually for each element. Due to a lack of re-usability and more time consumption, Inline CSS is not preferred when styling a website with several pages. Also, making a mobile responsive website would be almost impossible with Inline styling definitions. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

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 located in the body whereas the CSS is located in the header in <style> <style> tag. The internal CSS can be bound with the HTML elements with the help of a class or an id. When the CSS is defined for a class, the CSS definition is re-usable since multiple HTML elements can have the same class, but when bound with id, then the CSS is applicable only to the element with that particular id. In most of cases, web designers prefer using class definitions of CSS instead of id.

Now let’s try the same example, but with 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 just have to declare the styling information once and then use it multiple times. While internal CSS adds a great deal of styling re-usability, the CSS defined in one HTML file cannot be used 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. This file can then be linked to any number of HTML files where the HTML elements are referring to id or classes defined in the linked CSS file.

This linking is implemented with the help 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. All professionally developed and popular themes available are also built using External CSS since it makes web designing very manageable and efficient.

Overview of Add CSS in HTML