Freelance Home-Based Small Business A QUICK GUIDE TO CASCADING STYLE SHEETS

All Freelance Work is a Community for Freelance Workers Including Free Portfolios, Job Search, Job Posting, Helpful Articles, Forums, & More for the Self Employed.

Home > Articles > Web Building > A QUICK GUIDE TO CASCADING STYLE SHEETS

A QUICK GUIDE TO CASCADING STYLE SHEETS
Written by Sean Paul Caillouette
http://www.seanpaulheather.com/

A cascading style sheet can be used to predetermine font styles or image styles and placements. In this article we will learn how to make a header, a body and triple rollover using cascading style sheets.

Lets start by writing the body style. Open your favorite text editor and type the following:

.body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #5B4A11;
line-height:24px;
}

You will note that the first line is the name of the style followed by a curly brace. Within the curly brace is the description for the style named "body." Don't forget to use a closing curly brace at the end of your style description. Font-family describes the font to be used. The monitor will try to include the first font, if that is not available it will move to the second, then the third until if finds an available font. All style descriptions close with a semicolon. Then there is the font size. We have set it at 9 pixels or 9 points. Then for the color we have chosen a hexadecimal number for dark brown. You can find hexadecimal numbers in any photo imaging program or you can buy a web book that describes hexadecimal numbers and colors. Then the line-height is the leading, or the spacing between the lines. We have chosen 24 pixels to give the body a more open feel.

Now lets define the header. Type in above or below the body description the following code:

.Header {
font-family: Helvetica, Arial, Geneva, Swiss, SunSans-Regular
font-size: 20px;
color: # 9D8F9E;
font-weight: bold;
text-transform: uppercase;
}

Again, the same rules apply. We have not included a line height because theheader will only occupy one line. We have included "text-transform" to convert the text to uppercase. This will be appropriate for the title. The color is a smoky purple.

Next we will create a text button rollover. The text will highlight when a person places the cursor over the text, and the text will change color when it is pressed. This is called a triple roll-over

a.button {
font-family: Veranda, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #D1BA6A;
font-weight:
bold; font-size: 13px;
text-decoration: none;
}

a.button:hover {
color: A18F9D;
font-family: Veranda, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}

a.button:active {
color: #4DC750;
font-weight: bold;
font-size: 13px;
font-family: Veranda, Arial, Helvetica, SunSans-Regular;
text-decoration: none;
}

We include an "a." before the name of the text so that it works with the html "a href" command. We have included "text-decoration: none" to remove the underline that html places beneath hypertext links.

The buttons will be a dull orange that turn smoky purple when the cursor is placed over them, then they turn green when pressed. "Hover" is when the cursor is placed over the button. "Active" is for when the button is pressed. Notice that these three descriptions all have the same name, "button."

Now save the file as "style.css" in a folder named "stylesheet."

Next we will write the html to make the cascading style sheet work. Open a new document in your favorite text editor and write the following code.

<html>
<title> Cascading Style Sheet</title>
<head>

</head>

<body>

This is the Heading

This is the body of the page.
I will type more so that it 
takes up several lines. The body is 11 point text, sans serif, 
with 24 pt leading. This is the body text. It is a dark brown. 
I hope you are learning a lot with this little exercise. 
 
<A HREF="index.html" class="button">link one  
<A HREF="index.html" class="button"> link two  
<A HREF="index.html" class="button"> link three  
</td></tr></table>

</body>
</html>

Now save this file as index.html in the same folder as the style.css document. Now open you favorite browser and open the index.html document. You should see the text laid out according to the style sheet specifications.

Trouble Shooting

If you are having problems getting the style sheet to work, make sure that you have straight quotes and not curly quotes in your html. I tried to cut and paste into my favorite text editor the above code, and I had curly quotes in my text editor. Curly quotes will not work, you need straight quotes.

The triple rollover will not work in Netscape browsers less than Netscape 6. They should work fine in Internet Explorer 5 and above.

To see what the page should look like you can visit the following url:
http://seanpaulheather.com/stylesheet/index.html

Written by Sean Paul Caillouette
http://www.seanpaulheather.com/
504.279.6985

