Part 3. Even More About CSS

How and Why CSS Was Invented

Remember how boring the World Wide Web's First Web Page (click here) looked? That is because it lacked style. That web page is all paragraphs and links to other boring web pages. Nobody in their right mind would dare to create a web page like that today, some 30+ years later. In fact, and to drive the case-in-point home, right-click in a white area on that web page after it is open in your browser, and select View page source from the pulldown menu to see how truly awful HTML version 1.0 was back then. Several things become immediately clear. We tend to avoid capital letters in our modern HTML5 tags. And many of the tags you find there are now deprecated, which means that they were rendered obsolete in favor of better and more efficient coding methods. But don't stare at HTML v1.0 code too long, or you'll go blind.

Now just imagine that you were a web developer 30 years ago and there was no CSS. Back then, you either had to use some form of inline HTML tag (or style rule) for each and every element on your web page, or simply leave it completely unstyled and left to the mercy of the default styles of your web browser to make it look right. But then one day you thought to yourself, "Gee, if only there were some way to create some universal style rules that we could apply to all elements of the same type, like headings and paragraphs and links to other web pages, but also with the ability to modify them for different situations and presentations. Wouldn't that be nice?" So, as you might have already guessed, that certainly did happen out of necessity and desperation, and thus the CSS coding language was born.

But CSS took a while to evolve into something useful. In some areas of your web page, you wanted all paragraphs to appear in the same style. But in other areas, you wanted paragraphs to appear differently. And in some cases, you only wanted one word to be printed in italics, or in bold text, or underlined, or even in a completely different color and style than every other word on the web page. These requirements certainly presented challenges to the pioneering developers of CSS. Obviously, some of the old ways of styling elements inline needed to remain the same, or at least they needed to change very little. But the need for individualized styling of large areas of the web page, or for a majority of tags of the same type, needed to be created as well.

Eventually it was determined that the HTML and CSS languages needed to cooperate with each other in this effort, so the concept of class and id attributes was born, so that each and every tag could be styled individually, by using a unique id for just that one element or tag. Or, they could be styled as part of a group of tags of the same type, also known as a class. And yet, we still needed a way to span styling over certain areas of text, or simply change one word or a few words inline using tags to make text italic, bold, or underlined. And if all of those many years of research and development, and trial-and-error, could be broken down and summarized in just a few paragraphs, then these paragraphs that you are reading now are intended to do just that.

But wait! There is more! There also needed to be a way to group and confine certain areas of the web page to just one area. The solution to that problem was to create a series of div tags so that class and id attributes could be attached to each one. And we needed CSS rules for each div to change its width, height, display properties, and spacing inside the div called padding, and spacing outside around the div called margin. And furthermore, common sense default CSS rules needed to be built into the browser for each tag, just in case the developer decided to not style a certain tag, or forgot to style it, or purposely decided to go with the default CSS rules. So in a nutshell, and in a few paragraphs of explanations, modern CSS was born.

The Full Capabilities of CSS

In HTML, we often use the terms element and tag interchangeably. But there is an important difference in that an element is defined by the tags that define it. For instance, the element called the document body is actually defined by what is enclosed within the opening <body> and closing </body> tags.

Remember what we learned about the six essential tags in HTML? And do you remember the order in which we arrange those six tags? Do you also recall what we learned about our hero named Mark Up? He's the guy who has a head and a body and who lives inside of a house. Well that house is a structure called the HTML document. The HTML document contains everything that is coded between the opening <html> tag and the closing </html> tag. That includes both the document head and the document body. The document head includes everything that is coded between the opening <head> tag and the closing </head> tag. And the document body includes everything that is coded between the opening <body> tag and the closing </body> tag. Please remember that the bulk of the content on our webpage is found in the document body. But as we learned in our previous projects, we can style the HTML document separately from the document body. Remember how the HTML document had a background-color of lemonchiffon, and the document body had a background-color of lightblue? That is because we styled the HTML document separately from the document body. We styled the HTML document and the document body separately to prove a point that they were two separate elements, even though we could have just as easily styled them together with the same CSS rules.

At this point, you might be asking yourself, "What exists that CSS can style?" And also, "What exists that CSS cannot style?" The answers to these two questions are actually easier than you might think. To boil it all down to a simple answer, CSS can style the HTML document, the document body, and/or any element (or all elements) found in the document body. But it cannot style anything inside the document head. Why is that? Because nothing inside the head appears on the actual web page itself. As you may recall, two items can appear on the browser tab: the title and the favicon. But these items could be changed through JavaScript (as we will learn in a separate course), but CSS is only concerned with styling what appears on the actual web page itself. So in summary, you can essentially style any HTML element on your web page, including the visible HTML document itself, the document body itself, and every single HTML element. And you can style each element individually or in groups. You can even style all of the HTML elements all at once using the wild card * tag. And we will explore all of these above-mentioned CSS styling techniques through coding examples very soon.

