1
00:00:00,240 --> 00:00:01,290
Welcome back.

2
00:00:01,290 --> 00:00:06,670
So this video is going to be a high level overview of how the assess works and what it does.

3
00:00:06,720 --> 00:00:11,310
So we want to actually be writing any code until the next lesson and pretty much every lesson from there

4
00:00:11,310 --> 00:00:13,120
on out covering SEUS us.

5
00:00:13,500 --> 00:00:18,930
But what we are going to do is three important things we're going to define success and talk about the

6
00:00:18,930 --> 00:00:21,870
role that it plays why you use it what it does.

7
00:00:21,870 --> 00:00:24,180
We're going to view some websites that have the.

8
00:00:24,210 --> 00:00:27,560
We're going to take the C S C S away and see how they change.

9
00:00:27,900 --> 00:00:32,490
And then we're going to define this general rule that will follow for every CSSA line that we write

10
00:00:32,490 --> 00:00:34,340
.

11
00:00:34,380 --> 00:00:39,580
So let's go ahead and talk about what's the stance for cascading style sheets.

12
00:00:39,840 --> 00:00:43,670
So the cascading part we're actually going to come back to in a later video.

13
00:00:43,830 --> 00:00:46,690
But the style sheets is pretty self-explanatory.

14
00:00:46,710 --> 00:00:55,390
Remember that C Ss is often considered the adjectives or the skin where H M L would be the nouns.

15
00:00:55,590 --> 00:00:59,830
So Jim Ellis the structure we want in heading here and a bullet point here.

16
00:01:00,090 --> 00:01:07,740
We used to say make the headings purple and font size 50 pixels and move this down to the bottom and

17
00:01:07,740 --> 00:01:09,170
give it a border.

18
00:01:09,240 --> 00:01:13,760
So we use it to describe how things should look so style sheets.

19
00:01:13,770 --> 00:01:19,410
The other part is the sheets part of it and what that means is that we're going to be writing these

20
00:01:19,530 --> 00:01:21,030
separately from each team.

21
00:01:21,110 --> 00:01:23,400
They are not inside HMO.

22
00:01:23,460 --> 00:01:27,590
They are separate documents that we then include in our HMO.

23
00:01:28,020 --> 00:01:31,510
So let's start by taking a look at some examples.

24
00:01:31,560 --> 00:01:35,430
There's a site that I really really like called CSX Zen garden

25
00:01:38,610 --> 00:01:44,490
and the whole point of this site is to show you the variety of things you can accomplish with Jesse

26
00:01:44,490 --> 00:01:45,220
s s.

27
00:01:45,300 --> 00:01:49,200
So if you take a look here we have some markup.

28
00:01:49,260 --> 00:01:52,120
Let's look at the HDMI file.

29
00:01:52,410 --> 00:01:54,010
We can go ahead and open that up.

30
00:01:54,450 --> 00:01:58,780
So this is the core file that every single page NCEA says.

31
00:01:58,840 --> 00:02:00,300
Zen garden uses.

32
00:02:00,300 --> 00:02:02,130
So you can see it's pretty basic.

33
00:02:02,130 --> 00:02:04,280
We've got some headings.

34
00:02:04,280 --> 00:02:10,260
We've got some paragraphs some links some bullet points at the bottom and then the whole idea of this

35
00:02:10,260 --> 00:02:16,710
site is that contributors take this to email and write their own CSSA without changing the aged him

36
00:02:16,710 --> 00:02:17,580
out at all.

37
00:02:17,580 --> 00:02:23,360
So you only change to see assess the structure is the same and you end up with different results.

38
00:02:23,370 --> 00:02:25,550
So here's one.

39
00:02:25,720 --> 00:02:31,320
And on the right side you can check out a few others and there's there's a bunch of them on the site

40
00:02:31,350 --> 00:02:33,800
and actually you can contribute your own if you want it to.

41
00:02:34,080 --> 00:02:35,020
Well let's take a look.

