| "Skin" Your Site |
To have a site that brings people in you have to have alot of content. If you
have pages upon pages you have to code font size, type, and color plus any special link
coloring or effects. That's enough to handle, then when you change your layout you have to
go to every single page and change all the colors! It's enough to makes someone's hair fall out.
Well, some wonderful person, I don't know who, has come up with a solution. It's a cascading
style sheet. And here's how you do it.
First code your regular page except for using background colors, alink, vlink, and font formatting.
Then at the top put this:
<![CDATA[<link rel="stylesheet" href="youcandoit.css"]]><![CDATA[type="text/css">]]>
make sure this goes in the <![CDATA[<head>]]> tag.
Next, open a new notepad or wordpad document.
This will be your External Style Sheet, you called this back in your other code. Save this as
youcandoit.css. You can change filename at any time for you own amusement. Make sure that you
change it in the link code too.
Now, this link contains a table of stuff all your style sheet can control and it's options.
Table
The properties I use most are the background, cursor, scrollbars, & position- absolute.
In this new document put
<![CDATA[<!--
BODY
-->]]>
When you enter the next sets of code make sure you put them right after the body so the --> part stays
at the bottom. If it goes before your code it won't work.
Now comes the question of what exactly you want to skin so were gonna do scrollbars first. Paste or
recode this into your stylesheet under the body command.
<![CDATA[{scrollbar-face-color:#666666;
scrollbar-highlight-color:#333333;
scrollbar-3dlight-color:#999999;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#56727D;}]]>
Now you have to change the colors to fit the color scheme on your page. The 'Face' is the top of the
scrollbar that moves down as you scroll. 'Highlight' is the color when you click on the scrollbar
and the slider jumps to where you click. '3dlight' is all the 3d areas of the scrollbar. 'Darkshadow'
is the darker parts of the scrollbar. 'Arrow' is the little arrow. 'Track' is the base of the scrollbar
I usually set it the same color as my background so that it blends in.
Save at this point and go look at your spiffy new scrollbars! OOOO AAAHHH.
Moving on... Next I typically do the links.
<![CDATA[a:link {}
a:visited {}
a:hover {}]]>
Now to put some cool properties in those empty brackets.
<![CDATA[text-decoration:]]>
This can be set to none which means on the link there is no underline.
Putting underline will make whatever property it is have an underline, if you put it in hover then when you
hover over the link it will underline.
Putting overline will make whatever property it is have an overline, if you put it in hover then when you
hover over the link it will have an overline.
Putting 'overline and underline' will make the property have both.
When your done with this you put a ; It closes that command. Like so:
<![CDATA[ a:hover {text-decoration: underline and overline;}]]>
There are more properties but these are the ones I use the most often.
<![CDATA[color:]]>
This works just like you think it does.
The command line should look like this:
<![CDATA[ a:hover {color: #ffffff;}]]>
<![CDATA[background:]]>
This works like the color property but it puts a colored box around the the link.
<![CDATA[ a:hover {background: #666666;}]]>
<![CDATA[cursor:]]>
This command is really fun. You can have 'ne-resize', 'nw-resize', 'move', 'help', 'e-resize',
'hand', 'pointer', & 'crosshair'.
Code:
<![CDATA[ a:hover {cursor: move;}]]>
<![CDATA[text-transform:]]>
This has the options: 'uppercase' & 'lowercase'
<![CDATA[ a:hover {text-transform: capitalize;}]]>
The next and last command I'm going to show you is
<![CDATA[font-weight:]]>
This can have 'bold','bolder', & 'lighter'. I usually use bold in the hover property. This makes the link 'pop' out
at the user when they roll over it.
<![CDATA[ a:hover {font-weight: bold;}]]>
At this point I would save again and take a look at your spiffy new links!! You don't have to use all the properties for the links to work.
Ok, now on to the formatting. What I do to make things simpler on myself is I allow the entire page's text to all look the same.
All one color, font face, and size. If you can allow this then go back to your HTML code for your page and surround the text from the BODY tag to the close BODY tag in a
<![CDATA[<font></font>]]>
then come back to the stylesheet and put
<![CDATA[font {}]]>
For this you can use regular text formatting like
<![CDATA[ font-face: comic sans ms;
size: 3;
color: #ffffff;]]>
If you can't do this then surround the nessicary text in formatting like h1-h6, b, i, u, p, or center. Anything you can use to point
the stylesheet at that point in the document. Then you put
<![CDATA[p {}]]>
or whatever you have. This should work. It's kinda hard to explain, if you have any problems feel free to
email me
remember to close this...
<![CDATA[-->]]>
Save then admire your work. Put the link rel tag at the top of all your documents, then when you change
your layout all you have to reformat is the stylesheet! Enjoy!!!!
...Back
|
|
|
|
