Wednesday, August 17, 2011

Change link properties using CSS-basic !


CSS stands for Cascading Style Sheets. There's has been css3 too. One of the key features of css is that it changes the properties of our HTML sheet and helps in this way to make great designs. Here we gonna discuss how to change the color of your link.

First Steps:-
1.) Open notepad or any other text-editor of your choice. [..ps..I use notepad..]
2.) Start writing a new HTML document :
< html >
< head >
< /head >
< body >
your link here
< /body >
< /html >
without the spaces
This gonna be the main opening and closing tags, you gonna require.



3.)Starting
<style type="text/css">
without space(applies to all codes in this post)

This basically tells the browser (some other specific word, perhaps ?) that a style-sheet gonna follow now.
To change the properties of< a > tag :-


Remove under-line from the link
a:link{ text-decoration:none;}
a:hover{text-decoration:none;}
Variations:-
The above code only removes the under-line from the links. [Hover ?] Hover means when the mouse "hovers" upon the link.
We can also have:-
i. 
...copy a:link [above]
a:hover{text-decoration:underline;}
Paste this code and run this.


ii.
a:link{text-decoration:underline;}
a:hover{text-decoration:none;}
Again, paste this and run.


Changing color.
i.
a:link{text-decoration:none; color:blue;}
a:hover{text-decoration;color:orange;}
Run this bit of code.


Background color of links.
i.
a:link{text-decoration:none;}
a:hover{text-decoration:none; background:blue;}


ii.
a:link{text-decoration:none; background:orange;}


Run any of the code.
Close your style-sheet with .



< html >
< head >
< style type="text/css">
//css code here
< /style>
< /head >
< body >
< a href = "YOUR-LINK-HERE">Somanshu< /a>
< /body >
< /html >


For any help, leave a comment below.
author

This post is written by:Somanshu Srivastava

Hello, I am Somanshu Srivastava, the creator and the founder of this blog. I have e been blogging since 2007. I reside in India. Currently surviving high school, I like blogging, website designing, website developing.

@Twitter@Facebook.

No comments:

Post a Comment