Inline Styles in HTML

When it comes to developing websites, various types of programming languages are available, and each one has a significant purpose. Though there is a wide array of programming languages for the backend, you only have to learn HTML, CSS and JavaScript for the front end. The trio of front-end programming languages are usually programmed together to create an interactive and visually appealing front end. So you probably have a lot to learn in each, and of them, the important ones that can save you time in programming are inline styles.

So now, let’s look into the topic of inline styles and how you can add them to your HTML code.

What are Inline Styles?

Normally CSS, HTML and Javascript are written in different files in different extensions .css, .html, and .js respectively. In HTML, to make things easier, there exists the <style> tag, which is included within the <head> tag where the CSS code goes. But there is also another way, a simpler way where you can read and write the CSS code using the style attribute. This method is also referred to as “inline-style”.

Though inline styles might not be the most recommended practice, there are times when they might be the only quick choice. We will discuss this later on in this blog.

How to Use Inline Styles

There is not much difference between inline styles and regular CSS code, the syntax is quite similar, and the difference is that you will be writing the code within an HTML tag.

The syntax of inline styles is as follows,

Syntax:

<element style="property: value">

Here,

The element refers to the HTML element to which the styles would be applied.
The property refers to style property.
The value refers to the value of the property.

To explain this more clearly, let’s look at the following example:

Example:

In the following example, the size and colour of the font are described within the <p> tag along with the inline style attribute. So now, every text within the <p> tag will appear red in 38px.

<!DOCTYPE html> 
<html>
  <head>
    <title>Trying out Inline styles</title>
  </head>
  <body>
    <p style="color:red;font-size:38px;">
      Red Color <strong> Bold Red </strong> Red Color
    </p>
  </body>
</html>

Output:

Red Color Bold Red Red Color

As you can see, there isn’t much of a difference in the line here. The attribute begins with style and then utilises double quotes (“”) to contain the attribute’s value before ending with an equals sign (“”). A semicolon ‘;’ marks the sentence’s conclusion before the closing tag is applied.

However, unlike normal CSS, curly braces and selectors are not used when it comes to inline CSS.

When to Use Inline Styles?

From the examples, you might have already figured out that inline CSS does not fit large-scale programming. However, it is still in use and is often used by developers. Mostly inline styles are used in the following areas:

HTML e-mail
Older websites
CMS content
Dynamic content

Whenever you receive a fancy email or newsletter in your inbox with high-end graphics and designs, it is probably an HTML email. To design beautiful emails, developers often use inline styles since the <style> is not allowed in most cases. For this reason, HTML e-mail usually contains lots of inline styles. Some of the styles included may be archaic to support older e-mail-viewing clients.

Inline styles are also added to dynamic websites that use Javascript. This is added to manipulate the elements’ styles or load the CSS elements quicker than normal CSS.

When Not to Use Inline Styles?

Though inline styles might be useful, when compared to regular CSS, inline CSS might not be advantageous as you might hope. Here are the reasons why:

Semantic Markup

HTML is meant to build the foundation, while CSS provides styles to enhance the website’s overall appearance. When you include both HTML and CSS elements in the same code, the code will not be structured and will be impossible to perform any edits.

Maintainability, Reusability and Scalability

Inline CSS only applies to the content which is applied within the tags. So if you have used the same style in different tags, then when making changes, you will have to apply those changes to all the tags.

Other Examples of Inline CSS

Example 1:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline css</title>
 
</head>
<body bgcolor="#FFCC66">
<h1 style="text-decoration:underline;color:#30F;"align="center">Example for Inline CSS</h1>
<p style="font-family:Arial, Helvetica, sans-serif; align:left; color:#F00;"> Programming with CSS is not hard as it might seem. CSS is one of the fun programming languages out there which is not only easy to learn but also fun to program with. Try CSS programming today..</p>
<h2 align="left" style="color:#009768;text-decoration:underline;">Images adorned with different styles</h2>
<img src="example.png" style="border:8px solid #04F; width:700px; height:500px;
     margin-left:50px;"/>
 
