Feel free to copy and paste the following ready made CSS scripts to your website. The codes are free to use, no link back required. We've included our favorites that we use ourselves across Hypergurl.
If you would like to learn how to write your own cascading stylesheets, take our comprehensive CSS tutorial. Learn how to code CSS to overlap text and images, position elements relatively or absolutely and much more. Webdesigning has never been so easy with the power of CSS.
You can change the color of your text, be it a full paragraph or just one word by applying the code below to any valid HTML tag. The code is applied inline to your text where you want the text mouseover color applied.
Have you ever made a nice background graphic and not wanted it to tile into many pictures all over your webpage? You can change your background attributes so that it tiles in one row vertically or horizontally across your page.
You can see a working example of this script at
Here is the exact script I used with a simple little 100 x 40 graphic, to help give you the idea on how to impliment it:
Yes, we undertand this can be done by several other methods. However it's much more fun using CSS scripts to change linked text color on mouseover. Add this code within your <head> tags or external CSS file. To keep the underline on your links, replace "none" with "underline" Change "YourColor" with the hexidecimal number of color required.
If you would like to learn how to write your own cascading stylesheets, take our comprehensive CSS tutorial. Learn how to code CSS to overlap text and images, position elements relatively or absolutely and much more. Webdesigning has never been so easy with the power of CSS.
<p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'red';" align="justify">
Your text here to change text on mouseover</p>
You can change the color of your text, be it a full paragraph or just one word by applying the code below to any valid HTML tag. The code is applied inline to your text where you want the text mouseover color applied.
Run your mouse over this sentence to see an example. Awesome!
<p onMouseOut="this.style.color = 'black';" onMouseOver="this.style.color = 'red';" align="justify">
Your text here to change text on mouseover</p>
Your text here to change text on mouseover</p>
No underline on links
You'll notice across our website, when you hover over a link there is no underline displayed. Shown below is the CSS script we implimented. Add this code to your page, within the <head></head>tags or within your external CSS file.<style type="text/css">
<!-- A:link {text-decoration:none} A:visited {text-decoration:none} -->
</style>
Background Styles
Have you ever made a nice background graphic and not wanted it to tile into many pictures all over your webpage? You can change your background attributes so that it tiles in one row vertically or horizontally across your page.
<style type="text/css">
<!-- body {background-image: url(yourfilename.gif); background-repeat: your attribute } -->
</style>
<!-- body {background-image: url(yourfilename.gif); background-repeat: your attribute } -->
</style>
You can see a working example of this script at
Here is the exact script I used with a simple little 100 x 40 graphic, to help give you the idea on how to impliment it:
<style type="text/css">
<!-- body {background-image: url(balletgirl.gif); background-repeat: repeat-y} --></style>
Script for changing linked text color on mouseover
Yes, we undertand this can be done by several other methods. However it's much more fun using CSS scripts to change linked text color on mouseover. Add this code within your <head> tags or external CSS file. To keep the underline on your links, replace "none" with "underline" Change "YourColor" with the hexidecimal number of color required.<style type="text/css">
<!-- A:link { text-decoration: none; color:#YourColor } A:visited { text-decoration: none; color:#YourColor } A:hover { text-decoration: none; color:#YourColor } -->
</style>
Color scrollbar script
It's uncertain how many browsers are still supporting color scrollbars. I understand IE only supported it for one version, then dropped it with the next. However we will keep the code here for those who wish to learn from it. Add the following script within your head tag and change the color attributes to suit.
<style type="text/css">
body { scrollbar-arrow-color: ffffff; scrollbar-base-color:ffffff; scrollbar-dark-shadow-color: ffffff; scrollbar-track-color: ffffff; scrollbar-face-color: ffffff; scrollbar-shadow-color: ffffff; scrollbar-highlight-color: ffffff; scrollbar-3d-light-color: ffffff; }
</style>
0 comments:
Post a Comment