CSS (Cascading Style Sheets) is a coding scheme designed to specify how HTML should be styled and displayed and is the only supported way of styling text since HTML 4. Until the late 90s, HTML code was all styled inline using competing sets of standards - meaning that if you wanted to change a font to be larger, you would use the <font> tag in order to style the text in the browser and different browsers rendered different subsets of these tags (meaning webpages would look markedly different in different browsers). It was a really simple and elegant approach to styling, but had three main problems:

1. Scalability: Styling everything inline was fine on a website that had four or five pages (which until the late 90s was a majority of webpages). As the Internet became more accessible, sites grew - sometimes to thousands of pages of HTML code. Changing all of your headers from green to blue was annoying on ten pages, but if you had 5,000, you would have to find each header on each of the 5,000 pages and change them manually. CSS avoids this problem by centralizing all styling into a file that is applied across pages. If you want to change the color of a header, you can do it in one place.
2. Ease of Use: The problem with styling everything manually is that it’s…well…manual. That means that every time you, as a developer, want to implement some design you have to do it from scratch every time. At best, that means you would have to find the design, copy and paste the code, and update. But at worst, you would have to recreate elements multiple times. Compounded with multiple developers (each with their own opinions), this created many opportunities for inconsistencies and for things to look different on different pages.
3. Semantic Markup: As discussed earlier, HTML is designed to be a semantic language, meaning that tags are designed to define what an element is not how it should look. Decoupling the appearance of the content from the content itself opens up a world of possibilities for how web content can be consumed. If content is styled semantically, assistive devices can interpret it in context for people with disabilities. Additionally, tools like Safari’s Reader Mode, search engines, social media sites, etc. can extract, identify, and understand the content on a page while having the ability to present and consume it in different ways.

As mobile devices became more prevalent, a fourth need emerged - the need for devices that look different on phone-shaped screens. The traditional website layout of a header navigation, sidebar, and footer won’t work on a phone, where horizontal screen real estate is at a premium. Early approaches to this problem used separate versions of the website for mobile devices and for desktops. That worked fine until phone screens got larger and until phones could be turned landscape and display the same webpage. A new approach was needed, and CSS was able to deliver it. CSS introduced a structure that became known as responsive design. Responsive design is a design methodology where the same website is rendered differently based on a number of factors such as screen size and orientation such media (print vs screen). You can see responsive design in action on many webpages. For example, visit the NC State Website on your computer. With the website pulled up, resize the window to different widths. Notice as you do that content may change size, or content in multiple columns may move to be in single columns. Eventually, notice the navigation and menu bars disappear. This is all accomplished through responsive design in CSS. We will explore how to do this next week.

Cascading style sheets solve these problems in several different ways:

1. While CSS can be applied at the element level or at the page level, CSS code can be moved out into a separate file. This file can be used to add specific styling across multiple pages and can even be reused across multiple websites and shared across the web (for example, NC State offers a base stylesheet for on-campus developers to include in their site which is one of the reasons NC State websites generally look the same).
2. CSS can be used to style entire pages or specific elements on a single page.
3. CSS includes “media queries” which allow for responsive design.
4. While the list of web-safe fonts is relatively small, CSS allows for the inclusion of additional fonts.
5. While not covered in the course, CSS preprocessors like sass enable the development of complex CSS layouts.