In this short video, I will explain the purpose and function of cascading style sheets, more commonly known as CSS. CSS allows you to change the style properties of HTML features by overriding the built in style sheet. Its name comes from the cascading style hierarchy. This example demonstrates the importance of each style applied to a web page. The user has complete control over the web page’s style, followed by the style that’s applied directly to a tag. The next in line is style within a documents <head> tag, and the last in line is the style brought in by external documents. Also, if a style is declared for a specific element more than once, the last declaration will apply, overriding all others. One example of how much control the user has over the style is the Google website homepage. It mostly resembles this screenshot with a colorful logo. Viewing the website in a text-only browser looks like the bottom picture. This demonstrates how much control the users have over the display of a web page and its content. page and its content. Style sheets allow for customization, not only for looks, but usability as well. This WebAIM homepage has the styles turned off. When you apply a style that is customized for someone with low vision, the page may look like the bottom picture here. Hidden CSS is also very prevalent in HTML designs. After removing the styles from web pages, extra text appears, as it does in this top example. This extra text is meant for use with a screen reader. It is much easier for a person who uses a screen reader to know how the page is oriented, as well as navigate the page When the style is activated again, the extra text appears, as it does in the bottom screenshot. When implementing CSS, one thing to be mindful of is the ability to change the linearized reading order of the content on your page. While this can provide many accessibility solutions, it can also cause problems. The problems arise by using absolute positioning, which is designated in CSS by position:absolute. Since absolute positioning gives you complete control over how the information is laid out on the web page, it is easy to get the reading order of information mixed-up when re-arranging the page. This picture shows the order a screen reader will read the rectangles. Now look at the code. Notice how the liner order matches the order of rectangles. One way to combat this confusion is to read the code in order. If it is in the correct order in the code, the screen reader will read it in the correct order. Although its possible to put information in any order, screen reader users are accustomed to hearing the main menu at or near the top, followed by the main content. Changing this order may be called for in some cases but can confuse screen reader users, so caution is advised. Something else to take caution against is artistic design. CSS allows users to be very creative with their web pages and web page backgrounds. As you can see in this bottom screenshot the background does not provide enough contrast to sufficiently read the overlying text. Also be weary of CSS mimicking semantic markup. CSS can make text look likeheadings like in this example, when in fact they’re not. Hope this video helps. Thanks for watching!