Ty’s Tuesday Tech Teach - Changing Styles Based on States
In CSS, you are able to give a state colour, change in any sort of way when the user has interacted with an object. The most commonly used state is the :hover state which will be applied when a user hovers over an element with a mouse. Hover states are not active on a touch screen service like an iPad or smartphone. :active is applied when an element is being activated by a user. This is commonly referred to as a light switch, where a light switch can have an on and off position, an object like a button can have an active state when it is turned on with a click or drag. And last but not least :focus, which is when an element has the ability to focus. This could be a button which is a click to another page. It could be a form that adds a red border if you press on it or it could be any radio button. You are able to see all the :focus elements on the page if you just press ‘tab’ this will jump through all the :focus enabled elements on the page.
Additional there are two other states that I should mention, :link and :visited. :link allows you to set styles for links that have yet not been pressed by the end user. :visited on the other hand is for when the user has pressed on the link.
