Instructor: Hey guys, welcome to the introduction
to CSS section.
And in this very first lesson
we're gonna 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 gonna 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 style sheet languages
the one that's most important
and what we are gonna 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 gonna 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 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 found Netscape
and now the very famous Andreessen Horowitz VC fund.
And in his 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 W3 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 webpages 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
our 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 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
wanna do some simple things like give it some colors
or put things into the center, then your whole HTML file
is gonna 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...
how calm...
How come...
By how come.
And he's basically the father of the cascading style sheet.
And what this recommendation allows us to do is to
allow us to attach style such as fonts, 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 wanna 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 and then
/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 gonna 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 gonna get started
styling up a website.