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.