CSS- Cascading Style Sheets

Where the styling goes

file: hh4-css-where.htm

My grasp of CSS is severely limited.

But after struggling for a while, I've grasped a few things.

The way I do things may be crude. It may not be best practice. But sometimes seeing the fumblings of another newbie can be more useful than trying to see what is happening in something sophisticated.

(PS, 30 May 20: Since writing the above, I have struggled onward for many hours. At last enlightenment is coming, though I don't think I've quite done the 10,000 hours of legend yet. I've reviewed what you see below in the light of my new understanding. It is mostly pretty good! There may be things that confuse your grasp of the similaries and differences between altering the default behaviour of a tag, or of adding a class to a tag, or creating something that works almost like a new tag. My expression of the different ways you put, say, "color:red" into "stuff" could be more clear... certainly the rules are EXCELLENT... once you understand them!... but MOSTLY what is below is pretty good.

I also have another page using about CSS which began life late in May 2020 (in the Days of Covid, when I was in my house all but 30 minutes a day, and rarely going beyond my corner shop, and that "big outing" once a week), which still has rough edges, but might also help you with CSS usage.

The newer page is going to be a replacement for the page you are looking at, so there is some overlap... but reading something "twice" can be great for catching places where you've mis-understood something you think you "understand". ("PS" ends.)

Save yourself much grief

(The bit down to the next major header ("Before the main...") was added long after much of what is below. It repeats some of it. Clearly, I hope. Concisely. Read the rest for some odds and ends, some re-statement of things the following may cover too tersely for a novice.)

CSS is not "easy". Worth it, but not "easy".

There are a lot of "bits" to get right.

If you get confused by "everything", cling to one fundamental issue:

At the heart of it all, you are controlling attributes of "stuff". For instance the color of text.

Yada yada yada.

No matter how I made that paragraph that color, somewhere, I said color:#0073e6;. Exactly like that. (It's "surroundings" could be different in different places.)

That is made up of four things:

• Attribute name ("color")
• The colon (":")
• Value... what I want attribute set to ("#0073e6")
• The semi-colon (";")

There will ALWAYS be a colon. There will ALWAYS be a semi-colon.

What the attribute is, what values are acceptable will be more variable.

How you "inject" the above into the control of your page is a little more comples... but not a lot more complex.

But, at the heart of any CSS, only use things that fit the above syntax, i.e...

[AttributeName] : [Value] ;

No colon, no semi-colon?... No joy!

Nota bene: Anywhere you can put one such thing, you can put two... or three... or more, all in a string. E.g....

color:#0073e6;text-align:center;border-style:solid;

(Not all attributes are appropriate to all of the things that some control.)

("blue" (and others) are perfectly acceptable values for colors. I "had" to be complicated. Sorry. There's a great color picker at w3schools, by the way.

Shortform Where/ How....

CSS can be made to affect your page at three levels, presented here in the reverse of the order they "cascade"...

.... If you set something in-line, that will only affect the place you find it.

.... If you set something internally, that will only affect the page in where you find it... but "lower" in-line re-settings, if present, will over-ride the internally set CSS.

.... If you set something externally, that will only affect the page in where you find it, but "lower" internal re-settings, if present, will over-ride the exernally set CSS and in-line re-settings, even "lower", if present, will over-ride either "higher" settings.

A little hard to get your head around, unless you are a born geek... but enormously powerful, and adaptable, once you do "get it".

Umm. Ah....

Umm. Ah. I wish that were it. And all I've said is right as far as it goes. But I haven't got to "classes" yet, and they are important, too. They let you tweak thing internally or externally, without messing up ALL instances of, say, stuff in <p>...</p> tags. But I'm leaving that for much further down this page.

To set CSS...

In-line: The CSS goes in the tag just before the material affected, or in a <div> block surrounding it, like this...

<p style="color:blue;">Yada yada yada.</p>

... or...

<div style="color:blue;">
   <h2>Blah, blah...</h2>
   <p>Yada yada yada.</p>
</div>

Internally: You'd put the following in the page's <head>Yada yada yada.</head> block:

<style type="text/css">
  p {color:blue;}
</style>

Annoying detail: You WANT the "type="text/css"" for HTML before HTML5, but you leave it out for HTML5.

Externally: The CSS goes in an external file, extension ".css" and you put a...

link href="[file's URL]" rel="stylesheet" media="all"

... link in the <head> block of the page you want controlled by it.

All you need, to alter the appearance of everything inside any<pre>...</pre> tags would be...

p {color:blue;}

... but it would be best to learn about using classes, rather than set something up that will affect a tag globally.

Before the main essay, a summary of the results...

CSS/ Styling/ Style sheets

"CSS" stands for "Cascading Style Sheets".

"Styling" is a word you don't often see. Perhaps it ought to used more often? Style sheets are important, but the style of what is on your reader's screen can be set several ways, not all of them requiring a "sheet".

The color of text, the font family and size, etc are matters of style. Style also governs how things are arranged on the page. The color of the background. Etc! Start with color. As you learn to control that, you'll find other things to tweak to improve the usefulness of your pages.

The most obvious thing that can affect the style of what your reader sees it the external style sheet. This is the thing that is most aptly named a "style sheet" It is a file on your server. The rules in it are, as it were, incorporated by reference to them. That reference, or link, goes in the <head>... </head> block of the page to be styled.

More on style sheets, in that narrow sense, below.

Styling whole chunks of a page... or just bits of one

I learned how to, say, turn a whole paragraph green- and- bold fairly early on.

I struggled for ages with how to set just a part of a paragraph to what I wanted. (It is frustratingly easy, when you know how! Read on, or view this page's source to see how I did those things).

But the real magic is not in those procedures, per say, but in learning to apply your wishes just once, or once in a while, or across a whole page. For instance, I often write about programming, and wanted to have actual code displayed in a style which set it apart from the rest of the text in the page. If I used the simple "in line" styling to do this, and then wanted, say, to change the color used for code, it would be a pain to make that change. (I was using in line styling a moment ago.) With either embedded or external styling making such a change would be easy.

External/ Embedded/ In Line

If I want to use "#00ff00" for the color for something... it gives the green you saw a moment ago... then it can go in three places!

You can specify the color (or any other styling) with...

• external...
• embedded... or...
• in line

... styling.

The first two require things in the <head>... </head> block of your html.

-------
EXTERNAL style sheets: These, as I said, are separate files held on your server. To use one such file, if it were called "sg-19216.css", and held in the folder indicated, you would put the following would go in the <head>... </head> block of your html...

<link href='https://sheepdogguides.com/css/sg-19216.css'
   rel="stylesheet" type="text/css" media="all">

If it were in the same folder as the page using what is in it, it could be referenced as follows...

<link href='sg-19216.css'
   rel="stylesheet" type="text/css" media="all">

... and other ordinary variations on the "where is the file" theme are allowed.

What goes in the stylesheet is covered below.

-------
EMBEDDED styling: The following would go in the <head>... </head> block of your html...

<style type="text/css">
.ex1 {background-color:#ffff00;}
.ex2 {background-color:#ffccff;}
</style>

That would permit enclosing things in <div class=ex1>...</div>

... and it would override any width specification already in class "ex1", or add a width specification, if there weren't one already from an external style sheet.

You could also set, say, a paragraph to class .ex1. (Or .ex2, etc. )

-------
Or styling may be IN-LINE. The following would go in the <body>... </body> block of your html...

<div class=ex1
style="width:50%;">

... and it would override any width specification already in class "ex1", or add a width specification, if there weren't one already.

Note the magic! We can, say, set the overall color for several web pages with an external style sheet. Then use embedded styling to change the color of some of the pages in the set. And then at an even lower level, change the styling of some parts of any page with in line styling. This is where the "cascading" comes from in the name "CSS".

And now for main content of this page...

Cascading STYLE sheets

If there is any justice, and for once, there is some, the name should give you a hint.

Cascading style sheets (and things like them) affect the style of what you see on a web page.

Many things come under the category "style". What the text on the page looks like, and how it is arranged being two of them.

But all the things you can do with style are not going to be the focus of this essay. This essay is about how you get styling into your pages in the first place.

This essay is going to cover some basics of where you "put stuff" to achieve the styling that CSS allows.

A really simple web page

The following is about the simplest "proper" web page you can do... but it does include the core elements of any web page, plus the traditional "Hello world"...

<html>
  <head>
  </head>

  <body>
    <p>
    Hello world. This is a pretty simple page.
    </p>
  </body>
</html>

At first glance, you might think there was no styling active in that, but you'd be wrong.

For example, everything between the p and /p tags will be presented in the default style for "p" text.

But styling can be a whole lot fancier than that!

You are not required to indent lines the way I did.

Let's make it a green world.

To have that page produce...

Hello green world.

... I changed the "Hello world" to...

Hello <span style="color:#00ff00;">green</span>world.

This is inline styling. And you can "do things" to the font, the font size, the margins... etc, etc! But we'll simply make changes to color for a while, so you can concentrate on where the styling stuff goes.

Now... what if we wanted a whole block of stuff green? Easy.

That was achieved with...

<div style="color:#00ff00;">
<p>Here's a bunch of stuff,<br>
all in green.</p>
</div>

(We're still using inline styling.)

The enclosing tags are now "div", not "span"... but the way we archived the green has not changed.

We're going to come back to this later. First...

Embedded Styling

What if you wanted an essay to have paragraphs in red alternating with paragraphs in green? You have the tools to do it. But doing it the only way you know so far would be tedious. And deciding to change the red to blue would be really tedious.

Happily, there's an answer.

We can do this.

It really isn't nearly as hard as you might fear, and changing the colors after the page is "done" can be done too....

Once you know how.

-------
In our Really Basic web page template, there is the <head>...</head> section.

In that, for a clever way to have the two paragraph style options, we need....

  <head>
    <style type="text/css">
     .ParaFirstColor {color:#ff0000;}
     .ParaOtherColor {color:#00ff00;}
    </style>
  </head>

That creates two "classes"... "ParaFirstColor" and "ParaOtherColor". (Note that in the code, we need a "." in front of each class name. But also note that how we do the coloring is pretty much as before.)

...AND to get the result just demonstrated, we start with....

<p>Happily, there's an answer.</p>
<p>We can do this.</p>
<p>It really isn't nearly as hard...</p>
<p>Once you know how.</p>

... and we just add some bits...

<p class=ParaFirstColor>Happily, there's an answer.</p>
<p class=ParaOtherColor>We can do this.</p>
<p class=ParaFirstColor>It really isn't nearly as hard...</p>
<p class=ParaOtherColor>Once you know how.</p>

External Styling

Here's another option... and don't be dismayed... these multiple options are Good News!!

In the same folder as the html we have been working with, create a small file, as follows...

/*This is a comment
External style sheet created 16 Feb 19*/
.ParaFirstColor {color:#ff0000;}
.ParaOtherColor {color:#00ff00;}

Look familiar? It should!

Save it as MyFirstExternalCSS.cs. When I say "save it", I mean save just the four lines you see above. That's all it takes!

(Actually, it can be in any folder, but having it in the same folder makes writing this easier... assuming that the page you are going to USE the stylesheet in is in the same folder.)

In the head.../head section of your webpage, put...

<link href='https://MyFirstExternalCSS.cs'
   rel="stylesheet" type="text/css" media="all">

Once that is in place, the....

  <head>
    <style type="text/css">
     .ParaFirstColor {color:#ff0000;}
     .ParaOtherColor {color:#00ff00;}
    </style>
  </head>

.. which, previously, was in the head.../head section can be REMOVED! (Removed from the page the styling is being used in.) (For now, just "rem it out" with HTML's usual "comment" tags: <--, closed by -->) The page will still know how to present text the "ParaFirstColor" way... because it now "sees" the definition in the external style sheet.

Why bother with external style sheets?

For a single page- no reason.

But what if you had, say, five pages, and you wanted their appearance to match a common theme? Using the external style sheet makes the ParaFirstColor style available to all of them.

Now the advantage of an external style sheet becomes clear, I hope? Not only is creating a set of pages in a consistent style easier, but imagine if, subsequently, you decide the color you've used for preformatted text isn't dark enough? One change to the external style sheet, and, "bingo", ALL the pages using that style have darker text!

But- you can have your cake, and eat it too...

Suppose you were using the external style sheet explained above. And were using it with 5 webpages. But then you wanted one of them to use a different color? (The example is strained, but you will want to do analogous things.)

This is easy to arrange... just put an EMBEDDED style in the sheet that you want different... but put it AFTER the...

<link href="MyFirstExternalCSS.cs"
   rel="stylesheet" type="text/css" media="all">

Not only can embedded stylesheets be used to override external stylesheets, but, by the same logic, inline styling will override both of them.

If, in addition to a color for pages generally, changed for just a few or them, you wanted just one paragraph different from either of the colors in play so far, you would use the inline styling that we started this essay with...

<p class=ParaOtherColor style="color:#000000;">We can do this.</p>

That would, in a sense, make a browser go through four stages before "deciding" what color to use for the text.

It would start with the default text color. Then it would "think" it should use the color specified in the external stylesheet. But no, that is being over-ridden by the internal styling... and lastly, for this line, THAT is being overridden by the inline styling!

Now- that example is a little extreme. However, you can determining many things with styling. And in many cases, the "layers" (cascades) of determining the color, etc, will be more sensible.

CSS gives you superb granularity.

I hope that why it is called CASCADING styles is more evident to you now?

Suppose your external stylesheet only said that the text should be green. Fine. (As long as you wanted that sort of text green in most of the pages that will have it specified as one of the page's external style sheets.)

But! A page can have many external stylesheets.

(Remember that the order of everything matters. Which color setting happens last is the one that will matter... whether the setting is made in one (of perhaps several) external stylesheets, or it happens because of some embedded styling... or in an in-line styling code.

But further suppose you wanted SOME of the pages to make ParaFirstColor paragraphs italic, as well.

Styling is cumulative.

.ParaFirstColor (perhaps a bad name... .ParaFirstStyle might have been better) says make the color green.

If somewhere else, after saying the color should be green, you say...

.ParaFirstColor {font-style:italic;}

... you will make the font italic.

Adding the italic doesn't interfere with the color setting.

Pretty cool

The whole thing... the "cascading" aspect, the things you can do, etc... is pretty cool once you can get your head around it. It took me several years. It's one of those things that grows on you slowly, if you are struggling down the self-taught route. A bit like riding a bicycle. You're told how. Pump the pedals. Steer with the handlebars. Fine. You scrape knees for a while. And then suddenly, you can just do it. But you had to scrape the knees for a bit. And you can't isolate any "but you didn't tell me.." element.

With something like cascading style sheets, start simple. Try things. Add more things. Use the W3.org validator. (Run that on a page CSS you've put CSS into. The validator will check your page and any external sheets called in by your page.)

Keep doing more Google searches. I find the W3Schools pages particularly helpful. (You might want to consider using the W3Schools "omnibus" external stylesheet! (Why re-invent the wheel, when someone with expertise and a good reputation is inviting to use theirs for free? Do something the easy way? (I read about that once.)) Or even use one of the free W3Schools site templates?

Even if you read another essay about "the same thing", you're reading it explained differently, and that may help you catch the bit you mis-understood previously. The computer is always right. It can't read your mind. Doesn't know what you think it should do. It only knows what it does do for a given command. And the command has to be expressed correctly.

What's missing?

There's something missing! Alas, it is also missing from my grasp of styling.

I've used "class=" to apply styling specified in external or embedded styling. And dots before the class name when I was defining them.

This may be pretty pedestrian. I have encountered hints that we can be more clever. It may, for instance, be possible to set TWO "style xyz"s, one for paragraphs, one for H2 headings, and use them thus...

<h2.xyz>Heading in "xyz" HEADING 2 style.</h2>

<p.xyz>Paragraph in "xyz" PARAGRAPH style.</p>

That, however, in a phrase I like from the St. James bible, is "a thing to high for me"... for the moment. I see its charms. I aspire to the skills.

For now, I will content myself with using the following. It works!

<h2 class=xyzH2>Heading in "xyzH2" style.</h2>
<p class=xyzP>Paragraph in "xyzP" style.</p>

I've shown you how you can do that in the essay above.