Inline Styling?

Inline styling good or bad?

What Is Inline Styling?

Inline styling is when you add a style attribute directly to the html tag that you are trying to style. This will override other styling coming from external stylesheets and is good to use when working with bootstrap or material design libraries.

Example of inline styling in action

We have now applied padding to the top of the div element you see above and changed the background color of this element to white.

Other Types Of Styling

  • Inline – applied directly to html element
  • Internal – applied internally within the page
  • External – Importing stylesheets from an external source

Internal styling is used only when necessary and normally when I have a long amount of css code I use an external stylesheet rather than internal styling.

What Type Of Styling Should I Use?

When developing your website you will be using external styling and inline styling but there is a time and a place inline styling. I always use external stylesheets with my website when I am writing a lot of code and it keeps everything organized but with all these stylesheets being imported a lot of requests are made which slows you down. If the code is small enough you can use inline styling to limit the requests used and keep your website fast.

It is good to use external stylesheets but importing too many stylesheets will slow you down which is where inline styling comes in handy and gives you an option for placement of your small styling changes keeping your website fast and organized.

Inline styling can also be used in placement of the !important attribute you would add to override styling. Inline styling overrides other styles that are imported on default making it easier to work with libraries such as bootstrap or material design.

As you can see here we are importing a stylesheet to index.html

This stylesheet is applied to index.html through a linked connection where it imports the css code. the .header class is the only class we are editing and we are making the color grey, the background color a shade of white, aligning the text to the left. Since we are importing it from an external source if we applied the below code directly to h1 through inline styling.

The stylesheet is still imported but because we have changed the color to black with inline styling it will override your original style. In addition if our stylesheet was this small it would be more efficient to use inline styling in this situation rather than make a request to import a stylesheet.