In CSS what is "a", "a:hover", "a ins" ?

[bo0ga]

I'm working with an alreayd made website to try to teach myself HTML and CSS. For every image or button on the website, there is a different section of the CSS code that corresponds to it. For example, if the name was "button," at different points in the CSS file it would say

button

button a

button a ins

button a:hover

button,

What do all these mean? Is this normal coding? Why can't all the attributes of the button be in one section?

[varoluscu_prens]

http://www.w3schools.com/cssref/css_selectors.asp
I suggest to learn CSS from w3schools.

[|-|x]

It is because of the layout of the page - these styles apply to several different nested elements or tags in the html, not just the button. Depending on the actual styles implemented they will have quite different effects if applied directly to the button, which is not necessarily what the designer wants to achieve.

Sometimes it is necessary to nest elements like this to allow for full cross browser compatibility, especially when catering for older browsers. Sometimes it is necessary simply to achieve the desired layouts or visual effects.

button

These styles will apply directly to the button itself

button a

These styles apply to an anchor tag inside the button tag.

<button><a></a></button>

button a ins

these styles apply to text marked as inserted inside the anchor tag.

<button><a><ins></ins></a></button>

button a:hover

These styles apply to the anchor tag again, but only when it is in hover state - ie: the user has the mouse over the link.

[bo0ga]

thanks!