Using inline styles
is the best way to start learning CSS as it applies the styling directly to individual HTML elements using the
. 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
style sheets for no good reason.
Here's the syntax you use to create an inline style:
<element-name style="property: value;">
In the above:
element-name refers to the targetted HTML element
property refers to a CSS property
value refers to an associated CSS value
Multiple CSS property/value pairs can be used in the same
attribute. This is demonstrated by the following syntax:
<element-name style="property: value; property: value; property: value;">
Here's a few things to remember about inline CSS syntax:
- The property and its associated value are separated by a colon (:)
- Each property/value pair ends with a semi-colon (;)
- 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
Example 1 - SOURCE CODE
<p style="color: green; font-size: 16px;">It was a dark and stormy night.</p>
And this will produce the following effect:
Example 1 - RESULT
It was a dark and stormy night.
Here's an example of an inline style that contains a multiple-word CSS value (Times New Roman) enclosed in single quotation marks ('...'):
Example 2 - SOURCE CODE
<h1 style="font-family: 'Times New Roman';">Heading</h1>
Example 2 - RESULT
All HTML elements (with the exception of the
element) that are normally used in the body of a web page may employ the
And that's about it.
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...