CSS Codes: Easy Tutorial and Quick Reference Guide

Margins are the white space around paragraphs.

You can set all margins the same (px = "pixels"):
<p style="margin: 10px;">Blah blah blah...</p>

Or set margins individually:
<p style="margin-top: 6px; margin-left: 13px;">Blah blah blah...</p>

There's a few handy shortcuts that save typing:

Top/bottom, left/right margins: <p style="margin: 10px 20px;">
Top, left/right, bottom margins: <p style="margin: 10px 20px 15px;">
Top, right, bottom, left margins: <p style="margin: 5px 20px 15px 9px;">

Padding is the space between the text and the edge of the paragraph. Padding is only needed when the paragraph has a border or contrasting color from the background. Padding is controlled the same way as margins. In any of the above examples, just change margin to padding.

Example with both padding and margins:

<p style="margin: 10px 20px 15px; padding: 6px;">

The order you list them doesn't matter unless you're using one of those shortcuts.

Back to Top ⇑

CSS recognizes several units besides pixels, including % (of the total area) and em (the width of an m). Ems are useful with text so they'll change if someone's boosted the font size on their browser.

This paragraph's first line is indented 4 ems. Blah blah blah...

CSS Code:

<p style="text-indent: 4em;">This paragraph's first line is indented 4ems. Blah blah blah...</p>

Remember that CSS is looking for em, singular, just as we write 5K Run not 5Ks Run.

Back to Top ⇑

Set text color with color. Set paragraph color with background-color. The colors may be specified by numbers (see below) or names.

For example:

<p style="color: white; background-color: #ff9900;">White text on orange background</p>

White text on orange background

You may also set color in text-formatting tags like <i>. For example:
<i style="color: #999999;">Use your gray matter.</i> makes Use your gray matter.

CSS color codes are hexadecimal (base 16). Hexadecimal counts from 0-9 followed by A-F, the way playing cards go from 1-10 followed by Jack, Queen, King.

The six-digit code lists the amount of red (first two digits), green (second two digits), blue (last two digits), which blend together to make a color. For example, Squidoo Teal is #046381: not much red, a medium amount of green and slightly more blue. If each pair of digits is identical -- for example, Squidoo Orange, #ff9900 -- you can shorten it to three digits, #f90.

Here's a link to a good Hexadecimal Color Code Chart.

Web browsers also recognize many color names (listed on that chart, but drop the spaces between words) such as <p style="color: darkgreen;">.

Back to Top ⇑

Webpages look better with a uniform set of colors. Here's some of Squidoo's palette.

Squidoo Titles: #1a67b8
Squidoo Orange: #ff9900
Old Squidoo Teal: #046381
Body Text: #333333
Module Subtitles: #666666
Various Headers: #999999
Discovery Tool: #e1e8f2 Merchant Modules: #f7f7f7Squidoo Yellow: #fff79eMargin Fill: #5eaafaPoll Colors: #ff6600 #005087 #cc007a #8e0055 #008e84 #dddddd

Don't see the color code for the thing you're trying to match? If you use Firefox, get the free Colorzilla plug-in -- it adds an "eyedropper" to Firefox that lets you scan color codes as you move the cursor around!

Back to Top ⇑

The border property puts boxes around paragraphs. There's several options for borders: width, color, style (i.e. dotted, dashed, solid, double). At minimum, you need to specify what type of border it is (solid, dashed, dotted, etc):

<p style="border: solid;">Squid!</p>

creates:

Text

Note: I'll explain that extra blank line in the next section ("Troubleshooting Spacing Glitches").

Color and/or width are optional. You can either spell out the whole name (border-top-width, for example) or just list the values. When listing different properties, the order doesn't matter, because it's clear which is which (px for width, color codes for color). For example:

<p style="border-style: dotted; border-width: 1px; border-color: #008e84;">Squid!</p>
does the same thing as...
<p style="border: #008e84 1px dotted;">Squid!</p>

Squid!

Confusingly, the CSS code to specify "type of border" (dotted, dashed, double) is border-style, not to be confused wth the overall style="..." where you put the list of CSS codes.

To make different borders on different sides, add -top or -bottom or -left or -right after border. For example:

<p style="border: dashed 3px; border-left: double 4px orange; border-bottom-color: #008e84;">Squid!</p>

makes:

Squid!

Again, if you use borders, you'll probably want padding.

Back to Top ⇑

Squidoo and many other websites help people who don't know HTML create webpages. While using these sites, I've run into a minor recurring problem: extra blank lines. They're adding padding and sometimes margin for us.

Removing Extra Padding

