Inline Styles in CSS: Definition & Examples

Instructor: Amit Agrawal

Amit has over 11 years of industry experience in the IT Software Domain and has a Masters Degree in Computer Applications.

In this lesson, you will learn about inline CSS styles. You will see how to apply inline CSS styling to your HTML documents and when they are useful. You will see relevant examples explaining them.

Inline CSS Styles

As you may have seen, there are three ways to insert a CSS style for an HTML document:

  • external style sheet—CSS styles are stored in a separate file external to the HTML code
  • internal style sheet—CSS styles are written in the HTML file in the <head> element using the <style> element
  • inline style

We will focus on the third way in this lesson. An inline CSS style applies to a single element. The CSS code is written in the 'style' attribute of the HTML element that you want to apply that style to. For example, if you want your <h1> element to be in a blue color, you will write the inline CSS as follows:

<h1 style='color=blue;'>This is the h1 Heading</h1>

The above example has an inline CSS style applied that changes the font color of the h1 heading by setting the color property to blue, but what if you want to apply more? You can do that simply by adding the next style property after the semicolon. In this way, you can write as many property/value pairs for styling the element by separating each one with a semicolon.

For example, if you want your paragraph to be center aligned with a 2-pixel wide black border, you can write an inline CSS as follows:

<p style='text-align: center; border: 2px solid black;'>Bacon ipsum dolor amet hamburger boudin cow leberkas, bresaola flank shank chicken ham

meatball tail landjaeger. Jowl landjaeger swine, kevin kielbasa short loin brisket ribeye buffalo.

Burgdoggen ground round picanha tri-tip buffalo. T-bone prosciutto rump ball tip, pig swine hamburger

drumstick leberkas hamburger strip steak alcatra tenderloin meatball boudin brisket.</p>

Writing CSS inline is easy and you know exactly which element the style will apply to. But this is not the preferred method because it mixes the content marked by HTML with the presentation done using CSS. Ideally, we want to keep those two separate. Thus, you should try to place all your styles in an external style sheet. This does not mean that you should never use inline styles though! It is very useful to test something using inline styles quickly. Also, if you have a very simple page, you may choose to use inline styles and avoid using a separate external style sheet file.

Style Precedence

What will happen when you style an element using the external, internal style sheets as well as an inline style? Which one should the browser use?

In such a case, a cascading order rule is followed where the highest priority is given to inline styles and the lowest priority to the browsers default style as follows:

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support