What is CSS?
CSS is the abbreviation of Cascading Style Sheets. Style sheets are a great tool for editing the look of the page by editing a property in the CSS. Not all CSS is supported by the major browsers, so it's a good idea to test your sites in both FireFox and Internet Explorer.
CSS codes are placed in side the HEAD tags.
HTML Code:
<head>
STYLES HERE
</head>
CSS changes the look of your entire page just by editing that line of code.
An example of CSS
This is what the typical style sheet looks like. There may be more lines, there may be less. It depends on what you want to change.
HTML Code:
<style>
<!--
BODY,P,TD {font-family:vedanta,arial; font-size:11px; color:#D0D3FF; }
A:link { text-decoration: none; color:"#D0D3FF"; }
A:visited { text-decoration: none; color:"#D0D3FF"; }
A:hover { text-decoration:none; color:"#000000"; cursor:w-resize; }
body {
scrollbar-arrow-color: #CCCCCC;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #FFFFFF;
}
-->
</style>
What does the code above mean?
BODY,P,TD
This line shows what the text on your page will look like.
FONT FAMILY: This is the font you want to use. Put the name of the font here. Be sure to use a common, easy to read font like Tahoma, Arial, Comic Sans, Verdana, etcetera.
FONT SIZE: This one is simple enough. Replace the number with the size of font you would like to use. Use PT sizes, not just the 1-7 font sizes. PT sizes are the font sizes you use in a word processor.
COLOR: This changes the color of all the text on the page. Replace this with a color code.
A:LINK, A:VISITED, A:HOVER
These are styles are links. All the links on your page will change when you do these. "Link" is normal links. "Visited" is links that you have been to before. "Hover" is what the link looks like on mouseover.
TEXT DECORATION:
This is what is attached to the link. You can make the link underlined or overlined, you can make the link have a line through it, or you can make it have nothing at all. If you use FireFox, you can make your links blink. In Internet Explorer, it will just look like a normal link. You can keep none to make it so links aren't underlined, or you can add a different decoration:
- none
- overline
- underline
- line through
- blink
COLOR: This changes the color of all the links on the page. Replace this with a color code.
CURSOR: This is only in the HOVER section. When you mouseover a link, you can get a different curser than the hand. If you really do want the hand, just take it out ^_~. There are many types of cursors:
- cursor:n-resize - Cursor faces north
- cursor:e-resize - Cursor faces east
- cursor:s-resize - Cursor faces south
- cursor:w-resize - Cursor faces west
- cursor:nw-resize - Cursor faces northwest
- cursor:ne-resize - Cursor faces northeast
- cursor:sw-resize - Cursor faces southwest
- cursor:se-resize - Cursor faces southeast
- cursor:wait - The cursor looks like an hour glass
- cursor:crosshair - Looks like a cross
- cursor:move - Cursor with four arrows
- cursor:help - Cursor with a question mark
- cursor:text - Cursor looks like a text arrow
BODY
This is the section for you to add your colored scrollbars! If you look at this page, you'll notice my scrollbars are different colors. If you can't see it, it is because you are either using FireFox, or a version of Internet Explorer below 5.5. Just replace the colors of the scrollbar to your own hexcodes.
scrollbar-arrow-color This is the color of the arrow that you push to go up and down.
scrollbar-darkshadow-color This is the color on the outer right and bottom of the buttons.
scrollbar-track-color This is the background of the scrollbar.
scrollbar-face-color This the the bar travels up and down the scrollbar.
scrollbar-shadow-color This is like the darkshadow color, but this one is a line just inside that line. This is a normal shadow.
scrollbar-highlight-color This is a line that is on the inner left and top of the buttons.
scrollbar-3dlight-color This a line that is on the outer left and top edge of the buttons.
It may be hard to get a scrollbar you like, so just replace the colors, and see what you can come up with.
How do I add borders to objects?
Borders are nifty to add to tables, frames, and images. You can add this style to a lot of things.
The above image should have a white dashed border around it (it doesn't because of the forum). This is done by using this code:
HTML Code:
style="border: 1px dashed #FFFFFF"
You put the above code in the image tag like this:
HTML Code:
<img src="neovenezuelaffver.jpg" width="150" height="100" style="border: 1px dashed #FFFFFF">
PX Change this number for how wide you want it to be.
DASHED Replace this with SOLID, DOTTED, OUTSET, INSET, RIDGE, GROOVE or DOUBLE. There may be more types.
COLOR As you may have guessed, this is the color of your border.
Bookmarks