Page has been tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. WORKING qTOWARDS COMPLIANCE!!BoxesInBoxes.htm
However!....
I also have a more polished page about using CSS, but that was written when I knew less about CSS! They both have their merits.
Try that one, is this isn't to your taste. There is some overlap. But reading something "twice" can be great for catching places where you've mis-understood something you think you "understand".
I hope you come to this with a smattering of HTML knowledge? (Don't stop reading, if you do... this moves on from the basics very quickly. The first bit is to get you thinking about "where this is coming from.)
Web-pages are made up of "stuff", and the "stuff" is "wrapped" in tags, right? A very simple bit of a page might look like...
See Spot run!
Run Spot run!
The HTML behind that, leaving out the bit to make it blue, indent it, and set the font family would be...
<p>See Spot run!</p> <p>Run Spot run!</p>
With a few very basic "scaffolding" tags (things like the "<p>...</p>"), you could make a whole page. A dull page, to look at. But which is more important to an intelligent reader: content or gloss? And for whom are you writing? But doesn't the intelligent reader deserve some consideration from the authors he flatters with his time?
Let's make the page a little fancier...
See Spot run!
Run Spot run!
Sit Spot sin!
Sit! Sit! Sit!
(Forgive the obsession with Spot. It was my first experience of "reading" at school, and it has left me scarred for life.)
The code for that is...
<h3>Chapter One</h3> <p>See Spot run!</p> <p>Run Spot run!</p> <h3>Chapter Two</h3> <p>Sit Spot sit!</p> <p>Sit! Sit! Sit!</p>
Even the simple code above is enough to start you "seeing" pages in the way that will open vast plains of opportunity for your onward travels towards HTML/CSS mastery.
Forget the content. Forget the "Chapter xx", the "Spot Spot Spot".
In the most recent form of our page, we have six visible "things"... two Hx elements, two P elements. (Headings and Paragraphs.)
At the moment, all we are using is "stuff" that is very dull. The first element (<h3>Chapter One</h3>) is the first thing on the page.
The next element is put, with a bit of vertical space between them, next on the page, then the next, the next, etc.
If I hadn't done a bit of "magic" (styling) behind your back, the text inside the tags (<h3>...</h3> and <p>...</p>) would have been pushed up against the left margin, and in the default font family and color for this page.
Let me say the heart of that again...
In a simple page, "stuff" just trails down the page...
1st thing 2nd thing 3rd thing...
This page, among other things, is going to show you how to go beyond that.
... The bits in this color is very much A WORK IN PROGRESS!... but some more nearly-ready stuff follows below...
See Spot run!
Run Spot run!
... and make fancier...
See Spot run!
Run Spot run!
The HTML behind that, leaving out the bit to make it that blue color, would be...
<p>See <b>Spot</b> run!</p> <p>Run <i>Spot</i> run!</p>
See how the words you see are, in the HTML "wrapped up"? [[defne element/ whole page made of elements / Explain element NESTING / define tag]]
I like things "simple".
I still (29 May 20) write my webpages using a text editor.
But I am persuaded that, today, some CSS should be used, even for a "simple" web-page. So much is possible, at so little "cost"!
CSS allows an author to establish and use consistent presentation of his/her material. Learn a little, and you will be able to be consistent by default, but not so tightly constrained by "the system" that you can't create the pages you wish to. (If I were more pedantic, I would say "CSS allow the author, as "CSS" stans for "Cascading Style Sheets".)
When you really understand CSS just a little bit, you begin to see how very clever the system is. And how it gives you flexiblilty within a framework of consistency. I spent a long time stumbling around in the dark, confused (but alrady "doing things" with CSS) before I "went to the books", studied the general principles of CSS, and then enlightenment came. (I am self-taught... I'd been teaching computing including equivalent of US 1st year of university for 7 years when the WWW was invented.)
Cast your mind back to to...
See Spot run!
Run Spot run!
Where did the green come from?? (I'm still hiding the indent from you! (And I did the blue earlier differently!))
Some very crude HTML/CSS to produce that would be...
<p style="color:green;">See <b>Spot</b> run!</p> <p style="color:green;">Run <i>Spot</i> run!</p>
The heart of that is, of course, the color:green; bit.
How it was "injected" is a separate issue.
"Stuff" like the color:green; is always in the form of a word, a colon, one or more values, and a semicolon. Always. The way you "inject" it varies from context to context, but the "stuff" is always in that format.
... The bits in this color is very much A WORK IN PROGRESS!... but some more nearly-ready stuff follows below...
Here's a simple example: Let's say that, ordinarily, you want the text on your pages to be in what windows users thing of as...
Times New Roman
Now... I could have created that with a graphic, but in fact I didn't. It is ALMOST just another paragraph... some text between a "p" tags. (A "p"-start and a "p"-end".)
With just a little CSS applied in the simplest, crudest way possible.
Instead of just...
<p>
.. to start the "p" block, I used...
<p style="font-family: Times New Roman, Times, serif; font-size:1.8em;>"
Let me take you through that... qzDO IT!!
WORK NEEDED HERE
These matters already quite well covered in previously mentioned more polished page about using CSS. See that ALL that is in the current page is present there. Consider splitting out to own page.
Tricks for easy specification of a variety of choices to spec properties of things that exist in top, right, bottom and left variants. Things like padding can be spec'd with 1,2,3 or 4 numbers... 1 sets all. Duh. 2 sets top&bottom, left&right 3 sets top, left&right, bottom 4 sets top, right, bottom, left. (clockwise from top) You can also use, e.g., padding-top (-right,-bottom, or -left). You must use a unit, but px or % acceptable. (Special case: 0 with no unit is accepted... Is okay thus. Think about it. But best avoided, as if you see "0", you'll think "10", say, okay too.)
ODDS AND ENDS, to be slotted in somewhere... https://www.w3schools.com/css/css_boxmodel.asp for help with (from outer to inner): margin,border,padding,content ========== Refinements to img tag... First set default border-style for all imgs... Style must set to SOMETHING, or no other border attribute will be applied. A width setting is irrelevant while style is "none", but setting WIDTH here saves doing it (on pages that use this file) which override the default STYLE. The min-width of the img tag GENERALLY must be kept small for Google and validator buttons, until way to override inside of "injected" htlp, e.g. hhtop, hhbottom, found.*/ === BE CLEAR at all levels... (I *THINK* (28 May 2020, 19:34)) There is a DIFFERENCE between re-styling an existing tag, and in creating a new class. Let's say you restyle the "p" tag, and create the MyExampleClass. Once you've done those things...
xxxDOESN'T [>]STYLE, even in "preformatted"!
<style=
p.MyExampleClass {
font-family: Times New Roman, Times, serif;
font-size:1.8em;
color:#1a75ff;
}>
</style>
<p> this </p> <p>this</p> <p class="MyExampleClass"> this... </p> <p class="MyExampleClass> this </p>
BECOME AVAIL... ** CHECK THIS FURTHER!!, post 28 May 2020, 19:34
===
Discuss external/ interna/ in-line. And go into syntax for each. And the classes and "refinements" issue.
--
Talk abut...
GREAT DEAL of time (28 May 20) spent tracking down something SILLY- TRIVIAL- STUPID... but completely fatal to sg-19216B.css. I had <style>... </style> around some CSS inside a .css document.
--
Also try to explain where the dots do... and to not.. go in the part of sg-19216B.css concerning tbtbl.
--
And the wisdom of a practice by novices of staying away from global changes to tags
=======
/*(Make this a note in some "general guide to CSS":) The following shows how you might redefine the definition of the element JUST just for the classes given...*/
/* img.tkbR,.tkbL {border-style:solid;
border-color:red;} */
/*Note use of dots... I had this wrong in Po_s_nImages-WpFlag.css (NOT -B) until 26 May 20, I thought...
img tkbL, tkbR {...
... would do what this does.*/
========
/*=========== gotoTbTbl
==== ".tbtbl", ".tbtbl" added to sg_-19216B.css 28 May 20, having first appeared as internal CSS in FDB7-FamTree, 27 Jun 2020, and later been used in s0_MySqlFrmBase.htm*/
.tbtbl pre {color:#009933;
font-weight:bold;font-family:"courier new",monospace;}
.tbtbl span.bdy{color:#59b300;
font-weight:bold; font-family:"courier new",monospace;}
.tbtbl span.bdy2{color:#59b3F0;
font-weight:bold; font-family:"courier new",monospace;}
/* NOTA BENE the detials of the notation being used above ^ ^ ...
The dot in front of .tbtbl says "this defines (or further defines) a new class".
(When, in a .css file, you are altering the properties of an existing tag, you start the line with the tag, dot-less. (See how pre redefined, earlier in this file.))
Within that line, we are saying, "and when you are in an element of that class, the already-known tag "pre" is redefined as follows..."*/
========
Page has been tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. WORKING qTOWARDS COMPLIANCE!!
AND WORKING qTOWARDS COMPLIANCE!!...
