Hypergurl Ready made CSS scripts including: Color scrollbar script, no underline on links, background styles. There is also a CSS script for changing linked text on mouseover, and my favorite, CSS for changing text color on mouseover.



CSS is short for Cascading Style Sheets. CSS is used to add style to your web site design such as font or background colors. Many webmasters believe Cascading Style Sheets are a more efficient website tool than HTML tags because it gives you more control over your web site design by allowing you to position elements exactly how you intend.




Ready Made CSS Scripts

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.

Script for changing text color on mouseover

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>

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>


You can see a working example of this script at http://www.hypergurl.com/backattributes.html
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>





   bullet SITE SEARCH
Custom Search


bullet WEBSITE TOOLS

go to Javascript generators
go to Free javascripts
go to HTML codes
go to Color match


bullet MOST POPULAR

go to HTML Music Codes
go to Scrolling Text HTML Code
go to No Right Click
go to HTML Span Tag
go to CSS Drop Shadow
go to HTML Anchor Link





Site design copyright 2000 - 2013 Tanya Puntti Hypergurl.com