There are three possible ways of adding your style sheet to your HTML document that is;
- External CSS
External CSS is a stylesheet that is defined in a separate file and is included in an HTML document as a link with .css extension. - Internal CSS
Internal CSS is defined within the same HTML document using the <style> element in the <head> section. - Inline CSS
Inline CSS is also defined within the same HTML document using the style attribute of an element. In this tutorial, however, we will discuss inline CSS in depth..
Inline CSS
In order to style an individual HTML element the inline CSS approach is used. This technique makes use of the style attribute of an HTML tag to include CSS. The style definition specified in the style attribute will only effect that particular element.
Syntax
Let’s explore and understand inline CSS technique with the help of some examples.
Example 1
Suppose, you want to style <h1> element using inline CSS.
In the above example, we used the style attribute of the <h1> tag to style the heading, using the following piece of code.
Output
We set the color of the heading to purple, font-family to “times new roman” and text alignment to center.
Example 2
In the above example we styled a simple piece of text using inline CSS. In the following example, we will style a <div> using inline CSS.
In the above example, we set the padding, border and background-color of the <div> element using the following piece of code.
<p style="font-size: 8px; text-align: left;">This example demonstrates the use of inline css.</div>
Output
This is how you can style elements such as <div> or <p> using inline CSS approach.
Now that we have a good understanding of the concept regarding inline CSS, let’s go through some pros and cons of the technique under discussion.
Pros of Inline CSS
Here we have listed some advantages of inline CSS.
- You can style an element individually.
- It is decreases the amount of files the browser has to download which makes the procedure of displaying web pages faster.
- It is suitable for small web projects.
Cons of Inline CSS
Here we have listed some disadvantages of inline CSS.
- Inline CSS can make your code less manageable.
- In inline CSS, files are not cached.
- The style definitions specified using inline CSS are not reusable.
- Pseudo codes and classes cannot be styled using inline CSS.
- It is not appropriate for bigger projects as it decreases the mangeability of the code.
Conclusion
Inline CSS is a technique to include style sheets in an HTML document by using the style attribute of element. Inline CSS allows the user to style elements individually and the style definition specified will only affect that particular element. In this post, inline CSS technique has been discussed in detail with help of appropriate examples, moreover, advantages and disadvantages of the technique under discussion are also highlighted.
