1
00:00:00,390 --> 00:00:04,010
All right guys we are leveling up. In this module,

2
00:00:04,020 --> 00:00:07,580
we’re going to talk about Cascading Style Sheets.

3
00:00:07,610 --> 00:00:13,030
First let's understand why CSS was created and why it's necessary.

4
00:00:13,260 --> 00:00:20,580
Now if you think back to the 90s web developers wanted to style up their web sites making it look the

5
00:00:20,580 --> 00: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

6
00:00:27,300 --> 00:00:28,910
were very very limited.

7
00:00:29,010 --> 00: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,

8
00:00:35,100 --> 00:00:39,540
this is a real web site and you could still visit it at this URL.

9
00:00:39,790 --> 00: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

10
00:00:46,500 --> 00:00:48,760
to use HTML tags.

11
00:00:48,840 --> 00:00:55,410
For example the font tag which you can use to change the font of the text being displayed and you can

12
00:00:55,410 --> 00:01:01,290
also use things like the center tag which simply centers any element on screen.

13
00:01:01,290 --> 00:01:04,590
Now in addition to that people also used attributes.

14
00:01:04,770 --> 00:01:11,640
For example you can set the h1s background color using the background color attribute to a particular

15
00:01:11,640 --> 00:01:16,680
color hex code and that would change the h1 to a different color.

16
00:01:16,680 --> 00:01:23,880
Now the problem really comes along when you start messing around with the layout using just HTML because

17
00:01:23,970 --> 00: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

18
00:01:30,210 --> 00:01:34,620
that exist side by side we have to use tables.

19
00:01:34,620 --> 00:01:39,170
And the problem with tables is that they are really really wordy.

20
00:01:39,180 --> 00:01:44,700
You have to write a lot of code in order to do something very simple which is displaying that image

21
00:01:44,850 --> 00:01:51,000
next to your h1 and your paragraphs, having it on the same horizontal level.

22
00:01:51,180 --> 00:01:55,410
And look at how much code we had to write just to do that simple thing.

23
00:01:55,410 --> 00:02:02,520
Now the other problem with tables is that its very very easy to make syntax errors and it's very easy

24
00:02:02,520 --> 00: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

25
00:02:08,850 --> 00:02:10,980
difficult to debug as well.

26
00:02:10,980 --> 00:02:17,190
And also if you started getting into more complex table layouts you had to embed tables within tables

27
00:02:17,220 --> 00:02:23,040
in order to get more columns and more rows and more flexible layout and the whole thing just became this

28
00:02:23,040 --> 00:02:25,040
horrible horrible mess.

29
00:02:25,050 --> 00:02:31,530
So that's why people started using something called Cascading Style Sheets.

30
00:02:31,650 --> 00: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

31
00:02:38,340 --> 00:02:39,390
by itself.

32
00:02:39,480 --> 00:02:43,290
It's only purpose in life is to style markup language.

33
00:02:43,290 --> 00:02:49,680
So for example each HTML, XML code, and in this module we're going to explore all the powerful things

34
00:02:49,920 --> 00:02:57,030
that you can do with Cascading Style Sheets to bring your web site from the 90s into the current day

35
00:02:57,030 --> 00:02:57,540
and age.

36
00:02:57,600 --> 00:03:03,330
So enough talking let's get started styling up our web site using CSS.