Quick’N'Dirty Blog Post CSS Guide

Here are some of the common ways of formatting a blog post with CSS:

Change Text Color

Well this is easy, just wrap your text in a span tag and apply the color style:

I’m Blue

<span style="color: #0000ff">I'm Blue</span>

Color are defined using hexadecimal, and are set by defining the red, green, and blue values for it. You can view a color chart here.

Align An Image

The easiest way to align an image to the left or right is using the float style (which will also cause the text to flow around the image):

<img src='image path' style="float: left;" />
<img src='image path' style="float: right;" />

To center an image I usually just create a DIV, put the image in it, and apply the text-align to the DIV:

<div style="text-align: center"><img src='image path' /></div>

Get Rid Of List Formatting

To change the way a UL or OL list looks like, use the list-style attribute. To get rid of any indentation, change the margin and padding around (you may also have to do that for each list item as well).

• Item 1
• Item 2
• Item 3
• Item 4

<ul style="list-style: none; padding: 0px; margin: 0px;"><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li></ul>

Change Font Info

To change the font-family, font-size, or font-weight, wrap a span around the text and apply the style to it:

I am bolded, 10px in size, and I use the Verdana font!

<span style="font: bold 10px Verdana">Changed text</span>

Change Background Color

<div style="background-color: #dddddd;">Gray Background</div>

Center A DIV

Setting margin-left and margin-right to auto causes it to be centered:

<div style="width: 200px; background-color: #cccccc; margin-left: auto;margin-right: auto;">Text in DIV</div>

Stay tuned for more Back To The Basics posts!

Please subscribe, or else I will cry. Do you really want to make a programmer cry?