Hierarchies and Relationships

The rules of CSS are a lot like our societal rules of law. We have federal laws, state laws, county laws, and we have municipal laws as well. Federal laws generally have jurisdiction over state laws, but sometimes federal laws allow for a state's right to enact their own laws that are exempt from federal laws. The same is true for the jurisdiction of state laws over county and municipal laws. But don't worry! You won't need to be a lawyer to become a good web developer.

We have already seen how the four types of CSS have different levels of priority over each other. But within the DOM (document object model), there exists a hierarchy which closely resembles the legal jurisdictions mentioned in the paragraph above. Perhaps you could think of the CSS rules for the HTML document <html> as being much like federal laws. CSS rules for the HTML document do not necessarily apply to the document body <body> as well, but they can. Therefore you might think of the CSS rules for the document body <body> as being very much like state laws. And yet CSS rules for the document body do not necessarily apply to the other tags inside the document body, but they could. So you could also think of those other tagged elements as counties and municipalities. In reality, those default CSS rules defined by the web browser based on HTML standards have more governing power over each HTML element than their relationship to other elements in the HTML hierarchy.

Another part of the hierarchical pecking order is relationships. The rules of CSS are a lot like our parental relationships. The HTML document is the parent of the document body, and the body is therefore a child of the HTML document. And elements inside the document body might be children of the document body, or they might be nested inside of some other element (like a div) that is their parent. Yes, children do mature and often become parents themselves. And so, what seems like the least significant element on your web page is still the child of some other parental element. And it seems fitting to introduce the concept of inheritance at this point because elements that are children inherit certain characteristics from their parents, just like in real life.

The reason why this matters is because well-planned CSS stylesheets put html, body, and even * (wild card) CSS rules at the very top of the stylesheet because they can affect all the other elements and tags on the web page. You will sometimes see this described as a CSS Reset because it kind of sets the stage for the other CSS rules that are to follow. Another best practice, and a good habit to get into, is to list your CSS rule descriptors in the same order that their corresponding HTML tags appear in your HTML document. That isn't always possible, but there are good reasons for prioritizing the order of the CSS rules in your stylesheets this way.

Uncommon Sense

Through all of these long (and often boring) explanations, one fact of paramount importance is seldom explained. And that all-important fact is that the web browser reads all of your instructions from top to bottom. And it displays each tag on the web page in the order that it found each one listed in your HTML document. After all, what would you do if you were a web browser? When you sit down to read a book, where do you start? We've always found that it makes the most sense to start at the beginning. Your web browser starts reading the HTML document from the very top, and it also reads the CSS stylesheet the same way. When it finds an HTML tag, it looks down the CSS stylesheet to find if there are any corresponding CSS descriptors that match that tag name. And then, it styles each tag in the HTML document in the order that it finds them. And in the case where it does not find one, it uses default CSS rules to style that tag.

But what happens when there are two or more CSS rules for the same descriptor? Ah, that's a great question! The browser thinks that you must've changed your mind when you wrote these CSS rules. It was ready to display all of the paragraphs on the web page in blue, because it found p { color: blue; }. But before it got to the bottom of the stylesheet, it found a rule that said p { color: orange; }. So now the browser will display all the paragraphs on the page in orange text. And your web page now looks hideous! So, the big lesson here is that a descriptor might be listed more than once, but their declarations should be different. In other words, you could have two paragraph descriptors in your stylesheet, but only one of them should change the color of the text. The other should change some other property and value, like font-size or margin.

In Summary

Yes, we know. This was a lot of reading without any fun coding projects or exercises to do. And there is still a lot more to learn. But you need to understand the basics before we get into The Good Stuff. After all, we have only covered a fraction of the more than 100 HTML tags we could use, and there is a massive amount to learn when it comes to styling each and every one of them. But we will start having some real fun after the next part called The Big Picture.

When we get to the The Good Stuff, we will introduce a plethora of new HTML tags, and provide in-depth explanations on how to style them using CSS. In reality, the subject of front-end web development is massive, and nobody has all the information in one convenient location. Nevertheless, there are some excellent and comprehensive sources of information out there. Our goal here is to teach you the best and fastest ways to locate these resources, so that you will eventually be able to teach yourself, armed with all the knowledge and wisdom you learned here first. But enough of this chatter. Let's move on so that we can see The Big Picture.