Inline CSS: How to Add CSS Inline to a Web Page

Inline CSS applies a CSS style inside an element’s HTML tag. The style HTML attribute sets the style of an element. Inline CSS rules override styles from other CSS documents because they apply directly to an element.

The HTML programming language is used to define the structure of a web page. CSS allows you to add your own styles to HTML elements.

This gives you the ability to customize the aesthetics of elements on a web page. There are three approaches you can use to add CSS to a web page: inline CSS, internal CSS, and external CSS. For this tutorial, we are going to focus on CSS inline.

This tutorial will discuss how to add CSS to a web page using CSS inline, and the syntax associated with inline styles.

CSS Styles

In 1996, CSS was introduced. CSS made it possible to separate the presentation and content of a website. Using CSS, you can easily add styles to a web page, and apply those styles to specific elements on the web page.

There are three methods you can use to apply styles to a web page:

• Inline CSS: This method involves applying a unique style to a single element.
• External CSS: This method involves creating a separate CSS file that stores the styles for a web page.
• Internal CSS: This method involves using a <style> tag to define the styles for an HTML file.

For this tutorial, we’ll discuss writing CSS inline in-depth.

Inline CSS: A Guide

Inline CSS applies a style to an HTML element. Inline CSS elements must be specified for each element to which you want to apply a style. They are an alternative to using selectors to work with a particular element.

Suppose you want to change the color or font size of one paragraph of text on a web page. Instead of writing a rule in a separate style sheet, you can add the style directly to the paragraph whose color you want to change.

The rules applied inline will override any styles applied in an internal or external style sheet.

To use CSS inline, you can specify a CSS style directly in a “style” attribute of an element. Let’s walk through an example to illustrate how this works.

Suppose we want to change the text color of a single heading on a web page to green. We could do so using the following code:

<h1 style="color: green;">This is a Heading</h1>

The above code sets the CSS font color of our heading to green. Because we only want our style to apply to this heading, we have added it directly in using CSS inline.

When to Use CSS Inline Styles

CSS inline styles are used to preview changes to a web page or to add elements to one element on a page.

Inline styles are used to preview specific changes because you can work with a specific element instead of all elements that meet a CSS selector. You don’t need to worry about changing a style sheet in order to preview a change.

Inline styles are used to add CSS rules to one element on a web page. So, if you want to set the width of a paragraph of text to 500px, you could do so. But if you wanted to set the width of multiple paragraphs of text to 500px, you should use another method of styling.

When used sparingly, inline CSS is a good way to apply styles to elements on a web page. However, overuse of CSS inline can easily result in messy code.

Inline styles are difficult to update because you have to manually change each style. Styles in a style sheet, on the other hand, can use broad selectors. These selectors can affect multiple elements in a HTML document.

It is often better to use internal or external CSS when you want to apply a large list of rules to an element. So, if you want to apply six or seven CSS properties to an element, you may want to avoid using CSS inline.

This is because, as we mentioned, overuse of inline CSS can make your code messier. If you have six CSS rules contained within an HTML element, it makes it more difficult to see the element itself in your code.

Conclusion

Inline CSS styles apply a style to a specific element on a web page. In general, using CSS inline is best when you want to preview a change or style only a few elements on a web page. If you want to apply more styles to an element, using internal or external style sheets is usually preferred.

This tutorial discussed, with reference to examples, the basics of styling in CSS and how to use CSS inline styles. Now you’re ready to start using CSS inline like a professional web developer.

To learn more about coding in CSS, read our complete guide on How to Learn CSS.