Explaining my approach to CSS Style Sheets


There seems to be three different ways to apply CSS styling to elements in a web page.

The first is to add individual style statements to each element:

<p style="font-family:arial;font-size:12px;color:green">


The second is to place a style sheet in the Head section of the page:

<head>
  <style>
  p {font-family:arial;font-size:12px;color:green}
  </style>
</head>


But I'm going to explain the third way here. Be patient.


I embarked upon this journey following a chance encounter on YouTube, when I was researching something quite different. While clicking through various videos I stumbled upon a piece which explained TailwindCSS. Further clicking found a piece about Bootstrap.

I'm not going to delve into deep explanations of what these are, or how they work, but essentially what they do is provide a zillion individual pre-written CSS classes which you can add to your HTML code. I'll explain this in a minute.


First off - myself as a web developer: I'm not! I am by profession a software engineer, first and foremost. I have however, dabbled with web stuff for quite some time (including my own site, which you're reading right now). I was responsible, several centuries ago, for dreaming up the first intranet for the large organisation I was working for. I shudder to think what those early efforts must have looked like. But we discovered Active Server Pages as our first foray into dynamic content, with material stored in a database, and were very proud of the very large entirely web-based SQL Server backed applications we created.

Anyway, I decided to create my own site. I am not particularly imaginative when it comes to web design, but I do have a style for presenting the content I want to present. It consists of centred DIVs, usually with rounded corners and drop shadows, all that stuff. This page is an example of that. Often I'll add a border in a contrasting colour, and so on.


So we arrive at the third way. I must admit that I never imagined that a CSS class could contain more than a single element, as illustrated in my grey areas above. I learnt that it was possible to say:

<p class="verdana center border3 bg-col-brown">


Each of those style elements were stored in a separate style sheet.

It was clear that I simply didn't need all the thousands of definitions provided by Tailwind or Bootstrap; I don't use Flex, Rotate or Opacity, for example, so I set about creating my own definitions and stored them in a separate shared style sheet. Then I could say in the Head section:

<link rel="stylesheet" href="adwstyles.css">


and then, in the body of the page I could write things like:

<div class="font-arial col-brown bg-col-mint w-50 font1 p-20 bt-rad15 div-center div-shadow ">



That's all very well, and works well and very flexibly, but how do you remember all these definitions?

While I tried to make the definitions as clear and simple as possible, there was no way to remember them all, or to remember that we needed to centre the Div. So I wrote a program!

Please click through to see how my program works.