What is CSS and Where Is It Used?

What are Cascading Style Sheets?

Filetype icons
-Mosquito-/iStock Vectors/Getty Images

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 professional to separate the content and structure of a website's code from the visual design. This 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.

CSS didn't gain in popularity until around 2000, when web browsers began using more than the basic font and color aspects of CSS. 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 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

The terms CSS stands for Cascading Style Sheet.

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 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 specifications. A style sheet for a web page serves the same purpose, but with the added functionality of also telling the viewing engine (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.

Cascade is the special part of the term "cascading style sheet". A web style sheet is intended to cascade through a series of style sheets, 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 Web 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 - 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 styles 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.

For example, in my web browser, the default font is "Times New Roman" display at size 16. Nearly non of the pages I visit display in that font family and size,however. This is because the cascade defines the second style sheets, which are set by the designers to redefine the font size and family, override my web browser's defaults.

Any style sheets you create for a web page will have more specificity than a browser's default styles.

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.

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 Web site. Well written style sheets can be updated quickly and allow sites to change what is prioritized or valued without any changes to the underlying HTML markup.

 

The challenge of CSS is that there is so much to learn - and with browsers changing every day, what works well today may not make sense tomorrow as new styles become supported. 

Because CSS can cascade and combine and consider how browsers can interpret the directives differently, CSS can 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 11/3/16