Using CSS Internally

Inline

Applying css styles directly to html elements using the style attribute is described as using an inline style. To do so you simply declare the css properties and values you want to use within the style attribute.

Html Code:

<p style="color:#f00;font-size:20px">
	This text will be red and 20 pixels in size
</p>

Browser Display:

This text will be red and 20 pixels in size

This is a pretty straight forward manner of applying css to your html elements. The problem with this method comes into play when you have numerous pages in your site and want to change the color or size of an element that appears on all your pages. If you defined the styles within the elements themselves you must go through every element on every page changing them to the new value.

Next we will talk about the different ways to select which HTML elements you want to apply your styles to so we can look at a couple of options for accomplishing the same design effects and keeping the styles grouped together in more convenient locations.