An Intro to CSS

CSS is a partner filetype to HTML, filling in the gaps that HTML is deficient in. It is used in modern web design to aid with simplifying the layout of a webpage, while leaving the actual content unchanged.

Tags for Design

As a markup language, HTML was designed so that the text content could be easily identified outside of the design elements. As time went on, the HTML specification became more complicated, and websites grew exponentially in size and number.

If you had a large website and decided you needed to refresh the design, it could become a very large job that would take a long time to complete. Every individual page would need to be updated, and depending on how big the changes were, it might even involve editing every line of visible text.

CSS, or Cascading Style Sheets, can help with this scenario. The text will remain the same, but the formatting and styling elements of the pages are defined within the CSS file(s). This means if you want to change the font for the entire site, you just edit the CSS file and it’s done. Want to change the background of a header block? Edit the CSS, and that’s it — every page is now updated.

Styles could previously be defined within HTML files themselves, but this practice tied the style definition to the individual file and produced some exceptionally long and difficult to edit files. Separating the style definitions to a CSS file allows the HTML to be smaller and easier for human editors to understand.

This can also reduce bandwidth and increase the speed at which a page loads; once a CSS file is loaded into the browser cache, it doesn’t have to be updated to load the next page.

CSS files can also be chosen in software for the particular device. Different files can be created for desktop computers, laptops, tablets, phones, and screen readers. The main files, with the actual content in them, remain the same — but the presentation can be markedly different.

Why are they cascading?

Based on a pre-determined priority scheme, the style sheets are applied in a particular order. If one element of the page matches more than one CSS definition, the priority scheme establishes which one should be used.

A history of updates

The HTML specification was in place by 1991, and it was only 3 years later that the first proposed specification for CSS arrived. In that time, many dubious methods had been developed for handling styles across pages and platforms, none of which were consistent or compatible.

It took until 1996 for the first full specification to be finalized. At this time, browsers offered limited or broken support for it — Internet Explorer 3 featured limited support for some features. By the time Internet Explorer arrived, it supported 99% of all the features of CSS…on the Apple Mac. The Windows version had tremendous issues with the use of the CSS box model, which made layout rendering often work incorrectly. Internet Explorer 6 tried to patch the issue with a “quirks mode” that replicated IE5, and a “standard mode” that was meant to work as intended.

This in part led to the development of CSS 2 and 2.1, which attempted to address some of these quirks, as it become obvious that other browsers had similar, but different, quirks.

CSS 3 is not a replacement for CSS 2, but an extension of it. Indeed, CSS 2.2 is still in development — the 2 series was last updated in 2015, but work is still ongoing. CSS 3 extends and improves features, and is backwards compatible with CSS 2, but instead of being a full definition for everything, it is split into modules, grouping types of element together.

CSS 4 is the next revision, still compatible with CSS 2.1. Most modules from CSS 3 remain as they are, but are in the process of being updated to level 4.

How does CSS differ from HTML styling?

Apart from the already-mentioned separating, there are several ways in which plain HTML could be formatted. Styles could be defined in the HEAD section of the HTML file, using the same syntax as CSS files. Alternatively, styles could be defined within the code itself — for example:

This is red text

The “color” statement is an attribute of the “font” tag. However, an alternative method allowed the use of CSS directly inline:

This is red text too

Of course, this became tremendously hard to maintain, and would rapidly increase the file size and complexity if the color attribute were specified on each line.

The CSS file syntax would look like this:

body {\                color:red;\ }

Which means that all text within the body section of the HTML document would default to color:red. This could be conditionally overwritten, and is certainly much easier and more concise than having to tag each individual statement with any method to define the color.

Following Standards

As with all things code-related, there are syntax rules and best practices to follow. CSS is no different.

With the need to work on a multitude of different screen sizes and platforms, it can be hard to get your CSS files just as they should be. Because of this, several standard templates have emerged, including Bootstrap and Foundation.

Usable as they, it just takes a few small edits to customize them for your own site, with the majority of the coding already taken care of and fully tested. It makes it much quicker and easier to develop a new site if the layout and basic design is taken care of by a standards-compliant library of pre-written software.

Reply