Hi there. I'm Matt. Don't hate the player. Hate the game.1

New here? More info about me here.

Subscribe via email or RSS

Feb 1, 2009 | Comments

Continuing the focus on technical online marketing skills, next up is CSS–one of the greatest tools for web design.

I remember designing with HTML back in 8th grade. Bold <b>, italics <i>, font <font>–this is how text decoration was done.

Want to bold, italicize, and color red some text? <b><i><font color=red>text</b></i></font> = text

Every time you want to create text, add three different HTML tags–very tedious.

Wouldn’t it be awesome to program “bold, italicize, color red” into a special tag, <bolditalicizered>?

CSS lets you do this.

1. First connect each style to a term, “bolditalicizered”

#bolditalicizered{

  • font-weight: bold;
  • font-style: italic;
  • color: red;

}

2. Label the text with that term

<div id="bolditalicizered>text</div> = text

Damn, that was hot. Without explaining exactly how to do this (refer to the tutorials below), consider how much easier it is to program than HTML.

This is why CSS is so sweet: code all the fancy decoration into a term and label anything you want with it. Suppose I went to town with this tag, using it in 30 instances. Then I wanted to change the color from red to blue. Simply changing the rules for “bolditalicizered” from red to blue will automatically update everything.

As an online marketer, all of the fancy text and page decoration is saved in a “style sheet.” Once you have access to this file, you have control over a majority of site design. An agency once quoted me $2,000 to change a site background color from black to white. Even if you cannot write CSS at an expert level, understanding CSS and the trivial effort required to make this change will help you negotiate a much fairer price.

How to learn basic CSS (and exactly how I did it):

  1. Complete a basic tutorial. Tizag has an awesome CSS tutorial (so does webmonkey). Check out this CSS generator afterwards.
  2. Find your favorite website and try to re-engineer the CSS–the equivalent of taking something apart and putting it together again. I used Subtraction.com or pretty much any wordpress theme. Right click the website and select “view source code.” Find the link labeled “type=text/css.” This is the site’s CSS.
  3. Read more advanced CSS tips. Smashing Magazine is a great resource. Awesome articles here.
Blog Widget by LinkWithin
  • What part of "moved to Brooklyn" don't you understand?

  • $bags McAwsum

    You don't live in Brooklyn anymore! Poser!

blog comments powered by Disqus