Hey guys, welcome to the Introduction to CSS Section.
And in this very first lesson, we're going to be introducing you to CSS.
You'll be learning what it is, how it works and why we need it to be able to style our websites and
make them look beautiful.
What exactly is CSS?
Well, it stands for "Cascading Style Sheets."
It kind of conjures up the image of a cascade,
right?
And a cascade is simply like a waterfall.
You have water at one level that then drops down through a waterfall into another level.
And we're going to see as we start to use these cascading style sheets, why that analogy is so apt.
Because the way that the style is applied cascades like a waterfall.
We start from the most general all the way down to the most specific styling requirements, and we're
going to see that in use as we use these cascading style sheets.
The other part of this name is the, "Style Sheet."
A style sheet is a type of language similar to how we had the HTML, which is a markup language,
that's what the "ML" part of HTML stands for.
We have the style sheet, which is what the "SS" part stands for, and this is a language that allows
us to specify how things should look in our website.
And there are many different types of stylesheet languages.
The one that's most important and what we're going to be learning all about in this section is the cascading
style sheet.
But there's also others like Sass, which stands for Syntactically Awesome Style Sheet and Less, which
stands for Leaner CSS and many, many others.
But the most important one that every web developer needs to know is CSS,
and that's what we're going to be focusing on today.
So why did we need CSS?
Where did it come from and what exactly is the history of this whole thing?
Well, in the very beginning when the Internet was very, very new, there was no CSS, there was only
HTML.
And one of the things that developers started wanting to do is they wanted to style their website and
make it look the way they wanted it to, but they were really, really limited by HTML.
And this is a now famous email sent by Marc Andreessen, who is the founder of Mosaic, which is one
of the earliest Internet browsers who later founded Netscape and now the very famous Andreessen Horowitz
VC Fund.
And in this email he famously said that the answer he has for so many developers who want to simply
control what their documents look like, meaning what their websites look like in a way that would be
trivial, say in Microsoft Word,
his answer to these developers is just, "Sorry, you're screwed."
There is no way to do it very easily at that point in HTML.
That's why all the website looks pretty much the same,
pretty boring,
and there was no variation.
So what happened next?
Well, the W3C consortium responded by releasing a new version of HTML, HTML 3.2, and this came out
in 1997, so it was still in the very early days of the Internet.
And what this 3.2 HTML allowed was it introduced new HTML tags such as the font tag, which allows you
to define the font size, the color and the font face.
So the type of font you would want to use for your document.
Similarly, there was also the color attribute for font.
There was the face attribute, the size attribute, and these attributes allow you to change all sorts
of things about the way the text looks on your website.
And then there was also the center element which allows you to format your document and define how it
would be laid out on the screen.
Now, what you'll notice in all three of these Web pages is the deprecated symbol next to it.
All of these are deprecated, which in programming lingo, simply means you should no longer be using
these attributes and elements.
And the reason for this is because, as you can imagine, HTML is supposed to be for content.
Now, if you add in a ton of styling into all of that content, you tell the website how it should be
centered, how it should be laid out, how the font should look, what color it should be, what kind
of border your tables should have, and a whole bunch of other styling effectively,
then this is going to massively clutter up all of your HTML.
And you can imagine this is a really, really short website and it's already got so much junk in it
that we can't really tell what exactly is the structure and the content of the website and
if you extend this to a larger website and you just want to do some simple things like give it some
colors or put things into the center, then your whole HTML file is going to be many, many, many thousands
of lines long and it's impossible to differentiate the content from the styling.
So what happened next?
Well, in 1996, a new recommendation was proposed by the W3 consortium, and this was led by Hakon
Wium.
*struggles with pronunciation*
And he's basically the father of the Cascading Style Sheet.
And what this recommendation allows us to do is to allows us to attach styles such as font colors and
spacing to our HTML documents.
And this is the breakthrough that allowed us to separate our styling from our content.
And as in many different situations, a separation of concerns so that somebody is responsible for putting
together the car headlights and somebody else is responsible for dealing with the wheels rather than
one person making an entire car,
this kind of modularity, as you'll see in coming lessons, is super important, not just in manufacturing
and in real life, but also in programming.
If you want to see what CSS is able to achieve,
I've built this website for you to be able to do that.
If you go over to appbrewery.github.io/just-add-css, you should be able
to see this website.
And when you first go over there, you'll see that it's just a very, very simple website, pretty bland.
All it's got is HTML.
And now if we go ahead and press this button to toggle and turn on CSS, then you'll see the entire
website transform and look way more beautiful.
It's now got different fonts, different colors and different layouts,
but you'll notice that if you go ahead and right-click and view the Page Source, in these two versions,
the HTML does not change at all.
So let's toggle our CSS back and then let's go ahead and View Page Source again.
You'll see that in these two versions,
as you see me switch it on screen, nothing changes in our index.html.
The only thing that is different is the CSS that gets added.
Now don't worry too much about the script tags down here or how we've created our buttons,
we're going to learn all of that later on when we learn JavaScript.
But I created this website so that you can play around with toggling the CSS on and off to see how it
can transform a simple HTML website without touching any of the code inside the HTML.
And all that we're doing is adding style to our website in a completely separate language,
the Cascading Style Sheet.
To learn more about how CSS works, head over to the next lesson where we're going to get started styling
up a website.