by 9 people |
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
<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
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
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
CSS Web Design For Dummies (For Dummies (Computer/Tech))
Amazon Price: $16.49 (as of 12/14/2009) 
Stylin' with CSS: A Designer's Guide
Amazon Price: $25.54 (as of 12/14/2009)
CSS Pocket Reference (Pocket Reference (O'Reilly))
Amazon Price: $9.95 (as of 12/14/2009)
Build Your Own Web Site the Right Way Using HTML & CSS
Amazon Price: (as of 12/14/2009)
Beginning CSS: Cascading Style Sheets for Web Design (Programmer to Programmer)
Amazon Price: (as of 12/14/2009)
More Reference Links
- 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.
For the truly geeky...
Did this help?
-
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'm Squidoo's Community Organizer, which means my focus is on building the community: bringing in new lensmasters, developing...
(more)Explore related pages
How to Build a Beautiful Site With MODx CMS (Content Management System)- Learn about the MODx Content Management System. Find links to free MODx te...
Create Stunning CSS Backgrounds with Images- Have you heard of CSS Backgrounds? Do you have a Squidoo lens or two? How about...
Web Site Apps & Graphics- Find the best free web publishing templates, comment codes, fonts, blog widgets...
Web Development Tutorials- Hello there :) This lens is meant to be a medium to help you learn to make your...
Website Tips ~ Share Yours!- Website tips on everything you ever wanted to know about building a successful w...
A Beginner's Guide to CSS- This lens isn't finished yet, but a couple of decent modules are ready, so I'm p...