</body>
</html>

Example 2:

<article>
   <p
     class="first_paragraph"
     style="color: red; font-size: 50px; text-align: center"
   >
     <a href="programmer.org" style="text-decoration: none; color: yellow"
       >programmer</a
     >
     Are genuine beings who write programs that run on computers.
   </p>
   <p class="second_paragraph">
     There is no better job than the one of programmer.
   </p>
   <p class="third_paragraph">
     By programming you can learn creative thinking and develop new inventions.
   </p>
   <p id="fourth_paragraph">
     If you are pondering over your career choice, choose programming.
   </p>
   <p class="fifth_paragraph">
     Programming can be done on code editors or even on normal text editors. All you need 
     is a skill and hard work to write the perfect program that runs without errors.
   </p>
 </article>

Advantages of Inline CSS

Here are some advantages of inline CSS:

A CSS rule can be rapidly and simply added to an HTML page. This method is handy for performing rapid fixes to your website as well as testing or previewing the changes.
As with the external style, you don’t need to generate and upload a separate document.

Disadvantages of Inline CSS

Here are some disadvantages of inline CSS you should know about:

One cannot reuse inline CSS styles.
Because they are not saved in a single location, these styles are difficult to update.
Pseudo-codes and pseudo-classes cannot be styled with inline CSS.
There are no benefits to browser cache when using inline CSS.
Each HTML element must have inline CSS rules added, which takes time and produces a jumbled HTML page.
The size and download time of an HTML page can be affected by the use of various stylistic components.
It offers a variety of versions, including CSS, CSS 1, CSS 2, and CSS 3, which can make it difficult for developers to decide which version to use and result in the wrong outcome in the web browser.
It causes a compatibility problem for the browser, meaning that it might function with one type of browser but might not with another.
Inadequate security.

Other Types of CSS

Since we now have seen what inline CSS is about, let’s also look at the other types of CSS, which is usually the way CSS is used.

Internal CSS:

Internal CSS refers to the type of CSS which is also used in HTML. however unlike inline styles, internal CSS uses the <style> tag. The <style> tag is included within the <head> tag.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center; 
            }
            .Prog {
                color:#235439;
                font-size:90px;
                font-weight:bold;
            }
            .programmers {
                font-style:bold;
                font-size:50px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="Prog">Program</div>
              
            <div class ="programmers">
                Will get easier as you practice courses designed especially for programmers
            </div>
        </div>
    </body>
</html>

Compared to inline styles, internal CSS is a much more efficient way of CSS programming than inline styles. However, internal CSS will heavily impact the loading time of the webpage.

External CSS:

External CSS is the common way of programming where the CSS code is written in a separate file with the .css extension. The link tag links the written code to the HTML document.

Using external CSS, redundancy can be avoided since once the style is applied, it is applied across all the web pages for that specific element,

In CSS:

body {
    background-color:red;
}
.main {
    text-align:center;   
}
.Prog {
    color:#076540;
    font-size:90px;
    font-weight:bold;
}
#programmers {
    font-style:bold;
    font-size:50px;
}

In HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="programmers.css"/>
    </head>
  
    <body>
        <div class = "main">
            <div class ="Prog">Program</div>
            <div id ="programmers">
                Will get easier as your practice dear programmers
            </div>
        </div>
    </body>
</html>

Conclusion

Developers can use a variety of techniques in CSS to apply the appropriate styles throughout the web pages. There are other ways to add CSS styles to webpages and integrate them with HTML, as we covered in this post. We trust that you now clearly understand what inline styles are and how to utilize them in HTML code.

That said, try out the examples provided above to perfectly use the inline styles on your code.

Learn basic HTML, CSS & JavaScript for free

If you want to learn some basic HTML, along with basic CSS and JavaScript, for free, then register through the form below for our free 5 Day Coding Challenge.

Author: Daragh Ó Tuama