Inline CSS means applying a CSS style to an individual element, inside its HTML tag, in an HTML document. Style rules applied inline 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 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. By the end of reading this tutorial, you’ll be an expert at using CSS inline 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 of an HTML element, 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 an HTML file.
For this tutorial, we’ll discuss writing CSS inline in-depth.
Writing Inline CSS
Writing CSS inline 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, 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 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
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. You don’t need to worry about changing a stylesheet in order to preview a change.
Secondly, inline styles are 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.
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. And inline styles are difficult to update because you have to manually change each style.
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.
Inline CSS styles allow you to 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.