Bookmark and Share

CSS Inline

Thus far, we have only shown you how to use CSS the way it was meant to be used -- separated from the HTML. However, it is possible to place CSS right in the thick of your HTML code, and this method of CSS usage is referred to as inline css.

Advertise on

Inline CSS has the highest priority out of the three ways you can use CSS: external, internal, and inline. This means that you can override styles that are defined in external or internal by using inline CSS. However, inline CSS detracts from the true purpose of CSS, to separate design from content, so please use it sparingly.

CSS Inline - An HTML Attribute

Believe it or not, CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Let's add some style to a paragraph tag.

CSS Code:

<p style="background: blue; color: white;">A new background and
 font color with inline CSS</p>


A new background and font color with inline CSS

If you have read through the beginning of this CSS tutorial, you probably have a good idea of what is going on. Below is the general form for setting inline CSS in any HTML element.

Pseudo Code:

<htmltag style="cssproperty1: value; cssproperty2: value;"> </htmltag>

The normal rules of CSS apply inside the style attribute. Each CSS statement must be separated with a semicolon ";" and colons appear between the CSS property and its value.

Common Inline CSS Mistakes

When using CSS inline you must be sure not to use quotations within your inline CSS. If you use quotations the browser will interpret this as the end of your style value. Instead, copy our form as we have displayed below.

CSS Code:

<p style="background: url("yellow_rock.gif");">

This is broken</p>

<p style="background: url(yellow_rock.gif);">
This is workin'</p>


This is broken

This is workin'

Bookmark and Share

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Try it out!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials