CSS Inline Style - ythy/blog GitHub Wiki

CSS Styles with the Style Attribute and No Style Sheet

CSS, or Cascading Style Sheets, are what is used in modern website design to apply the visual look to a page. While HTML creates the structure of the page and Javscript can handle behaviors, the look and feel of a website is the domain of CSS. When it comes to these styles, they are most often applied using external style sheets, but you can also apply CSS styles to a single, specific element by using what are known as "inline styles."

Inline styles are CSS styles that are applied directly in the page's HTML.

How to Write an Inline Style

  1. To create an inline CSS style, you begin by writing your style property similar to how you would in a style sheet, but it needs to be all one line. Separate multiple properties with a semi-colon just as you would in a style sheet.
    background:#ccc; color:#fff; border: solid black 1px;

  2. Place that line of styles inside the style attribute of the element you want styled. For example, if you wanted to apply this style to a paragraph in your HTML, that element would look like this:
    <p style="background:#ccc; color:#000; border: solid black 1px;">

Advantages of Inline Styles

Thanks to the cascade of Cascading Style Sheets inline styles have the highest precedence or specificity in a document. This means they are going to be applied no matter what else is dictated in your external stylesheet (with the one exception being any styles that are given the !important declaration that sheet, but this is not something that should be done in production sites if it can be avoided).

Disadvantages of Inline Styles

Because inline styles they are the most specific in the cascade, they can over-ride things you didn't intend them to. They also negate one of the most powerful aspects of CSS - the ability to style lots and lots of webpages from one central CSS file to make future updates and style changes much easier to manage.
Another drawback to inline styles is that it's impossible to style pseudo-elements and -classes with them.

conclusion

Ultimately, I recommend not using inline styles for your web pages because they cause problems and make the pages a lot more work to maintain. The only time I use them is when I want to check a style quickly during development. Once I've got it looking right for that one element, I move it to my external style sheet.