like this, Squidoo converts it to a paragraph break and adds padding. If we then add a paragraph break (</p>), it adds a blank line of margin at the bottom PLUS a line of padding. For example:

<p style="background-color: #f7f7f7;">Here's a paragraph with some CSS codes to make a gray background.</p>
Whoops!

comes out like this (border and color added so you can see padding and margin):

Here's a paragraph with some CSS codes to make a gray background.

Whoops!
The easiest fix is to delete everything after </p> up to the next word:

<p style="background-color: #f7f7f7;">Here's a paragraph with some CSS code to make a gray background.</p>That's better!

produces this:

Here's a paragraph with some CSS code to make a gray background.

That's better!
or, if you want NO blank lines, set padding: 0px:

<p style="background-color: #f7f7f7; padding: 0px;">Here's a paragraph with some CSS code to make a gray background.</p>See?

Here's a paragraph with some CSS code to make a gray background.

See?
Finally, there are times when you need to ADD extra space. Do this:

<p>&nbsp;</p>

You may also set the height (and/or width) of a paragraph using CSS Codes:

<p style="height: 30px;">&nbsp;</p>

&nbsp; is a special code for "nonbreaking space." If you create a paragraph with nothing in it, web browsers tend to ignore it. The nonbreaking space forces the browser to realize there's something there.

Back to Top ⇑

Here's the easy way to align paragraphs left, right, or center:

<p align=center>Center me!</p>

Put an image in place of "Center me!" to center graphics easily.

Squidoo's Introduction Module seems to have some hidden CSS codes that override <p align=[value]>. If the Introduction Module is being fussy, use CSS codes instead (options are left, right, center or justify):

<p style="text-align: right;">Right? Right!</p>

That only works for text. If you want a picture side by side with text, use float: right; or float: left;. For example:

<img src=http://www.istad.org/mc/blurp.gif style="float: left; margin-right: 5px;"> puts this little guy to the left of this line of text, and the text will flow around him. The margin keeps the text from squashing against the graphic.

Back to Top ⇑

Plain ol' HTML lets us format:

<b>bold text</b>
<i>italic text</i>
<u>underlined text</u>

CSS codes let us specify fonts and/or sizes with font-family and/or font-size. Use web-safe fonts that most computers recognize.

<p style="font-family: Arial; font-size: 14pt;">Format this paragraph!</p>

Or format just <b style="font-family: Times New Roman; font-size: 14pt; color: #008e84;">part of a paragraph</b> by adding CSS to bold or italics!

CSS has alternative ways of specifying bold, italics, and underline, so you can list all the formatting in one spot: font-weight: bold; font-style: italic; and text-decoration: underline;

Back to Top ⇑

Different browsers have implemented CSS Rounded Corners slightly differently, so for the moment we're stuck repeating ourselves, giving instructions to Mozilla, Firefox and company, then Safari and Chrome.

CSS Rounded Corners are only visible with a background-color or border, and you'll usually want padding between text and paragraph borders.

<p style="-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px 20px; color: white; background-color: #f90;">

You can set each corner independently. Here it's more obvious the different browsers haven't quite settled on standards for rounded corners:

<p style="-moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; padding: 5px 10px; border: solid 3px #f90;">

IE (through 8) and Opera haven't yet implemented rounded corners. So keep in mind these will look square for those two browsers.

See The Art of the Web: Border-Radius for some additional special effects currently only supported by Safari, which Firefox will hopefully implement. Watch that page for updates. In time, I think all the browsers are going to adopt the border-top-right-radius standard, which should make things simpler.

Back to Top ⇑

Webpages on professional sites define CSS styles they use again and again as classes:

A Squidoo StickyNote

<p class="postit-inner">A Squidoo StickyNote
</p>

This works because Squidoo has defined the CSS class "postit-inner". See Fluffanutta's Guide to CSS Classes for all the pre-defined Squidoo CSS classes available.

On Squidoo, we can't define new classes with a styleheet. However, we can override Squidoo's pre-defined CSS Classes and Styles using the powerful <span> tag, like this:

CSS makes webpages sing for their supper!

Code:

CSS makes webpages <span style="font-family: Times New Roman; font-size: 30px; color: blue; font-style: italic;">sing</span> for their supper!

<span style="such-and-such" > lets you apply CSS styling on any stretch of text, anywhere you like.

Back to Top ⇑

<span style="some CSS codes"> normally just applies to a stretch of text. But what if you want it to act like a paragraph, with its own margins, padding, and width? Simple: style="display: block;" means, "treat me as a box-shaped area." Then, by mentally defining parts of your page as box-shaped areas, you can do some fancy layout tricks.

