Let’s try a simple example by learning how to recreate the block of text above. (Yes, that block of text hat vaguely looks like it rests on a yellow post-it-note.)

But let’s not work with so much text. Ah, here’s our new HTML:

This post-it note has been purposefully simplified to contain fewer words.

But we want to style it, right? So we’ll need to select it some way. Let’s do this by wrapping a div around it. Let’s name the div “postit.”

But should we let “postit” be an ID or a class? You can read about the difference here. For the purposes of this post, let’s make it a class so we can reuse the div.

  This post-it note has been purposefully left blank.

Awesome! Now that the body of text we want to select has been selected, all that’s left to do is to write the CSS that styles the text. The most common method is to place the CSS in an external style sheet, but for the purposes of this post, let’s just write it above the HTML (otherwise known as an internal stylesheet). Makes it easy to see what happened at a glance.

The first thing to remember, when writing CSS above the HTML, is to type these tags:

See the space in the middle? That’s where we’re going to put the CSS. Since our div is a class, we type a period before the name of the div (“postit”). (Note: if it were an ID, we would have typed “#” in place of the period) Then we type in a set of brackets, inside of which will contain the styling.

Now: what styles do we want? Say we want the font color inside the div to be a certain shade of blue, or the hex color code #369. This is what we’ll type inside:

Note: Do NOT forget the semicolon after the statement!

What else do we want to do with our block of text? Right underneath “color: #369″, type in:

width: 30em; 
display: block;

This transforms the div into a block with a width of 30em, which is the same thing as 480 pixels. (Why type in “30em” instead of “480px”, which does the same thing? Stackoverflow members answer the question here).

Let’s also add in the following:

background: #ffc;

This makes the background color a post-it color yellow.

padding: 30px; 

This introduces some distance between the border of the div block and the text inside by a measure of 30 pixels all around.

The final step? Adding some box shadow.

-moz-box-shadow: 5x 5px 7x rgba(63,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(63,33,33,.7);
box-shadow: 5px 5px 7px rgba(63,33,33,.7);

Here’s what your final product should look like:

  This post-it note has been purposefully simplified to contain fewer words.

And you’re done! Make sure that your notepad++ file is saved as an appropriate .html or .php (which could also work), and preview it in your browser. Here’s what you should get:

</span>