Mastering Inline CSS: Quick Styling Within Your HTML

Generally you should always separate your CSS from your HTML using an external spreadsheet. However if you are applying a quick change or doing some testing it can be useful to know that inline CSS styling exists. Inline styling uses the HTML style attribute. Within the HTML style attribute you will apply your CSS rules.

<p style="color: red; font-size: 24px;">This is a paragraph with CSS styles.</p>

On an external sheet your css for that same paragraph would look like:

p  {
    color: red;
    font-size: 24px;
}

Notice that the CSS rules are the same the only difference is that you are wrapping your CSS rules in quotes instead of curly braces. Also there is no need to specify the element you want to style because it is implied with the inline CSS. Also keep in mind that the CSS ruleset on the external sheet applies to all paragraphs if there were multiple. The inline styling only applies to that one paragraph element.