Simple CSS for Website Text Formatting

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 9 people | Log in to rate

Ranked #6,633 in Tech & Geek, #150,110 overall

Using Cascading Style Sheets to format your website text doesn't have to be hard.  Use the code below to design simple CSS for your site, and build from there.

Please note: in my entire life as a web designer, I've only used NotePad to write out HTML (yes, by hand!)  In my opinion, all professional web designers had better know the code.  Relying too much on WYSIWYG editors is like a mathematician using only calculators.  Plus I just find that it's faster for me, and it's my personal preference.

As such, you may find that an HTML editor you use doesn't like my code.  Refer to your user manual for more information, or check out the handy-dandy CSS and HTML books towards the bottom of the lens.

Step One: Link to the Style Sheet 

The first thing you want to do is make sure that the pages you create understand they have to "look" to the CSS file to get the text formatting information. You can do that by inserting the below code between your <head> and </head> tags:

<link href="stylesheet.css" rel="stylesheet">

stylesheet.css is the name of the file where you will be placing your CSS code. If you're creating it in NotePad, simply name the file stylesheet.css and select "all file types" before saving. Otherwise you may end up with a file named stylesheet.css.txt.

Step Two: Create your CSS file 

Above you learned how to correctly save a css file in NotePad. (If you want to save the file under a different name, just make sure you change the code above to reflect that.

In your blank NotePad file, paste the following code:

.orange14{font-family:tahoma;font-size:14px;color:#EE6D00;}

This is a sample portion of code I used in one of my old websites. To better see each section of code, I have broken it into lines below:

.orange14{
font-family:tahoma;
font-size:14px;
color:#EE6D00;
}


The code was used to create orange, 14 point font in Tahoma. Each line defines part of the font attribute.

orange14 - this is the name I gave this specific font style. It is easy to remember because I know it is orange in color and 14 points in size.

tahoma - this defines the font face. You can use Arial, Times New Roman, Veranda, etc. as you wish.

14px - I like how CSS allows you to define size in pixels rather than H1-7. You get a great range of control.

#EE6D00 - this is the hex code of the color I have chosen.

To create your own custom text, replace any of the attributes above with your own font face, color, style, or size. Then we simply put it back together!

Do the same for each style that you desire. When you are done, your file may look something like this:


.orange14{font-family:tahoma;font-size:14px;color:#EE6D00;}
.black10{font-family:tahoma;font-size:10px;color:#000000;}
.white16{font-family:tahoma;font-size:16px;color:#ffffff;}
.red12{font-family:tahoma;font-size:12px;color:#CC0000;}

Step Three: Define the style for each section of text 

Once you have uploaded your CSS file, you can start seeing style changes that you make to your text.

To affect text with a specific style, use the following code:


<FONT CLASS="red12">This text will now be red12, whatever red12 is defined as in your css file.</FONT>


Your end result will be:

Books and Tutorials 

Learn more about using CSS for everything from backgrounds and borders to DIV alignment with these step-by-step guides to CSS basics.

CSS Web Design For Dummies (For Dummies (Computer/Tech))

Amazon Price: $16.49 (as of 12/14/2009) Buy Now

Stylin' with CSS: A Designer's Guide

Amazon Price: $25.54 (as of 12/14/2009) Buy Now

CSS Pocket Reference (Pocket Reference (O'Reilly))

Amazon Price: $9.95 (as of 12/14/2009) Buy Now

Build Your Own Web Site the Right Way Using HTML & CSS

Amazon Price: (as of 12/14/2009) Buy Now

More Reference Links 

This is only meant to be a very simple tutorial for absolute font formatting basics. Visit the links below for more instructions on using CSS.
CSS Properties
A great selection of easy-to-understand font, color, background, and page formatting codes.
Beginner's Guide from a Seasoned CSS'er
Includes a summary of six tips for design and css starters.
CSS Home Page
The "authority" on CSS on the web.
Wikipedia
Help from the people(s) at Wikipedia.
CSS Zen Garden
See how HTML and CSS can be used to create similar effects.

Did this help? 

submit
  • Reply
    Flashfox Flashfox Jun 4, 2008 @ 12:34 pm
    LOL thanks for featuring my Tshirt.
  • Reply
    littlespark littlespark May 7, 2008 @ 8:27 am
    Great lens. The facts in this lens are very intriguing and informative. I could learn about CSS only from your lens. Thanks for your good effort and for sharing the information. I come across a good informative and interesting site about Web Design on Web Design Please stop by to surf more information about Web Design.

by KimberlyDawnWells

I AM: Kimberly Dawn Wells

I'm Squidoo's Community Organizer, which means my focus is on building the community: bringing in new lensmasters, developing...

(more)

Explore related pages

Create a Lens!