CSS Codes
What is CSS?
CSS stands for cascading style sheets. Cascading style sheets are used to change properties like font face, size, font in tables, scrollbar colour, link colour and hover colour, and other style attributes on Web sites, without having to use long HTML codes
Link Styles
You can change how ALL your links look:
just when its normal (A:LINK)
once you visited it (A:VISITED)
when you click on it (A:ACTIVE)
when you put your mouse on it (A:HOVER)
The following is the main code. Put it ONCE on your page, and it changes ALL your links. Whatever interesting style code you want to do, put that particular code where it says "text-decoration:none"
<![CDATA[<STYLE type="text/css"><!--
A:link{color:COLOR;text-decoration:none}
A:visited{color:COLOR;text-decoration:none}
A:active{color:COLOR;text-decoration:none}
A:hover{color:COLOR;text-decoration:none}
--></STYLE>]]>
See where it says "text-decoration:none"? That can be changed to many different codes, which make links underlined, bold, italic, different colors, etc. You can change any, or all of the text-decorations. If you want to, replace the part where it says "text-decoration:none" on each line with one of the following codes. OR if you leave it as it is, the links will be plain, non-underlined. You can also put more than one text decoration on each section.
Text Decorations For Links
Code To Replace "text-decoration:none" WithWhich Makes...
text-decoration:underline
underlined
text-decoration:underline overline
underline & overline
background-color:COLORHERE
background color
text-decoration:line-through
slashed out
cursor:crosshair
cross cursor
cursor:n-resize
cursor points up
cursor:s-resize
cursor points down
cursor:w-resize
cursor points left
cursor:e-resize
cursor points right
cursor:wait
hourglass cursor
font-weight:bold
bold font
font-weight:italic
italics text
font-size:#pt
| sized text
| | | | | | | | | | | | | | | | | | | | | | | | | | | | |
CSS Sheet
This is a full CSS Code, copy and paste this and work on your CSS skills!
<![CDATA[<style type="text/css">
A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;
background-image: url(yourimage.gif);
background-color: #000000;
stylecursor(Warning: the following cursor attribute is for those who use IE only!)
cursor: value; [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize]
customcursorcursor: url('yourdomain.com/cursor.ani');}
h1 {font-family: value; [your font name for headers (arial, verdana, etc.)]
color: value; [your font color (#000000)] }
p {font-family: value; [your font name for paragraphs (arial, verdana, etc.)]
color: value; [your font color (#000000)] }
stylebodybody
{ background: #000000;
background-image: url(value); [url of background image to be used, i.e. background.gif]
background-repeat: value; [repeat, no-repeat, repeat-x, repeat-y]
background-position: valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: value; [scroll, fixed]
font-family: value; [your font name]
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size: value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
(Warning: the following scrollbar attribute is for those who use IE only!)
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000;
bodymarginmargin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
td
{ font-family: value; [your font name]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }
input, textarea
{ background: #000000 url(yourimage.gif);
font-family: value; [your font name]
color: #000000;
border-style: value; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #000000;
border-width: valuepx; [numerical value, 5, 6, 8...] }
</style>]]>
Back To HTML Help