How Cascading Style Sheets Work

Friday, June 15, 2018

How Cascading Style Sheets Work

Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are the core technologies for creating web pages and applications. While HTML defines a structure for the page, the CSS gives us the ability to style the elements of the page to make them more visual. It is the language that is used to define the layout and is used to create rules as to how a web document is displayed. These rules are applied to HTML element and are made up of two parts, a set of properties and a selector. The selector stipulates the HTML element that you are applying the style to, such as all paragraphs, headers, or links. The properties use values to indicate how these selectors should be styled, such as making all paragraphs contain a line height of 1.5em with a font color of dark gray.

When a browser displays a web document, it converts the HTML and the CSS to the Document Object Model (DOM) in the computer’s memory where content is combined with its style. First, the browser parses the HTML and creates the DOM, then it loads the CSS. The CSS is parsed to attach style to the DOM nodes which can be structured in a tree-like format.

CSS can be applied in three different ways. Inline CSS can be applied directly to the element using the style attribute. This is the most difficult of the three methods to maintain or modify. For example, the developer may decide that all the links use a red font color to stand out, so every instance of a hyperlink, the following attribute and property is applied: style="#cc0000". The client decides at the last minute that they would like to use a background of dark blue to match their brand. A dark blue background with a dark red font does not visually look proper and doesn’t support the WCAG 2.0 level AA requirement of contrasting color. To remedy this, the developer will have to find each and every instance of the hyperlink element and change the font color.

The second method uses an internal style sheet. A style sheet separates the HTML from the style and places it in the header section of the webpage. Although this is easier to maintain than inline CSS because to modify the HTML elements on the page all one has to do is change properties in the top part of the page, it is not reusable from page to page. Each page has to include its own stylesheet in the header, therefore although maintenance isn’t as tedious as filtering through lines and lines of HTML code to find each instance, it still requires each page to be consistent with the selectors and properties they contain. Although it is not the best practice, it has its uses, such as if the page uses unique styling that isn’t shared with the other pages.

The third is the most ideal for maintenance and initial development. It uses an external style sheet that is contained in a separated file with the extension of .css. This file is referenced in the web page’s HTML <link> element: <link rel="stylesheet" href="style.css"> where style.css is the name of the external style sheet file. Using an external CSS file makes it easier to share it with the different pages in the website or web application, or even across different websites. Not only does it make it easier to modify a property of a selector, because you only have a single place to make the change, but it helps to enforce branding and continuity among the different websites for a single organization.

Using CSS Themes in Web Development

A theme is a set of property values that define the look of a website or web application’s pages and controls. It uses CSS to customize design elements of a site such as color, font style, and even device style. The look and feel of an entire website can be modified by simply switching out the CSS theme. Before the concept of CSS themes, as a web designer working for a client, it was always a good idea to create several different prototypes or mockups of a website design to give the client options, and sometimes narrow down their vision for the design of the site. This could be time-consuming to create two or more different HTML documents to represent each design option. CSS themes allow the designer to create one HTML document where the elements are assigned classes and identifiers, then create different CSS files that would apply the different theme options to the core HTML document.

The best method for applying themes is to first have core design elements that define some basic styling that would be shared among each of the theme options, such as the color and size of the font to be used, the height of the footer section, how a left, right or centered element would flow on the page. The base CSS could even include some default color scheme properties so that it would be used without any additional styling. The page would be written to list a link to this base CSS file first. Then, the different optional themes can be included in individual CSS files that represent a collection of style elements that customize the site with a color scheme. The CSS file would include styling elements that would override the default elements. For example, if the default includes a footer <div> selector with a dark gray background, the blue.css theme could change that footer selector to dark blue to match the color scheme. By listing it after the base CSS file, the DOM is read from top to bottom and the elements in the blue CSS file will override the previous elements defined in the base CSS file.