What is Inline Style CSS With Advantages and Drawbacks

What is Inline Style CSS
Cascading Style Sheets or CSS are used for modern design website and it’s applying the visual look to a page. while HTML elements create the structure of the page and Javascript handles the page behaviors then you can create a modern website page. therefore we can say that the look and feel of the website is the domain of CSS. in the website design CSS styles can be applied with three method, external styles are mostly for design the website but you can apply another method such as CSS styles to a single, specific element this method is known as “inline styles”.

Furthermore, Inline styles are CSS styles are applied directly in the HTML web pages. First of all, let’s look at how these styles applied in HTML element and How these styles are written.

How to write an Inline Style

Inline-styles are written with HTML elements first of all to create an Inline CSS style and writing style properties similar to how you would in a style sheet, but these are need to be all one line written with separated multiple properties with a semicolon mark.

How to Apply an Inline Style

Place above the line of styles inside the HTML elements you want to be styled. For Example, if you want to decorate HTML paragraph element so apply these style to an HTML paragraph that element would like this

The Above example this particular paragraph would appear with a grey background, and

font colors would appear white color and paragraph border will be with 1px solid with grey

color and the padding of the paragraph will be (space around all the four sides such as left,

right, top, bottom) 15px.

Advantages of Inline Styles

CSS or Cascading Style Sheet has the highest specificity or precedence in a documents means

that they are going to be applied no matter while in you external style sheet dictated else

other styles (with the one exception being any other styles that given the importance of

the declaration that sheet but these are not something that should be done in a production

website or sites if it can be avoided).


The only styles have higher precedence or specificity inline styles are user styles applied

by the readers, suppose that if you having trouble getting your changes to apply you can

write the inline style on the elements on the other hand if your style still does not display

when using an inline style that reason is that there’s something else going on.


Inline-styles are a very easy and quick process to add and you do not need to worry about

writing the proper CSS selector because you can add styles directly to the element you want

to change the best thing is that you don’t need to create a whole new document (as with external

style sheets) or you can edit a new element in the top the head of your documents (as with

internal style sheet) you can add those style attributes which is valid on nearly every HTML

elements. these are the basic reasons. why you may be tempted to use inline styles but here

need to be aware of some very significant disadvantages to this approach.

Disadvantages of Inline Styles

Let’s discuss the disadvantages:
Inline-styles are the most important in the cascade they can over-ride things you did not

intend them to. these are also neglected one of the most powerful aspects of CSS the ability

to manage lots of styles and lots of web pages from one central CSS file to make future

updates and these styles changes are much easier to manage.


Suppose that if you only used inline styles in your documents would quickly become bloated

and very hard to maintain. because of inline styles must be applied on every HTML elements

you want them on. so suppose that if you want to all your paragraphs to have the font family

“sans-serif” you have to add an inline style to each paragraph <p> tag in you Web

HTML Documents. this adds both maintenance work for the coder or designer and the effect

will be the download time for the reader since you would need to these change on every across

pages in your site to change the font-family.

Alternatively, if you used a separate stylesheet, you may be able to change it in one spot and the

the effect will be on every page receive that update.


There are some few drawbacks to inline styles is that it’s impossible to style -classes and pseudo-elements with them, for example, suppose that with external style sheet, you can style the hover, visited, active, and link color of an anchor tag, but with an inline style all you can style is the link itself, because of that’s what the style attributes is attached to.


Finally, see over the discussion, we recommend not using inline styles for your web pages because they cause problems and makes the pages a lot more work to maintain.