Designing html using css is nice and organized way to work. After working since last 5 years with web technologies i have learnt a lot many things for web development. The tools available today and the techniques used to develop applications. Among all i find HTML is interesting technology and very easy. In fact non-progarmmer can also learn it quickly and use it.
In this post i am talking about different state of HTML element. So when ever you design HTML page you have visibilty of it. Most of the HTML element have below states.
- Normal State: Default state,
All of the element have this state and it is normal state in which we are desiging.
- Hover State: when mouse moves over the element
All element have this state also.
css class : :hove
- Focus State: When keyboard cursor blinks in text box
Used for input elements when they receive keyboard focus.
css class : :focus
- Active State:
Used for hyperlink and button when they clicked
css class : :active
Let see practial example of above 4 state. To understand above 4 state correctly we can take example of input type text.
1. Focus class example:
You can see that when you click on textbox and as soon as it receivs keyboard focus it’s border gets changed because we have added this behaviour in css using :focus css class.
2. hover class example
You can see when you mouse hover over the link , link change it’s background and underline is removed from link. This behaviour is achieved using :hover cssclass. You can use hover for any html element.
Note: this article is in progress.