Inline CSS syntax (simple examples)

Just a quick note here today on the inline CSS syntax, which I can never remember. To add CSS to your web pages using the inline syntax, just add a style tag to your HTML tag, including your CSS styles within the quotes of the style tag as shown here:

<div style="border-style: dotted; border-color: #ccc;">

The CSS styles you define within your quotes are defined just as you would in an external style sheet, but they are all on one line, as shown in that example.

Here's a complete inline CSS syntax example, which I created yesterday to promote my $50 gift card contest:

<div style="border-style: dotted; border-color: #ccc; padding: 14px; margin-bottom: 16px">
<a href="/contest/2011-december-free-amazon-gift-card"
   title="Win a $50 Amazon.com gift card">Win a
   <br />$50 Amazon.com
   <br />gift card</a>
</div>

For the record, here's what that ad looks like if I just place the HTML and CSS here:

As a closing note, I don't recommend using the inline CSS style very often -- you're much better off putting your CSS in external style sheets -- but for "one off" situations like this ad which is only going to run for two weeks, I don't mind using it. (My regular style sheets are sent to your browser with an "expires" header, and I don't think it's worth getting into that for this little ad.)