HOW TO SET YOUR FREELANCE RATES - A GUIDE FOR FREELANCERS & CONSULTANTSThere are many factors which business owners must consider on a daily basis as it relates to the running of their business. Things such as how to find good help, where to acquire supplies and how much to pay one's employees are all pertinent matters which must be addressed. There are a few ways to go about figuring out your rates when it comes to how much to charge the customers.

Apr 01

		SPOTLIGHT CONSULTANTS FROM OUR FREELANCE COMMUNITY

MARKETING PLANS : A Collection of Articles for How to Outline and Write a Marketing Plan for Freelancers Starting a Home Business or a Small BusinessA solid, well-prepared marketing strategy is the foundation of success in business. The freelancer or any type of business owner must become informed on the development of an effective marketing plan. The following links will focus on marketing plan articles for the freelancer to have a successful business.

Mar 20

Category: Getting Started - Self Promotion - Marketing | Trackback | No Comments »

BUSINESS PLANS: Business Plan Examples, Samples, Templates, Software and ToolsIn any type of the business including those people that perform freelance work, the proper tools are necessary to become a success. The following links consist of selected online tools for the freelancer to develop an effective business plan.

Mar 18

Category: Getting Started - Freelancing & Self Employment - Lists - Freelance Resources | Trackback | No Comments »

MAR 03

FREELANCING AND FINDING WORK AT HOME JOBSThe difficulty lies not in the fact that there aren't plenty of work at home jobs available but rather in the fact that genuine, quality, money-earning work at home jobs are all mixed up with work at home scams. This makes finding a work at home job that's legitimate a not-so-easy task for people who are just breaking in to the freelancing business. But don't worry; once you learn the lingo and know the basics, finding a work at home job gets a lot easier!

Mar 16

BUSINESS PLANS : A Collection of Articles for How to Outline and Write a Business Plan for Freelancers Starting a Small Business

Business plans are necessary in all types of businesses … and this also includes freelancers. Writing an effective business plan will help you plan out the success of your future business. Factors such as customer base, profit potential, as well as many other factors will be placed in this document. The business plan will help you, the freelancer, think through every aspect of your future successful business. We found the following business plan articles to be very helpful and we hope that you will find them to be useful too.

Category: Getting Started - Lists | Trackback | No Comments »

FEB 25

HOW FREELANCER WRITERS CAN DEFEAT WRITER'S BLOCKHelpful hints and tips to overcome the dreaded White Page Syndrome - There is probably nothing more dreadful and problematic for a writer than not being able to get going, being stuck on a menacingly white page. Read on for more ideas on how freelance writers can overcome Writer's Block.

FEB 19

WAYS TO GET MORE CUSTOMER REFERRALS FOR YOUR FREELANCE BUSINESSThe amount of customer referrals will often determine how successful one's freelance business can really be. As word spreads quickly, having customers refer others to you and your services is a wonderful way of gaining new freelance business and making more money. There are a few distinct ways to get more client referrals for your business.

FEB 18

FREELANCE HOME OFFICE DISTRACTIONS VS DISTRACTIONS WHEN WORKING IN AN OFFICEOf course, distractions are different depending on whether you are freelancing from home or working in an office. Both kinds have their pros and cons so let's take a look at some of the basic ones so that you can start getting a grasp on good vs. bad distraction behaviors for freelancers.

FEB 08

WORKING FULL TIME WHILE RUNNING YOUR FREELANCE BUSINESSThe key to being able to make the transition to full time freelancing is in setting goals that allow you to focus on moving away from working full time for someone else and towards putting more hours in to your freelance business.

FEB 06

20 WAYS TO PROMOTE YOUR FREELANCE SERVICES USING ONLINE FORUMSThere are a few distinct ways in which freelancers can market their services through forum marketing techniques.

JAN 24

60+ UNIQUE LOCAL & OFFLINE MARKETING IDEAS FOR YOUR CONSULTING BUSINESS Although online promotion is important for your freelance business, it's crucial to remember to go back to your basics and do offline promoting as well locally, nationwide, and worldwide depending on who you are marketing to. Here are over 60 ideas to market your consulting services locally. Let Freelance work find you.

JAN 22

WHAT TO DO WHEN YOUR CUSTOMERS ARE GOOGLING INFORMATION ON YOUThis can be an issue for freelancers whose customers google them and try to find out information relating to them and their business. The following is a list of what to do when your customers are googling information on you.

