HTML element and their states

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.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s