What is CSS and Where Is It Used?

What are Cascading Style Sheets?

Filetype icons
-Mosquito-/iStock Vectors/Getty Images

Websites are comprised of a number of individual pieces, including images, text, and various documents. These documents not only include ones that may be linked to from various pages, like PDF files, but also the documents that are used to construct the pages themselves, like HTML documents to determine the structure of a page and CSS (Cascading Style Sheet) documents to dictate the look of a page.

This article will delve into CSS, covering what it is and where it is used on websites today.

A CSS History Lesson

CSS was first developed in 1997 as a way for web developers to define the visual appearance of the web pages that they were creating. It was intended to allow web professionals to separate the content and structure of a website's code from the visual design, something that had not been possible prior to this time.

The separation of structure and style allows HTML to perform more of the function that it was originally based on - the markup of content, without having to worry about the design and layout of the page itself, something commonly known as the "look and feel" of the page.

CSS didn't gain in popularity until around 2000, when web browsers began using more than the basic font and color aspects of this markup language. Today, all modern browsers support all of CSS Level 1, most of CSS Level 2, and even most aspects of CSS Level 3.

As CSS continues to evolve and new styles are introduced, web browsers have begun to implement modules that bring new CSS support into those browsers and give web designers powerful new styling tools to work with.

In (many) years past, there were select web designers that refused to use CSS for the design and development of web sites, but that practice is all but gone from the industry today.

CSS is now a widely used standard in web design and you would be hard pressed to find anyone working in the industry today who did not have at least a basic understanding of this language.

CSS is an Abbreviation

As mentioned already, the term CSS stands for "Cascading Style Sheet."  Let's break this phrase down a bit to more fully explain what these documents do.

The word "style sheet" refers to the document itself (like HTML, CSS files are really just text documents that can be edited with variety of programs). Style sheets have been used for document design for many years. They are the technical specifications for a layout, whether print or online. Print designers have long used style sheets to insure that their designs are printed exactly to their specifications. A style sheet for a web page serves the same purpose, but with the added functionality of also telling the web browser how to render the document being viewed. Today, CSS style sheets can also use media queries to change the way a page looks for different devices and screen sizes. This is incredibly important since it allows a single HTML document to be rendered differently according to the screen being used to access it.

Cascade is the really special part of the term "cascading style sheet". A web style sheet is intended to cascade through a series of styles in that sheet, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in website style sheets.

Every web page is affected by at least one style sheet, even if the web designer doesn't apply any styles. This style sheet is the user agent style sheet - also known as the default styles that the web browser will use to display a page if no other instructions are provided. For example, by default hyperlinks are styled in blue and they are underlined. Those styles comes from a web browser's default style sheet. If the web designer provides other instructions, however, the browser will need to know which instructions have precedence.

All browsers have their own default styles, but many of those defaults (like the blue underlined text links) are shared across all or most major browsers and versions.

For another example of a browser default, in my web browser, the default font is "Times New Roman" displayed at size 16. Nearly none of the pages I visit display in that font family and size,however. This is because the cascade defines that the second style sheets, which are set by the designers themselves, to redefine the font size and family, overriding my web browser's defaults. Any style sheets you create for a web page will have more specificity than a browser's default styles, so those defaults will only apply if your style sheet does not override them.  If you want links to be blue and underlined, you do not need to do anything since that is the default, but if your site's CSS file says that links should be green, that color will override the default blue.  The underline will remain in this example, since you did not specify otherwise.

Where is CSS Used?

CSS can also used to define how web pages should look when viewed in other media than a web browser. For example, you can create a print style sheet that will define how the web page should print out. Because web page items like navigation buttons or web forms will have no purpose on the printed page, a Print Style Sheet can be used to "turn off" those areas when a page is printed. While not really a common practice on many sites, the option to create print style sheets is powerful and attractive (in my experience - most web professionals do not do this simply because a site's scope of budget does not call for this additional work to be done).

Why is CSS Important?

CSS is one of the most powerful tools a web designer can learn because with it you can affect the entire visual appearance of a website. Well written style sheets can be updated quickly and allow sites to change what is prioritized visually on the screen, which in turn shows value and focus to visitors, without any changes needing to be made to the underlying HTML markup. 

The main challenge of CSS is that there is quite a bit to learn - and with browsers changing every day, what works well today may not make sense tomorrow as new styles become supported and others are dropped or fall out of favor for one reason or another.

Because CSS can cascade and combine, and considering how different browsers can interpret and implement the directives differently, CSS can be more difficult than plain HTML to master. CSS also changes in browsers in a way that HTML really does not. Once you start using CSS, however, you'll see that harnessing the power of style sheets will give you unbelievable flexibility in how you layout web pages and define their look and feel. Along the way, you will amass a "bag of tricks" of styles and approaches that have worked for you in the past and which you can turn to again as you build new webpages in the future.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/5/17,

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "What is CSS and Where Is It Used?" ThoughtCo, Jul. 5, 2017, thoughtco.com/what-is-css-3466390. Kyrnin, Jennifer. (2017, July 5). What is CSS and Where Is It Used? Retrieved from https://www.thoughtco.com/what-is-css-3466390 Kyrnin, Jennifer. "What is CSS and Where Is It Used?" ThoughtCo. https://www.thoughtco.com/what-is-css-3466390 (accessed November 18, 2017).