Here is a subject we are looking at alongside a tool that will serve anyone working in web design. With the tool inside this article you can see every inline CSS listing on a given page, attributes and all. If inline CSS keeps coming up whenever you look at page speed, this Türk SEM tool shows you your problems in full.
Inline CSS is also called in-line styling.
Render-Blocking Test
See this value for your own site straight away: enter your address and your Render-Blocking Test result, plus insights specific to this tool, will appear here.
Free, no sign-up needed; the analysis also personalizes every one of our tools for your site.
Enter the page you want to look at above and run the check. During the checks you will meet a guide explaining what the CSS written inline actually does.
Inline CSS is a styling method where you apply CSS rules straight to an HTML element using the style attribute. The approach lets you put CSS directly inside your HTML and affects only the specific element it is applied to, which makes it a method local to that one spot.
Inline styles are a quick, practical way to change how elements look on your HTML page without linking to an external stylesheet (.css) or pulling from internal stylesheets in the head section.
The syntax for inline CSS is straightforward to use. You start with the style attribute inside an HTML tag, then comes an equals sign. The value of the style attribute is then written as a set of CSS property-value pairs wrapped in quotation marks.
Each property is separated from its value by a colon, and each property-value pair is separated by a semicolon.
The style attribute is the HTML attribute you use to put CSS directly inside your HTML. It is the gateway to inline styling and is supported by every HTML element and every browser. When you add the style attribute to an HTML tag, it tells the browser to apply the stated styles to that element alone.
Inside the style attribute you can state as many CSS property-value pairs as you like. A CSS property covers any aspect of an element you want to format, such as color, border or margin. The value is what you set for that property in that one place, red, 2 pixels solid black or 10 pixels respectively.
Here is an example of how you can use inline CSS to change the text color and font size of a paragraph:
<!-- EXAMPLE INLINE CSS CODE -->
<p style="color: red; font-size: 20px;">This content is example code written by Turksem.com to explain inline CSS.</p>Now let us look at a preview of that code.
This content is example code written by Turksem.com to explain inline CSS.
| Aspect | Inline CSS | External style.css |
|---|---|---|
| Definition | Declared directly inside the “style” attribute of an HTML element | Declared in a separate .css file |
| Priority | Has the highest priority | Has lower priority than inline CSS |
| Reusability | Low, it has to be written again for every element | High, it can be used across many pages |
| Maintenance | Hard, changes have to be made on each element separately | Easy, you change one file |
| Page loading speed | Grows the size of the page and can slow it down | Being a separate file it can be cached, which raises speed |
| Code readability | Clutters the HTML content | Separates HTML and CSS, which improves readability |
| Portability | Low, it is specific to each HTML file | High, it can be used in different HTML files |
| Scalability | Low, hard to manage on large projects | High, easier to manage on large projects |
Inline CSS, which we often use because it is the easy way out, is an outdated practice that tends to slow your site down. Say you want your headings at 20px and in red. If the page has 10 headings, you will place the same code on every one of them. That creates a needless pile of code. Declare the .h1 heading style in an external .css file instead and you will have cut that density right down.
The test tool above gives you a thorough guide. Check the pages in question and look through the code you find yourself repeating.
We publish plenty of effective tools a webmaster can use in the website test tools section.
As an SEO agency our interest usually runs to speed, but do not forget that you can write to us about the trouble you are having with inline CSS and get a second opinion.
Author
Tahir Dinç
SEO Specialist · Founder of Türk SEM
I began this work in 1999 and became an ODP editor in 2004. Today I provide SEO and Google Ads services to a great many large companies. I also chair Türk SEM Group and run the companies within it.
View profile →
