Cascading Style Sheets, or CSS for short, is a complementary language to HTML that enables the separation of the content and structure of an HTML page from the visual representation of the page.
CSS could not stand on its own without HTML, and it enables HTML to focus on defining the content of the page by removing the style definition from the page itself and shifting that responsibility to external files called style sheets.
Browsers read CSS style sheets and apply the appropriate formatting to HTML documents based on rules in the style sheet.
CSS is a big part of Lightning Component development, which is why I want to take some to talk about it. It is important to know how this works so that you can create components that not only perform valuable functions, but also look great and provide an intuitive user experience.
Why Do We Need CSS?
CSS solves a large development challenge that surfaced with early specifications of HTML. Styling attributes were introduced to HTML tags in HTML 3.2, essentially mixing the content structure with its styling by relying on hardcoded attribute and value pairings to define styles for each HTML tag.
With thousands of HTML tags spread across dozens or hundreds of HTML pages, this quickly became a nightmare for web developers to maintain. CSS was created to save web developers a great deal of work.
Style sheets can be read by many different HTML pages, and changes made to an external style sheet can change the look and feel of a page or an entire website as soon as they are applied.
This means that not only can we separate the content of the page from its styling, we can separate the HTML development process from the design process, allowing web developers to focus on the function of a website while web designers focus on the form of it.