1
00:00:00,760 --> 00:00:05,050
Before we talk about each line of code, I
want to take a minute and

2
00:00:05,050 --> 00:00:09,480
talk to you about WorkSpaces, and why this
environment is such a great tool.

3
00:00:10,600 --> 00:00:15,010
WorkSpaces is designed to function just
like a text editor, but

4
00:00:15,010 --> 00:00:18,890
it's not like Word or Pages, which are
word processors.

5
00:00:18,890 --> 00:00:22,550
These text editors are for writing HTML
and CSS.

6
00:00:23,580 --> 00:00:26,350
And the many other languages that make up
the web.

7
00:00:26,350 --> 00:00:29,550
On every computer, there's a basic text
editor.

8
00:00:29,550 --> 00:00:31,880
On Windows, it's called Notepad.

9
00:00:31,880 --> 00:00:33,710
And on a Mac, it's called TextEdit.

10
00:00:33,710 --> 00:00:38,080
I'm working on a Mac, so I'll show you
what this looks like.

11
00:00:38,080 --> 00:00:41,470
I'll search for TextEdit and there it is.

12
00:00:42,690 --> 00:00:47,180
And when I pull it up, this is what a
basic text editor is going to look like.

13
00:00:47,180 --> 00:00:48,600
Now I bet you're thinking,

14
00:00:48,600 --> 00:00:52,320
that doesn't look like the fancy
WorkSpaces you're using.

15
00:00:52,320 --> 00:00:53,760
And it's true.

16
00:00:53,760 --> 00:00:58,590
WorkSpaces, like many other text editors,
has many special features that

17
00:00:58,590 --> 00:01:02,660
allow you to code faster and use colors to
make coding easier.

18
00:01:03,810 --> 00:01:07,810
Now that we know where we're working and
why WorkSpaces is so

19
00:01:07,810 --> 00:01:12,520
awesome, let's talk about why we're using
an external style sheet.

20
00:01:12,520 --> 00:01:16,740
In the Publisher story course, there are
only two lines of CSS code,

21
00:01:16,740 --> 00:01:19,600
written in style tags, directly in the
HTML document.

22
00:01:19,600 --> 00:01:23,930
That seems easy enough, so why don't we
use it every time?

23
00:01:23,930 --> 00:01:27,440
The main purpose of making an external
style sheet is so

24
00:01:27,440 --> 00:01:31,240
you can make changes to the entire website
at once.

25
00:01:32,250 --> 00:01:36,150
In the early days of styling webpage, HTML
structure and

26
00:01:36,150 --> 00:01:39,120
CSS style were mixed together.

27
00:01:39,120 --> 00:01:42,590
Presentation was directly applied to the
structure,

28
00:01:42,590 --> 00:01:47,690
which means that maintaining webpages
became an arduous task.

29
00:01:47,690 --> 00:01:51,800
If, for example, someone decided that the
main title in each page of

30
00:01:51,800 --> 00:01:55,230
a website should change from black to blue
and

31
00:01:55,230 --> 00:01:59,640
that site had ten pages, you had to change
that style ten times.

32
00:02:00,790 --> 00:02:05,500
By separating structure and presentation
you gain numerous advantages.

33
00:02:05,500 --> 00:02:10,250
A cascading style sheet can be shared
across multiple pages, sites are easier to

34
00:02:10,250 --> 00:02:15,140
maintain and become more flexible, and the
styles applied to a web page,

35
00:02:15,140 --> 00:02:20,190
can be tailored to suit multiple devices,
such as a phone, tablet, or computer.

36
00:02:21,250 --> 00:02:24,530
Looking at our style sheet, you can see
I've included a lot of

37
00:02:24,530 --> 00:02:28,030
rules that override each other as you read
down the page.

38
00:02:28,030 --> 00:02:32,240
The C in CSS means that while the rules
cascade down the page,

39
00:02:32,240 --> 00:02:35,030
they override the rule before it.

40
00:02:35,030 --> 00:02:38,870
This works when you're writing basic rules
like we have here.

41
00:02:38,870 --> 00:02:43,950
But I should warn you, there are many ways
this cascading rule does not work.

42
00:02:43,950 --> 00:02:48,990
As you learn more about CSS, you'll find
there are nearly as many instances that

43
00:02:48,990 --> 00:02:53,360
this doesn't work in a cascading nature as
when it does.

44
00:02:53,360 --> 00:02:57,450
Reading through our own CSS rules, you can
see that up here in

45
00:02:57,450 --> 00:03:01,670
the body we've assigned the color of all
the text to be a dark gray.

46
00:03:01,670 --> 00:03:06,090
But when you look at our webpage, not all
the text is a dark gray.

47
00:03:06,090 --> 00:03:07,520
So what happened?

48
00:03:07,520 --> 00:03:12,250
You can see down here in our headlines
we've changed those colors.

49
00:03:12,250 --> 00:03:14,980
So in our first level headline we've
changed it

50
00:03:14,980 --> 00:03:18,433
to a dark purple which you can see here in
my name.

51
00:03:18,433 --> 00:03:24,100
Level two headline I've changed it to a
light grey, which you can see.

52
00:03:24,100 --> 00:03:25,560
One that says teacher.

53
00:03:25,560 --> 00:03:29,240
And level four headline, I've changed it
to a dark purple.

54
00:03:29,240 --> 00:03:32,510
And you can see that in What I do and What
I enjoy doing.

55
00:03:32,510 --> 00:03:35,820
You should change these colors to whatever
makes you happy.

56
00:03:37,400 --> 00:03:41,800
We've covered a lot of new information
about text editors and CSS.

57
00:03:41,800 --> 00:03:44,730
Let's make sure you're picking up
everything I'm

58
00:03:44,730 --> 00:03:46,170
putting down with a quick quiz.