Different Ways of Embedding CSS into HTML

by Coding Tag Codingtag

CSS is an important aspect while designing the website which not only enhances the design of the HTML webpages but also makes it responsive. However, sometimes adding CSS into HTML can be a bit confusing as there are several ways of doing it. Thus, let us overview the various ways in which we can embed CSS into our HTML code.

If you are preparing for CSS, you must also note these concepts which form an integral part of HTML Interview Questions.

Hence, without further ado, let us start with the blog:

Way 1: External Style

The first way is using an external style sheet which contains only the CSS code and is saved with .css extension. The file is then embedded into HTML code using the <style> element under the <head> section. The syntax which is used for embedding external CSS is:

The <href> element is used to specify the name and location of the file.

Way 2: Embedded Style

Another way in which CSS can be added to HTML code is the embedded style in which the CSS code is written under the <style > tag. Note that the tag is placed under the <head> tag just after the <title> tag. All the styling code for the HTML code is placed inside the opening and closing tag:

<style>

//CSS code

</style>

Way 3: Inline Style

The last way of adding CSS into HTML is the inline style through which the styling is done to the tag itself at the time of writing the tag. For instance, if we want the paragraph to be blue, using inline CSS it will be written as:

However, through inline CSS, the styling remains stick on a specific element and cannot be reused. This makes it less recommended to use for HTML as it can also get difficult to make changes later in the style.

Conclusion

Now, I hope you are familiar with the way of embedding CSS into HTML and how each of them works. However, if you want to learn more, you can also see Top 30 CSS Interview Questions. Also, it is recommended to use the external style sheet to add CSS into HTML code to prevent code complexity.

Source Link: https://penzu.com/p/267a1de3