Trending October 2023 # How To Add Css In Html # Suggested November 2023 # Top 16 Popular

You are reading the article How To Add Css In Html updated in October 2023 on the website Saigonspaclinic.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 How To Add Css In Html

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.

Start Your Free Software Development Course

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:

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

Code:

.bluecolor { color : blue ; }

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

Code:

.bluecolor{ color:blue; }

Now we will add the below content in the HTML file:

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.