Different Ways of Embedding CSS into HTMLby 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:
<link rel="stylesheet" type="text/css" href="fileName.css" />
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:
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:
<p style="color: blue"> </p>
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.
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
Created on Sep 6th 2019 05:02. Viewed 226 times.