Xmas
Post
Santa Claus
1 North Pole Drive
Arctic Circle, Earth

CODE:

<p style="width: 50%; border: dotted 1px; padding: 20px; text-align: center;"><span style="display; block; font-style: italic; font-family: Times New Roman; font-size: 8pt; line-height: 10pt; float: right; padding: 10px; border: dotted 1px;">Xmas
Post</span>
Santa Claus
1 North Pole Drive
Arctic Circle, Earth</p>

It looks a little intimidating at first, but if you look at each individual style command, they're all things covered on this page. Just remember, when you start "playing with blocks," you have to define the size and float of each inner block to tell the browser where to put them. Everything else is optional window dressing: font sizes, font styles, padding and margins, etc.

Finally, you can apply styles to plain tags like bold, italic, and underline, and you can define them as blocks too. For example: <b style="display: block;"> converts a stretch of boldfaced text into its own paragraph. Why? Because that way, between p, span, b, i and u, you've got multiple levels of nesting boxes -- which allows for all sorts of layout possibilities!

Back to Top ⇑

If you ever want to do something really complicated, you may start running out of containing boxes (see last section). On websites you own, you'd define containing boxes with classes and/or use the div tag. But on Squidoo, we can't do either. However, we can override HTML text formatting tags:

CSS Overrides for HTML tags: b, i, and u:
<b style="font-weight: normal;">This isn't bold!</b>
<i style="font-style: normal;">This isn't italic!</i>
<u style="text-decoration: none;">This isn't underlined!</u>

Results:
This isn't bold!
This isn't italic!
This isn't underlined!

Happy Holidays! My Seasonal LensesHallowe'enChristmasValentine's Day

icons by IcondrawerWhy on earth would we want to do this? Because if we override HTML text formatting, we can convert b, u, and i tags into spare span tags, then use them for complex CSS layout tricks.

Overriding HTML text formatting tags gives us a way to treat spans like Legos or Russian stacking dolls: we can place box-shaped areas side by side, above and below each other, or even nest them.

Here's the CSS Code to create my Holiday widget. Brace yourself. You should start out with something much simpler, like my Santa Claus example above.

Back to Top ⇑

Cross-platform compatibility is the goal on which the web was founded. Despite these efforts, not all webpages look the same on all browsers and operating systems. With CSS Codes, it's a good idea to check how your webpage looks using simulators of other browers.

Browershots.org is free, but it only allow 200 tests a day per domain. Squidoo users often max out Squidoo's allowance.

I use Litmus instead, which lets you test Firefox and IE for free (if it works on those, it almost always works on Safari). In spring 2009, they made all their browser tests available for free on weekends.

(Magnifying Glass from Creative Kitten Clipart)

Back to Top ⇑

Squidoo tries to take the pain out of web design by doing the coding for you. If you want more control, then you need HTML, the language most webpages are written in. If you want even more control, use CSS, an add-on to HTML. But what do these abbreviations stand for, and what are they?

HTML (Hypertext Markup Language), invented by Tim Berners-Lee, is a universal language of codes that all computers understand. Before HTML, it was a major hassle, and often impossible, to convert and share files between different computers. HTML -- an agreed-upon set of universal codes -- made a "world wide web" possible. Web browsers translate HTML codes into your computer's own language and tell it how to handle things like images, videos, and paragraphs.

You can recognize HTML by the codes inside angle-brackets (for example, <p> for paragraph). These codes label parts of a page ("This is a link, that's an image"). HTML usually leaves it up to the browsers to decide how to display them, although there's a few HTML codes for visual effects like italics and boldface.

CSS codes (Cascading Style Sheets) were invented to give us a lot more control over "how does it look?" CSS codes override HTML and web browser defaults. So, for example, you can tell the browser NOT to skip an extra line between paragraphs.

CSS codes look like this: property: value;. They can be tucked inside HTML tags using style="". For example, <p style="background-color: lightgray"> means "make the paragraph's background light gray."

"Style Sheets" refers to the fact that you can set up styles to use for your whole website (for example, "Make all my headers orange and bold"), and save those CSS codes in a separate file that each webpage loads in. If you want certain styles only on some webpages, you can set up special style sheets that get tacked onto the "main" style sheet of those pages. That's the "cascading" part.

But we don't have to worry about all that. Squidoo doesn't let us change its sheets! All we can do is add CSS codes to individual spots within our lenses, saying, "Forget the style sheets for a moment -- this is what I want you to do here."

Back to Top ⇑