html

Inline CSS | Explained

Cascading Style Sheets aka CSS is a language that is used to style elements of an HTML web page to enhance the beauty of web pages. CSS is quite easy and can save you a lot of time by handling the formation of many web pages simultaneously and in order for CSS to work, you have to include your style sheet to your HTML document.

There are three possible ways of adding your style sheet to your HTML document that is;

  1. 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.
  2. Internal CSS
    Internal CSS is defined within the same HTML document using the <style> element in the <head> section.
  3. 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

<tag style= "property: value; property: value;"></tag>

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.

<!DOCTYPE html>
<html>
<body>
   
<h1 style= "color: purple; font-family: 'Times New Roman', Times, serif; text-align: center;">Inline CSS.</h1>

</body>
</html>

In the above example, we used the style attribute of the <h1> tag to style the heading, using the following piece of code.

<h1 style= "color: purple; font-family: 'Times New Roman', Times, serif; text-align: center;">Inline CSS.</h1>

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.

<!DOCTYPE html>
<html>
<body>

<div style="padding: 20px; border: 2px solid black; background-color:pink;">
<p style="font-size: 8px; text-align: left;">This example demonstrates the use of inline css.</div>


</body>
</html>

In the above example, we set the padding, border and background-color of the <div> element using the following piece of code.

<div style="padding: 20px; border: 2px solid black; background-color:pink;">
<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.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.