42
00:02:35,250 --> 00:02:42,750
So this one is radically different total different lay out different color schemes fonts images.

43
00:02:42,750 --> 00:02:44,190
This one is also very different.

44
00:02:44,190 --> 00:02:47,840
It has this nice loading animation all done Roscius us.

45
00:02:48,240 --> 00:02:54,420
You can scroll down and we have this effect where our content scrolls but the background image is static

46
00:02:54,420 --> 00:02:56,050
.

47
00:02:56,130 --> 00:03:00,190
We have this one which is radically different as well.

48
00:03:01,020 --> 00:03:06,990
And we could spend all day on here and we just find one more which is my favorite which is a robot named

49
00:03:06,990 --> 00:03:08,820
Jimmy.

50
00:03:09,190 --> 00:03:13,510
We get this little robot that pops up in this spinning a starburst in the back.

51
00:03:13,620 --> 00:03:20,860
Also another scrolling effect so I'm showing this to you so that you can see how powerful CSSA is.

52
00:03:21,060 --> 00:03:23,330
It basically is the skin doctor.

53
00:03:23,370 --> 00:03:27,330
The additives for your structure it can change.

54
00:03:27,330 --> 00:03:35,020
You know aside from looking like this and it can change it to look like this.

55
00:03:35,070 --> 00:03:40,140
So hopefully that's enough to get you excited about learning C S s r h d m l side so far have been pretty

56
00:03:40,140 --> 00:03:40,690
bland.

57
00:03:40,770 --> 00:03:45,170
We haven't had any style besides the default black and white styles.

58
00:03:46,440 --> 00:03:51,660
So next up I want to talk about a general rule that every line of CSSA that we've write will follow

59
00:03:51,670 --> 00:03:51,880
.

60
00:03:52,050 --> 00:03:55,090
So this pattern here it looks like this.

61
00:03:55,230 --> 00:03:56,800
We select something.

62
00:03:57,270 --> 00:04:02,990
So we're going to talk a lot about what actually goes there but we'll select something like All h ones

63
00:04:03,300 --> 00:04:06,470
or every anchor tag inside of an ally.

64
00:04:06,540 --> 00:04:12,690
So we do something where we're selecting h tim l elements are referencing existing h t m l and then

65
00:04:12,690 --> 00:04:19,710
inside the curly braces we apply some styles and they follow this key value pair format where we have

66
00:04:19,710 --> 00:04:24,350
a property colon and then a corresponding value and then a semi-colon.

67
00:04:24,690 --> 00:04:30,090
So we can have one thing in here we can have 100 different properties that we're changing but they always

68
00:04:30,090 --> 00:04:33,770
follow this syntax property Colan value.

69
00:04:34,740 --> 00:04:36,510
So here's two examples.

70
00:04:36,540 --> 00:04:40,190
This first section is going to select all h ones.

71
00:04:40,260 --> 00:04:42,920
So again we're going to come back to you how these selectors work.

72
00:04:43,080 --> 00:04:49,350
But it's going to select all each ones on a page and then it's going to give them color of purple and

73
00:04:49,350 --> 00:04:57,000
font size of 56 and then this next one down here is going to select all image tags and give them border

74
00:04:57,000 --> 00:05:02,100
color red and border with of three pixels.

75
00:05:02,100 --> 00:05:06,350
So you know we're not always going to select all the ones in all image tags.

76
00:05:06,570 --> 00:05:10,860
We're going to have multiple videos on actually the nuances of selecting things sometimes we want to

77
00:05:10,860 --> 00:05:15,310
select tons of things sometimes we're doing one small element at a time.

78
00:05:15,450 --> 00:05:19,160
So there's a lot of options there but it always follows this format.

79
00:05:19,470 --> 00:05:26,250
We select something curly braces and then inside the curly braces we have key value pairs that are actually

80
00:05:26,250 --> 00:05:27,420
just properties that we're changing