WEBVTT

0
00:00.390 --> 00:04.010
All right guys we are leveling up. In this module,

1
00:04.020 --> 00:07.580
we’re going to talk about Cascading Style Sheets.

2
00:07.610 --> 00:13.030
First let's understand why CSS was created and why it's necessary.

3
00:13.260 --> 00:20.580
Now if you think back to the 90s web developers wanted to style up their web sites making it look the

4
00:20.580 --> 00:27.240
way that they wanted to and it wasn't always pretty but the toolset that they had in order to do this

5
00:27.300 --> 00:28.910
were very very limited.

6
00:29.010 --> 00:35.010
And this is what it might look like if you only had HTML to style your web sites, and, as an aside,

7
00:35.100 --> 00:39.540
this is a real web site and you could still visit it at this URL.

8
00:39.790 --> 00:46.500
Now in order to style up the web site using pure HTML, which is all they really had access to, they had

9
00:46.500 --> 00:48.760
to use HTML tags.

10
00:48.840 --> 00:55.410
For example the font tag which you can use to change the font of the text being displayed and you can

11
00:55.410 --> 01:01.290
also use things like the center tag which simply centers any element on screen.

12
01:01.290 --> 01:04.590
Now in addition to that people also used attributes.

13
01:04.770 --> 01:11.640
For example you can set the h1s background color using the background color attribute to a particular

14
01:11.640 --> 01:16.680
color hex code and that would change the h1 to a different color.

15
01:16.680 --> 01:23.880
Now the problem really comes along when you start messing around with the layout using just HTML because

16
01:23.970 --> 01:30.150
as we've seen in order to change our layout for our personal web site so that we can have text and images

17
01:30.210 --> 01:34.620
that exist side by side we have to use tables.

18
01:34.620 --> 01:39.170
And the problem with tables is that they are really really wordy.

19
01:39.180 --> 01:44.700
You have to write a lot of code in order to do something very simple which is displaying that image

20
01:44.850 --> 01:51.000
next to your h1 and your paragraphs, having it on the same horizontal level.

21
01:51.180 --> 01:55.410
And look at how much code we had to write just to do that simple thing.

22
01:55.410 --> 02:02.520
Now the other problem with tables is that its very very easy to make syntax errors and it's very easy

23
02:02.520 --> 02:08.850
to mess up if you say forgot a td here you would end up with errors all over the place and it's very

24
02:08.850 --> 02:10.980
difficult to debug as well.

25
02:10.980 --> 02:17.190
And also if you started getting into more complex table layouts you had to embed tables within tables

26
02:17.220 --> 02:23.040
in order to get more columns and more rows and more flexible layout and the whole thing just became this

27
02:23.040 --> 02:25.040
horrible horrible mess.

28
02:25.050 --> 02:31.530
So that's why people started using something called Cascading Style Sheets.

29
02:31.650 --> 02:38.330
And this is what's called a style sheet or a style language in the sense that it can't really do anything

30
02:38.340 --> 02:39.390
by itself.

31
02:39.480 --> 02:43.290
It's only purpose in life is to style markup language.

32
02:43.290 --> 02:49.680
So for example each HTML, XML code, and in this module we're going to explore all the powerful things

33
02:49.920 --> 02:57.030
that you can do with Cascading Style Sheets to bring your web site from the 90s into the current day

34
02:57.030 --> 02:57.540
and age.

35
02:57.600 --> 03:03.330
So enough talking let's get started styling up our web site using CSS.