Basic CSS
Scrollbars
This code will help you change the color of your scrollbars to fit your weblayout. However, this can only be seen on IE and not on Mozilla! If you need ready coded scrollbars you can use the following below!This is the code you need to place:
The code above will show a scrollbar similar to this:
To know which part is ... I placed unusual colors on the attributes which you can edit later!
scrollbar-face-color:red;
scrollbar-arrow-color:blue;
scrollbar-track-color:purple;
scrollbar-shadow-color:black;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:green;
scrollbar-darkshadow-color:white;
Left Scrollbars by Alex
This is easy if you can code a normal scrollbar. All you need to do in this that you dont have in the other is put {direction:rtl; infront of ur scrollbar code
<style type="text/css">
body {
direction:rtl;
scrollbar-3dlight-color: COLOR/CODE;
scrollbar-arrow-color: COLOR/CODE;
scrollbar-base-color: COLOR/CODE;
scrollbar-darkshadow-color: COLOR/CODE;
scrollbar-face-color: COLOR/CODE;
scrollbar-highlight-color: COLOR/CODE;
scrollbar-shadow-color: COLOR/CODE;
scrollbar-track-color: COLOR/CODE;
}
</style>
Here are some scrollbar codes you can use. A link back is not necessary but will be greatly appreciated!
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Links
This is the code that will make you change your link colors!
In the code above we have a: link; a: visited; a: hover.
a:link - all attributes contained inside it's bracket shall be the "normal" look of a link in your page;
a:visited - all attributes contained inside it's bracket shall be the look of a link that has been clicked or visited;
a:hover - all attributes contained inside it's bracket shall be the look of a link when you hover your mouse on it.
Link Attributes
- color - this is the color of the link you want on its normal look, visited look and hovered look
- text-decoration - this is the look of your link...you can place underline or strike
- font-weight - if you want your link to be bold put bold, if not put normal.
There are other ways you can make your links look better like adding the following:
- font-size: - you can put the size of the text on the a:hover bracket to change the font size once a visitor hovers his mouse on it.
- background:url(image.gif) - if you want a background on your links once a visitor hovers on it you can place this code on the a:hover bracket.
- background-color:#color - if you do not want an image but a color put this code instead
- border:1px solid #000000 - if you want a strong border around your links when you hover on them you can place this on your a:hover bracket, if you do not want strong, you can place dashed, or dotted and you can change the border size too if you do not want 1px you can choose any number just be sure it looks good!
- font-family: - if you want your links to have a different font
Just try playing around with your codes to discover more!
Fonts
Sure you can use basic html for fonts but the beauty of using css is that you place a fixed font attribute for the whole page so you wouldn't have to write <font color=#000000> all the time! Plus you are able to do more with fonts with css.
Place this code inside your <style type="css/text"> tag:
- body - this simply mean that all attributes inside its brackets shall be applied to the whole body of the html document.
- color - the color you want your font to be
- font-size - the size of your font
- font-family - you can place the fonts you want for your webpage. We must note that if you place a font-family that a user does not have in his computer, that user will not be able to view your webpage with the same font you use...so it is adviced that you put not just one font-family but atleast two. You can separate the font- families with a comma.
- line-height - this will determine the closeness of lines in your page. The smaller the number the nearer your lines are gonna be.
- letter-spacing - this is the space between your letters.
- text-align - if you want all your text to be placed on the right side of your page put "right", if you want on the left put "left", and if you want centered put "center", or if you want it to be justified you can put "justify" so the page will look better!
posted by Del @ 6:38 AM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home