JAN 19

26 THINGS TO DO WHEN BUSINESS IS SLOW AND IN DOWNTIME MODESome freelancers are anxious to work day in and day out which may present a problem for them when business is slow. However, there are many things which freelancers can do to bide their time while waiting for new freelance work to come in. Here are 26 ideas for staying productive during your consulting business downtime.

JAN 15

ONLINE CUSTOMER SERVICE TIPS FOR FREELANCERS & THE SELF EMPLOYEDThere is a casual attitude about communication that takes place online and that creates an environment in which customers sometimes don't take your work seriously, leading to problems with projects and payments. In order to avoid those problems, you need to make sure that you are conducting all of your online work in as professional a manner as possible. Here are some tips on how to do that.

JAN 02

TOP 150 PLACES TO TRAVEL WITH YOUR FAMILY WHEN YOU STILL NEED TO GET WORK DONEWhen you are self-employed, there is no vacation time to save up, and there is no one to cover for you when you're away. For many that mean giving up on vacations altogether, and this is what I have been doing for awhile. Most of These All-Inclusive Family Resorts Have Kids Clubs in Which Your Child can enjoy supervised and fun activities while you and your spouse can have fun or get freelance work done. Take a look below and enjoy!

DEC 30

LIST OF ARTICLE SITES, BLOGS, AND INFORMATION DIRECTORIES FOR FREELANCERS, CONSULTANTS, AND THE SELF EMPLOYED Do you ever get frustrated when you can't find the information that you need about freelancing? Well, I've just compiled a list of the best article sites, blogs, and directories for freelancers, consultants, and the self employed.

DEC 30

DECIDING WHETHER OR NOT TO FREELANCE OFFSITE OR ONSITE Deciding to work onsite or offsite sounds like a relatively simple decision, but it's actually one which isn't easy to make. Sure, when you're lying in bed just after the alarm has gone off and you see that it's raining outside and all you wish was that you could go back to bed for ten minutes and then do your freelance work from home, working offsite sounds ideal. But there are as many cons to the offsite work job as there are pros and you need to weigh them carefully when making the decision about whether to work onsite or offsite.

DEC 21

IS FREELANCING RIGHT FOR YOU? Freelancing, a term introduced by Sir Walter Scott (1771-1832), is when you work without being committed to an employer. With development of internet and communication technology, there has been a dramatic rise in the number of people going their own way and leaving behind the cubicles. You are reading this book, so you must be contemplating becoming a freelancer, but before you make your move there are a few things to consider.

DEC 20

FREELANCER'S GUIDE TO TIME MANAGEMENT The most common problem that freelancers face is figuring out the balance between work and the rest of life. While there are a few freelancers out there who don't work as much as they need to in order to pay their bills and improve their business, most freelancers have the opposite problem - they work ALL the time. And that's why there are a great number of freelancers who "burn out" after a short (or if they're lucky, a long) time. In order to make sure that you aren't one of those people who "used to freelance but got burned out", you need to set limits on how much you work. Then you need to stick to those limits.

DEC 16

SHOULD I TURN DOWN FREELANCE PROJECTS? As freelancers, we often feel as if we have to say 'Yes' to every single job out there. However, we as freelancers are in a position where we can choose to say 'No' if we want to. Believe it or not, there are certain projects that you probably shouldn't accept. Turning down work is probably the hardest decision you will need to make when running your business, but sometimes turning down a gig is necessary. In this article I will explain to you the details that you need to consider when you aren't sure which route to take. Consider the following:

DEC 12

COOL IDEAS FOR YOUR BUSINESS CARDS As freelancers, we need to promote ourselves with business cards. How about putting yourself ahead of the rest of them by designing and printing completely unique business cards? You are about to take a look at the coolest and most innovative business cards that you have ever seen.

DEC 10

LIST OF FREELANCE FORUMS & MESSAGE BOARDS Looking to get together with other freelancers? Want to network? Want to ask questions about freelancing that you can't find the answer to anywhere else? Look no further than the freelance forums that we have listed below. Feel free to let us know about forums that we have missed.

SPOTLIGHT CONSULTANTS FROM OUR FREELANCE COMMUNITY

Read More Articles from the ALL FREELANCE BLOG & SELF EMPLOYMENT BLOG