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

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

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

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
4

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
5

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

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,
7

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

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
9

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

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
11

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

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

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
14

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

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
16

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
17

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

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

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
20

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

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.
22

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
23

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
24

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

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
26

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
27

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

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

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
30

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

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

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
33

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
34

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

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