Inline Styles

Using inline styles is the best way to start learning CSS as it applies the styling directly to individual HTML elements using the style attribute. This is a no-nonsense, self-contained method that is easy to visualize and leaves little room for error and therefore lends itself to experimenting with new CSS properties and values that you are not familiar with. Inline styles are also good for style declarations that you don't use very often and would just ultimately clutter up your embedded or external style sheets for no good reason.

Here's the syntax you use to create an inline style:


In the above:

1. element-name refers to the targetted HTML element
2. property refers to a CSS property
3. value refers to an associated CSS value

Multiple CSS property/value pairs can be used in the same style attribute. This is demonstrated by the following syntax:


Here's a few things to remember about inline CSS syntax:

1. The property and its associated value are separated by a colon (:)
2. Each property/value pair ends with a semi-colon (;)
3. When using multiple word values, the multiple word string must be enclosed in single quotation marks to avoid prematurely ending the style attribute (see below).

And to make CSS code easier to read, it's good idea to add a space after the colons and semi-colons.

Here's an actual example of an inline style which applies the color green and a 16 pixel font size to all the text enclosed in a set of paragraph tags:


And this will produce the following effect:



Here's an example of an inline style that contains a multiple-word CSS value (Times New Roman) enclosed in single quotation marks ('...'):




All HTML elements (with the exception of the script element) that are normally used in the body of a web page may employ the style attribute.

And that's about it.

Simple, no?

So exactly what CSS properties and values apply to which HTML elements? Well, here's my go-to list of CSS properties that were highly instrumental in the making of this site.


*   *   *

Of course the real power of CSS is the ability to apply the same style declarations to multiple HTML elements at once. So let's drill down a little deeper into the world of CSS and learn how to use embedded style sheets...