All you need to know about CSSCSS allows you a lot of control and there are many, many attributes you can use to determine how your pages look.
We won't go into all the details and will focus only on the basics. Again, our goal is to create good looking pages as quickly and easily as possible, and not to win any web design awards.
Focus on making getting traffic and making money...Let's be honest, if no one sees your pages, then it really doesn't matter what your pages look at. And if you make money and want a fancy looking site, hire someone. Until then...
IMO, you should only be concerned with:
1. Having a good looking header.
2. Being "color coordinated".
3. Picking a layout.
And when it comes to layouts, the truth is, there's only a few choices:
One column
Two columns - Navigation left
Two columns - Naviagation right
Three columns
Thinking you need any more options will only blur the real issue and create too many choices...
Instead of using CSS for layout, I'm keeping it simple and have included the four basic layouts using old fashioned html tables.
This makes it as easy as 1,2,3...
1. Choose one of the 4 layouts
2. Add a header graphic to the top of it
3. Customize the CSS file to give your pages some "color".
Kurt's Quick Tip:
When dealing with the text for your content, only a few fonts really "work" so don't spend hours looking for the perfect font.
For your text, only use:
Verdana
Tahoma
Times
Impact (for headers ONLY!)
Of course, you can use more exotic fonts when working with graphics, but for your content, KEEP IT SIMPLE!
Another thing to understand is that if you use fancy fonts for text, your site's visitors must have the same font installed on their PC. If they don't have the font installed, the browser will make its own substitution, which can cause some crazy results. Again, keep your choice of fonts as simple as possible.
Note: You can use the fancy fonts with graphics. When it's a graphic, your visitors don't need the font installed to display correctly.
Also, unless you are really artistic, don't mess with too many colors. KEEP COLORS SIMPLE TOO.
Remember, it is more than OK to use the standard colors:
white background
black text
blue links
purple visited links
And, you don't have to do any extra work!!!
...As a matter of fact, if you're a noob, you should have a very good reason to vary from this. And just "wanting something different" isn't a very good reason.
Make sure your colors match and don't clash...What colors go with other colors?
At the top of the page is a link to a color picker. Actually, it's more than that, it also gives you selections for complimentary colors so you can be sure your pages are "color coordinated".
Click on this link to check it out:
http://wellstyled.com/tools/colorscheme2/index-en.html
Now, pick the color closest to the major color of your header.
LAST EDITED ON Oct-12-07 AT 04:31 AM (PST)
Note: For CSS you can enter colors one of two ways: Either by name or by "hex value". If you use the name, do NOT use the # sign.
If you use the hex number, you must use the # sign.
Example:
black
#969696
For the names and hex numbers of web colors, use this chart:
http://en.wikipedia.org/wiki/Web_colors
Below is the CSS file I use for the skins and templates used in this forum.
Of course, if you know CSS you can change them, add to them, or use your own.
However, I won't go beyond what is included in this CSS file, as (again) the purpose of this forum isn't to teach advanced web design, but rather to create good looking pages quickly and easily.
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: red;
scrollbar-track-color: black;
scrollbar-highlight-color: #969696;
scrollbar-arrow-color: ivory;
}body, div, p, th, td, li, dd {
font-family: Verdana, Tahoma, Lucida, Arial, Helvetica, sans-serif;
font-size: 14px;
}
body {background-color: white}
h1 {
font-family: Impact;
font-size: 32px;
color: black;
background-color: white
}
a:link { color: #FF0000; text-decoration: none }
a:active { color: #B30000; text-decoration: none }
a:visited { color: #FF8080; text-decoration: none }
a:hover { color: #B30000; text-decoration: underline }
}
{
TABLE { background: white; border-collapse: collapse }
TD { background: white; border: dashed #dfdfdf 1px }
}
-->
</style>
There are 6 basic sections of this style sheet, so let's look at them one at a time.
The first controls how your scroll bars will look:
BODY {
scrollbar-face-color: red;
scrollbar-track-color: black;
scrollbar-highlight-color: #969696;
scrollbar-arrow-color: ivory;
}
You can do some cool things with these, but remember, this only works with the IE browser. FireFox users won't even see this, so don't spend a lot of time on it.
To be honest, you only need to change the "red" and "black" colors to have a high impact effect on your pages' look.
For best results, use the color picker link at the top of this page to find colors that "coordinate".
Your best bet to see how these work is to just play around with them. Open a page in IE on your hard drive and change to colors to something crazy and see what colors are displayed where...Don't forget to refresh your page. Change my "red" to your "purple" and look where purple is shown...
The second element controls your font:
body, div, p, th, td, li, dd {
font-family: Verdana, Tahoma, Lucida, Arial, Helvetica, sans-serif;
font-size: 14px;
color: black
}
The first line tells the browser that pretty much the entire page should use the same font. Don't change this unless you have a specific reason and know what your are doing.
The second line tells the browser what font to show. There are more than one font listed. This is so if the user doesn't have the particular font installed, the browser will "default" to the next font, etc. If you want to use a particular font, PUT IT FIRST.
The font-size should be pretty obvious....14 pixels is pretty good, but you can change this if you want...The higher the number, the bigger the font.
Then you have the color...Enter a name or hex value for the color you want your main font to be.
This next section controls your background color of the entire page:
body {background-color: white}
Change this to any color name, hex value you feel looks good.
Again, my rule of thumb is that you need a very good reason NOT to use white. Being bored isn't a good reason.
This next bit of CSS merely controls how the text inbetween the <h1> and </h1> tags will look.
You can copy/paste this block of CSS and change h1 to h2 and customize those tags, if you want.
h1 {
font-family: Impact;
font-size: 32px;
color: black;
background-color: white }
The next block controls the color of your links:
}a:link { color: #FF0000; text-decoration: none }
a:active { color: #B30000; text-decoration: none }
a:visited { color: #FF8080; text-decoration: none }
a:hover { color: #B30000; text-decoration: underline }
}
a:link = Is the links on your page that haven't been clicked on yet.
a:active = This controls how your link looks as it is being click on.
a:visited = This is the color of links that have already been visited.
a:hover = Controls how your links look when the mouse hovers over the link.
The "decoration" is how the link is formatted. There are other styles, but there's really no need to get "fancy". Pick "none" or "underline".
underline is standard so I suggest using it when possible. "none" is a basic blackhat strategy when the font color and link color match.
The following controls how your tables will look. This is another aspect of CSS that works in IE but not in Firefox, so don't spend a lot of time with it:
{ TABLE { background: white; border-collapse: collapse }
TD { background: white; border: dashed #dfdfdf 1px }
}
The background is self-explanatory...
You can use different border styles, such as:
solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
You'll also see you can control the color of the border as well as the thickness, with 1px being "thin".
...But again, not all browser will show these border styles, so don't spend a lot of time on this.