Why is CSS important?

by Andy Prevost

Monday August 21 2023

Displaying website pages involves structuring them with HTML (Hyper Text Markup Language). You can use a web page editor that is quite like a word processor. The underlying code structure to display the page on the internet is HTML.

Over the years the rendering of HTML pages by browsers has become a bit on the loose side. For example, if you create a paragraph, it would start with a <p> tag and end with a </p> tag. With a lot of hand coding, it became acceptable to just put the opening <p> tag and miss the closing tag.

XHTML is Extensible Hyper Text Markup Language. It extends HTML and is quite strict. All tags have to be paired properly.

The first iteration of CSS (Cascading Style Sheet) came along in 1996. It offered the possibility of changing the way styles were defined inline with each tag into a class based system. As an example, an inline style might have "font-weight: bold;" in several areas. Some might have it exactly that way, or with a numeric representation ("font-weight: 700;") ... but changing those in a large website might involve hundreds or thousands of individual changes.

With CSS, you can define a class as .text-bold { font-weight:bold; } and the tag change to <p class="text-bold">Some text</p> ... and have that in several thousand lines of your HTML. To change the entire website means changing just one line of CSS. That could look like .text-bold { font-weight:900; } and it would change every line where the CSS is defined as class="text-bold" ... and by the way, font-weight:bold is approximately a value of 700. Extra bold would mean approximately 900.

CSS is now quite powerful and can affect not just the basics, but can affect the entire layout and positioning of entire columns and sections.

One of the challenges for website developers is rendering a website with a common look across all of the different browsers. The problem is that each browser interprets CSS in slightly different ways. By the way, I am not sure "interprets" is the correct wording. Each browser has its own set of default CSS values. Those brand specific CSS values can, and often do, render differently than another brand. It's usually not severe, but enough to get web designers (and their clients) in a tizzy with developers tasked with correcting the differences. That can lead down a rabbit-hole.

There are two different strategies to deal with this. Both are dated from the early 2000's. Reset is a strategy that resets CSS to a common ground of zeros. All spacing is set to zero (margins and padding), widths are set to zero, sizes are set to zero. Both ordered and unordered lists are set to zero spacing and no list styles. Normalize is a strategy that looks at the differences between the different browser CSS implementations and sets those differences back to a common shared specification – that specification is usually based on the W3C CSS standard. I personally prefer the Normalize strategy. I have used CSS frameworks that rely on the reset strategy and absolutely hate them. You have to recreate the CSS standards for everything. With a normalize strategy, you can create HTML documents with basic tags and still have a page render in browsers. With reset, it's all running paragraph style text.

Here's some reference links:
Normalize.css by Nicolas Gallagher. The last update to the code was November 4 2018 and corrected an Internet Explorer element. Many developers think of it as slightly outdated and missing some newer HTML elements.

Sanitize.css by CSS Tools. Sanitize.css purportedly builds on Normalize.css with more modern enhancements. It is a direct replacement for Normalize.css, plus includes some additional modules for typography, forms, and other UI elements.

I won't include any links to the reset strategies. I think resets should be used as part of an overall CSS foundation or framework, not stand along on a per-website basis. If you are undertaking that type of effort, reset strategies are already part of your research ...

 

 

 

◀ Previous Next ▶

Post a Comment