Learn

Color can also be used as a contextual indicator of intent or meaning. One simple way to convey additional information to the user using color is in the form of links. Many times, links will be present on web pages that will bring users to other sources of information. To let users know they have visited a link from your page previously, the :visited selector can be used. This selector will apply styling to links that the user has already clicked. The most common style applied via this selector is a color change.

a:visited { color: purple; }

Navigation is another contextual use for color. When elements are focused, they will often have styling applied to denote where the focus is being applied. This is critical for navigation, especially with modalities other than the mouse, such as the keyboard. Without the :focus selector providing additional styling, often using color or shadowing to show focus, users would not know where they were on the page when navigating using means other than a mouse.

input:focus { border-color: blue; }

An additional common use case for contextual use of color is in the indication of success and error states. This can most often be seen in form validation, where accepted field values will turn an input green and rejected fields will be colored red.

validation colors

Instructions

1.

Set the visited color of all <a> elements to purple.

2.

Set the focused border-color of all input[type=text] elements to blue.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?