CSS Specificity is the importance that each CSS property has within the document. It determines which property value (rule) is used to style an element within a browser. Specificity is determined by looking at the various parts of a selector. The main items it looks at are type selectors (basic html types like <p>, <div>, etc.), class selectors, and id selectors. The values of these elements combine together to create a value that determines specificity. The property with the highest specificity is used for styling that element. Selectors with id’s get a higher value, followed by classes, then type selectors. Within a CSS document, the properties may have a similar value. In those instances, the last rule set for that property is the winner.
Two other selectors can create an even higher value, though. Using an inline selector like <div style=”color: red;”> will overrule other CSS color settings for that specific div. Additionally, using the !important rule gives the highest value and will overrule other rules for that element. This rule should be used sparingly, and only when no other option is available.
Specificity is also important for some pseudo classes. The pseudo classes used to style links must be in a specific order in order for them to work properly. This order is: link, visited, hover, focus, active. The order that are listed in the CSS code is important because the last item will always win for what is displayed. For example, if the active pseudo class was placed before hover, the link would change when hovered over, but would not apply the active rule (when clicked) because the hover rule would still be taking precedent. Or if the visited class was put at the end, a visited link would always remain styled that way, even if hovered over or clicked.
Contrast ratios show what the color contrast is between the front and back of a content item. These ratios are used to determine the readability of a website.
The contrast between text on a background is very important so that the text is easy to read for all people. People who are vision impaired, or that have color blindness can have a harder time reading text when the contrast ratio isn’t high enough. The colors will often look too monochromatic, which is hard to read, or they blend in with the background colors/pattern. Color contrast can be checked by using the browser inspect tools. Simply inspect an <a> element, click on the color square and you can view the ratio and rating of the contrast. You can also check contrast by using various online color contrast analyzers.
The Web Accessibility Initiative (WAI) Working Group is responsible for researching and developing the accessibility rules for web pages. They create the guidelines to follow to ensure that web content is usable by all people. This usability includes not just the end user website, but also content management systems used to build websites and the browsers used to view a site.
CSS specificity is an important concept to learn early on in web programming. Having a thorough understanding of how a browser uses a CSS (and HTML) document to set styles will make programming and design easier all around.
Knowing how to implement accessibility options from the start will help create a web page that not only looks better, but functions better for all. Concepts like proper color contrast do not just benefit those with vision impairments. Poor contrast can be hard to read for just about anyone, and having good contrast can make a site much more pleasant to look at and read.