Inline CSS
What is inline CSS?
CSS styles can be added to a website in any of the three ways as follows.
- Using inline CSS used for a specific element or HTML tag
- Using internal CSS in the head section of a web page
- Linking to an external .css file
Inline CSS is CSS found in an HTML file. Instead of putting the CSS code in an external CSS file, you put it within the HTML file itself. This reduces the number of files the web browser needs to fetch and download when rendering a web page. When inline CSS is used, the browser only needs to download the HTML file resulting in faster response.
How to use inline CSS?
Placing your CSS content inline in an HTML file will save time as the browser does not need to separately fetch both HTML and an external CSS file. This optimizes the performance of your website, resulting in faster loading of web pages. However, you need to remember that when you inline CSS, your CSS file will no longer be cached.
Web developers do not often use inline CSS, but some places may benefit from using the inline style. These include cases where -
- You need to create quick HTML prototypes
- You want a temporary style, which is not to be shared with other elements
- If your website is small, say a single-page website
- You are using emails for say, sending out newsletters
How to write inline CSS?
To inline CSS you should copy the CSS code from your external CSS file to your HTML file and place it in the head section between the style tags.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Example of an Inline Style</title>
</head>
<body>
<p style="color:green;font-size:36px;">
This is a <strong>green</strong> sentence used as an example for inline CSS style
</p>
</body>
</html>
As can be seen in the above example, in inline CSS curly brackets have not been used in the way they are used in normal CSS styling. Also, a semicolon must be used after each CSS style attribute.
Keep Learning more from our Learn Technical SEO guides. Do Technical SEO Audit yourself for free here.
