Inline CSS means applying a CSS style to an individual element, inside of its HTML tag, in an HTML document. Style rules applied with inline CSS will override any styles from an internal or external style sheet.
The HTML programming language is used to define the structure of a web page. For instance, HTML is used to define where boxes, text, and images appear on a web page.
CSS, on the other hand, allows you to add your own styles to HTML elements, which 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 inline CSS.
This tutorial will discuss, with reference to examples, how to add CSS to a web page using inline CSS, and the syntax associated with inline styles. By the end of reading this tutorial, you’ll be an expert at using inline CSS to style elements on a web page.
Before CSS, defining the presentation of a web page was a time-consuming process. To customize the color, size, borders, and other styles associated with an element on a web page, you would have to describe each style within the HTML page.
Then, in 1996, CSS was introduced, which 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 a HTML file.
For this tutorial, we’ll discuss inline CSS in-depth.
Inline CSS allows you to apply style rules to specific elements on a web page.
For instance, 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 stylesheet—like you would with external CSS—you can add the style directly to the paragraph of text whose color you want to change.
The rules applied via inline CSS will override any styles applied in an internal or external style sheet.
To use inline CSS, 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 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 inline CSS.
When to Use Inline CSS
Inline CSS is primarily used for two purposes. The first purpose is to preview a change you are thinking about making on a web page. This is because inline CSS allows you to apply a style to a specific element, so you don’t need to worry about changing a stylesheet in order to preview a change.
Secondly, inline CSS is used to add CSS rules to one or two elements 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 such as internal or external styling.
When used sparingly, inline CSS is a good way to apply styles to elements on a web page. However, overuse of inline CSS can easily result in messy code, and inline styles are difficult to update because you have to manually change each style.
In addition, 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 inline CSS.
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.
Inline CSS styles allow you to apply a style to a specific element on a web page. In general, using inline CSS is best when you want to preview a change, or apply a style to one or two 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 inline CSS styles. Now you’re ready to start using inline CSS like a professional web developer.