Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,040 --> 00:00:08,110
It's time to flaunt your inner designer because we're about to learn some CSX to start off I want to
2
00:00:08,110 --> 00:00:09,760
show you this Web site.
3
00:00:09,820 --> 00:00:15,440
If you look at it well it's it's quite quite pretty.
4
00:00:15,460 --> 00:00:15,850
Look at that.
5
00:00:15,850 --> 00:00:17,450
That's really nice.
6
00:00:17,530 --> 00:00:21,350
Now hopefully in the future we can create something like this.
7
00:00:21,430 --> 00:00:27,510
But I want to show you what this Web site will look like without CSX.
8
00:00:27,550 --> 00:00:28,090
Here it is
9
00:00:32,260 --> 00:00:33,690
pretty impressive right.
10
00:00:33,730 --> 00:00:40,410
With just CSX you'll be able to create something like this so let's get started to Shelly
11
00:00:43,390 --> 00:00:46,810
I've created here for us a simple Web site.
12
00:00:47,080 --> 00:00:48,550
Nothing that we haven't seen before.
13
00:00:48,550 --> 00:00:57,070
You can see that I have created semantic tags with header nav an unordered list that has some links
14
00:00:57,680 --> 00:01:03,570
a P two and a p tag that's wrapped in another semantic tag called section.
15
00:01:03,650 --> 00:01:03,880
OK.
16
00:01:03,910 --> 00:01:11,230
So again nothing crazy if I go to the about page its exact same thing except for the about ally doesn't
17
00:01:11,230 --> 00:01:12,190
have an anchor tag.
18
00:01:12,340 --> 00:01:14,760
And then same with log in OK.
19
00:01:14,770 --> 00:01:24,300
So let's talk about CSX the way that we would add CSX to something like this is while we create a CSX
20
00:01:24,310 --> 00:01:25,960
file so let's do that.
21
00:01:25,960 --> 00:01:29,910
I'm going to create a new file that I'm going to save.
22
00:01:30,280 --> 00:01:39,570
Let's call it style dot CSX if I save that you'll see at the bottom over here that sublime text now
23
00:01:39,570 --> 00:01:46,540
has CSX as the file to the rules with CSX are very simple.
24
00:01:46,660 --> 00:01:56,840
We essentially have a selector and then we have these squiggly brackets and within it we put our property
25
00:01:57,900 --> 00:02:00,640
semicolon and then value.
26
00:02:00,940 --> 00:02:05,730
Then we have this special character as well at the end and that is pretty much CSX.
27
00:02:05,740 --> 00:02:13,080
You know this you can write CSX just like a Chanel just a couple of syntactic rules.
28
00:02:13,210 --> 00:02:16,690
And once you get used to it it's very very simple.
29
00:02:16,690 --> 00:02:21,970
But obviously this doesn't really mean anything so let's write actual code here.
30
00:02:22,060 --> 00:02:27,090
I'm going to comment that out by again doing command slash and sublime text.
31
00:02:27,160 --> 00:02:34,660
You can see that the commenting is different than an HMO and let's say that we want to make this home
32
00:02:35,050 --> 00:02:42,490
text read the way we would do it is we want to select what's called the selector.
33
00:02:42,490 --> 00:02:47,070
So here we want to say that the H2 we want that to be read.
34
00:02:47,110 --> 00:02:52,870
So all I would say is each to curly brackets and then within here I want to say the property I want
35
00:02:52,870 --> 00:03:04,240
to change the color to the value that is read so if I say that and refresh while nothing happens and
36
00:03:04,360 --> 00:03:05,350
that's obvious right.
37
00:03:05,350 --> 00:03:10,810
Because how does this file know that this file exists.
38
00:03:10,810 --> 00:03:16,840
We have to link it somehow and we do that in the head and we haven't talked too much about the hash
39
00:03:16,870 --> 00:03:19,270
tag element in the 80 mile section.
40
00:03:19,270 --> 00:03:28,180
But by now you can probably tell that head just contains information about what the page needs maybe
41
00:03:28,180 --> 00:03:36,280
not the stuff that we see on a web page other than the title but meta tags and information that we need
42
00:03:36,580 --> 00:03:38,710
for the Web site.
43
00:03:39,130 --> 00:03:50,270
So in here we can actually link to this style sheet that we call style that's SS with a link tag and
44
00:03:50,340 --> 00:03:56,370
this link tag allows us to link this Asian mail file to something else.
45
00:03:56,370 --> 00:03:59,400
And again so blind texts has something very useful here.
46
00:03:59,400 --> 00:04:03,640
If I had tab look at that it auto fills it for me.
47
00:04:03,640 --> 00:04:08,140
These are the standard attributes that you'll see to link to CSX.
48
00:04:08,170 --> 00:04:12,130
So you just have to get used to it and eventually it'll become second nature.
49
00:04:12,130 --> 00:04:16,320
So we have our yell here which is the added attribute for relation.
50
00:04:16,330 --> 00:04:22,780
It just specifies what relationship this link will have and we'll have the default style sheet and then
51
00:04:22,780 --> 00:04:28,780
for the type this is the media type you want to say that it's a text CSX file we're essentially telling
52
00:04:28,780 --> 00:04:34,290
a simple Hey just a heads up we're linking to a CSX file here and in the ref.
53
00:04:34,300 --> 00:04:35,380
This should be familiar.
54
00:04:35,380 --> 00:04:37,420
We're going to link to style that CSX.
55
00:04:37,790 --> 00:04:48,850
So if I type in style dot CSX and safe let's refresh turns red.
56
00:04:49,100 --> 00:04:56,040
And just to let you know that index that e-mail is in the same folder as style that's ISIS.
57
00:04:56,090 --> 00:04:59,690
We can check it over here if I click on exercise.
58
00:04:59,690 --> 00:05:00,710
You see that.
59
00:05:00,870 --> 00:05:01,240
Yep.
60
00:05:01,310 --> 00:05:02,210
I have style.
61
00:05:02,210 --> 00:05:04,120
That's the SS with index citation.
62
00:05:05,330 --> 00:05:05,740
Perfect.
63
00:05:06,310 --> 00:05:06,670
OK.
64
00:05:06,680 --> 00:05:13,130
Now what if we also want to make the paragraph over here the separate color as well.
65
00:05:13,130 --> 00:05:23,050
Well again we would do the selector and then we'll do color let's do pink I save refresh and it's pink.
66
00:05:23,200 --> 00:05:29,100
Hopefully you can see that you also see here that sublime text does some really nice color ring for
67
00:05:29,100 --> 00:05:29,430
us.
68
00:05:29,490 --> 00:05:35,730
So five for example I put a property that doesn't exist like a misspelled color well you see that it
69
00:05:35,730 --> 00:05:40,200
doesn't highlighted properly with the blue color and you know that you've made a mistake again another
70
00:05:40,200 --> 00:05:45,150
great feature of sublime text so see what does it actually stand for.
71
00:05:45,150 --> 00:05:49,950
Well it stands for cascading style sheets and style sheets.
72
00:05:49,950 --> 00:05:56,220
That makes sense that you know we're creating style sheets but what does cascading mean cascading means
73
00:05:56,220 --> 00:06:05,830
that it always takes the selector that is at the end and that's simplified terms but I want to demonstrate
74
00:06:05,830 --> 00:06:07,420
for you what that means.
75
00:06:07,450 --> 00:06:16,060
So let's say at the bottom over here I do this again paragraph I want Color to be Green Well if I save
76
00:06:16,060 --> 00:06:17,500
this what do you think will happen.
77
00:06:17,680 --> 00:06:22,210
Let's refresh and see it turns green and why is that.
78
00:06:22,210 --> 00:06:24,540
Well because it's cascading.
79
00:06:24,760 --> 00:06:34,650
It's saying OK I'll set H to to read OK I'll set paragraph to pink and then it says OK I'll set P. to
80
00:06:34,840 --> 00:06:39,400
green so we can see here as it trickles down and cascades.
81
00:06:39,400 --> 00:06:44,630
It takes the last input that it receives for a specific selector.
82
00:06:44,760 --> 00:06:49,670
We'll get more into the cascading effects of CSX in a later video.
83
00:06:49,700 --> 00:06:53,610
But I want you to understand the basic concept around it.
84
00:06:53,730 --> 00:06:54,190
OK.
85
00:06:54,270 --> 00:06:58,590
I also wanted to show you something cool they can do with Chrome and we did this in the first couple
86
00:06:58,590 --> 00:07:01,710
of video series but now you'll actually understand what I mean.
87
00:07:01,710 --> 00:07:09,000
So again view developer developer tools and from now on I'll be using this shortcut to open it and you'll
88
00:07:09,000 --> 00:07:11,910
be able to do it as well.
89
00:07:12,030 --> 00:07:15,110
And if you remember we have our style tab.
90
00:07:15,210 --> 00:07:21,260
And if we click on the style tab we have the team on the left styles over here and nothing for the styles
91
00:07:21,810 --> 00:07:29,740
but if I now go in to my home and I click on that I'll show you color red.
92
00:07:29,740 --> 00:07:38,560
So Google Chrome or allows us to see our CSF styles so I can even add stuff here and I could say background
93
00:07:38,680 --> 00:07:44,430
color and let's do black look at that.
94
00:07:44,430 --> 00:07:48,140
So this is a really good way to play with your Web site and add colors.
95
00:07:48,150 --> 00:07:50,190
You can check and uncheck here.
96
00:07:50,280 --> 00:07:56,250
And also if you see something on a Web site that you really really like you can go to that element.
97
00:07:56,310 --> 00:07:56,740
Let's.
98
00:07:56,820 --> 00:07:57,720
Let's try it off here.
99
00:07:57,720 --> 00:08:00,460
Let's go to weight.
100
00:08:00,490 --> 00:08:11,560
But why dot.com and let's say that we really really want to know how this was made.
101
00:08:11,660 --> 00:08:18,560
We can right click do inspect or take us exactly to that element.
102
00:08:18,570 --> 00:08:25,070
And then we can see here some of the properties to assess properties that they've used same year.
103
00:08:25,070 --> 00:08:27,360
I can see that the background color is this.
104
00:08:27,530 --> 00:08:28,400
And so on and so forth.
105
00:08:29,740 --> 00:08:32,520
Okay let's close that for now.
106
00:08:32,550 --> 00:08:36,590
The last thing I want to leave you with is this closes.
107
00:08:36,690 --> 00:08:44,400
What if I also want the about page to have stars and same with the log in page.
108
00:08:44,490 --> 00:08:51,460
As you can see there's no style for these ones but we want the same thing for the about and log in page.
109
00:08:51,480 --> 00:09:01,700
Well as you can imagine we copy the link tag and we go to about we link it onto here and then log in
110
00:09:01,910 --> 00:09:04,300
we can again link it here.
111
00:09:04,310 --> 00:09:12,080
I save both of these files and now if I refresh and go to about look at that we have our styles.
112
00:09:13,300 --> 00:09:17,650
And you may be wondering well what if I want different styles from maybe for the logging.
113
00:09:17,680 --> 00:09:19,750
I want this to be blue instead.
114
00:09:19,750 --> 00:09:26,380
Well we can actually create multiple style sheets so I can say for example let's create a new file and
115
00:09:26,380 --> 00:09:31,690
we'll call it style to dot CSX.
116
00:09:31,810 --> 00:09:43,050
I save that and this time I'm going to say that I want my page to to have color blue I say that I go
117
00:09:43,050 --> 00:09:49,920
in to my log in e-mail and now I'll make log in reference.
118
00:09:49,920 --> 00:09:52,050
The second style sheet instead of the first one.
119
00:09:52,980 --> 00:10:02,330
So now if I refresh log in is referencing our style to see SS but all the other ones are still referencing
120
00:10:02,840 --> 00:10:04,520
the old one.
121
00:10:04,610 --> 00:10:05,210
Okay I lied.
122
00:10:05,210 --> 00:10:13,130
There is one has thing that I want to add and that is that this is the common way of adding styles but
123
00:10:13,190 --> 00:10:18,620
there's actually two other ways that you won't see as often especially when you're starting off.
124
00:10:18,620 --> 00:10:21,650
But I wanted to show it to you so that you're not surprised.
125
00:10:22,800 --> 00:10:26,540
The first way of doing it is something called inline styles.
126
00:10:26,700 --> 00:10:34,170
And this was the original way that we incorporated styles into our A.T.M. and that is by specifying
127
00:10:34,170 --> 00:10:38,880
within the element let's say let's go with header over here.
128
00:10:39,120 --> 00:10:40,590
We want to say style.
129
00:10:40,650 --> 00:10:42,930
So it has a style attribute.
130
00:10:42,930 --> 00:10:54,220
And then within here we can do background color must do green and refresh and we're at the about page
131
00:10:54,220 --> 00:10:58,330
right now we changed that for index that I see and also let's go over here and look at that.
132
00:10:58,420 --> 00:11:05,660
We have the green background and if you want to add more again we do color red.
133
00:11:05,800 --> 00:11:09,900
Let's save and refresh and look at that.
134
00:11:09,940 --> 00:11:15,610
The header has the color red and you'll see here that these ones are still purple wall because they
135
00:11:15,610 --> 00:11:18,810
are linked tags and they have the default linking.
136
00:11:18,810 --> 00:11:19,690
OK.
137
00:11:19,930 --> 00:11:21,840
So that's one way.
138
00:11:21,970 --> 00:11:25,670
And third and last way is in the head.
139
00:11:25,690 --> 00:11:34,130
You can actually create stealth tax and then within these style tags you can enter CSX.
140
00:11:34,140 --> 00:11:41,880
So if you just refresh here so we have a fresh clean slate I can now say to ally this time so all the
141
00:11:41,880 --> 00:11:55,690
lists I want the lists to have background color of purple so how save this and refresh everything is
142
00:11:55,690 --> 00:11:58,160
purple and that looks pretty yucky.
143
00:11:58,180 --> 00:12:05,940
You can keep adding stuff on here and I guess a color white save refresh and it change the color to
144
00:12:05,950 --> 00:12:07,540
white.
145
00:12:07,600 --> 00:12:11,320
Now you may be wondering why don't we just do it like this.
146
00:12:11,320 --> 00:12:16,000
This seems a lot simpler than linking to another CFS file.
147
00:12:16,000 --> 00:12:20,550
Well the reason is that for this Web site everything is fairly small.
148
00:12:20,560 --> 00:12:22,120
It's just a couple lines of CSF.
149
00:12:22,150 --> 00:12:27,130
But you can imagine with Web sites as they get bigger and bigger you'll have hundreds and hundreds of
150
00:12:27,130 --> 00:12:33,890
lines of CSX and having one massive file will be very very challenging to maintain.
151
00:12:33,910 --> 00:12:40,040
You can also think of it as if you were working on an HMO and you also had a team of designers.
152
00:12:40,150 --> 00:12:42,640
Now we're working on a CSX file.
153
00:12:42,640 --> 00:12:49,690
You want to have a separation where you have some team members working on the CSX and then some team
154
00:12:49,690 --> 00:12:52,390
members working on the HMO.
155
00:12:52,630 --> 00:12:58,480
And that is a concept called separation of concerns and it's a fancy way of saying that everybody just
156
00:12:58,480 --> 00:13:00,790
worry about what they're good at.
157
00:13:00,790 --> 00:13:07,590
So HMO just worry about text and CSX just worry about styles.
158
00:13:07,720 --> 00:13:13,060
This phrase separation of concerns is something that will encounter throughout later videos when we
159
00:13:13,060 --> 00:13:20,230
get into javascript and react and it's a very very important concept in web development and computer
160
00:13:20,230 --> 00:13:20,940
science in general.
161
00:13:20,950 --> 00:13:22,510
So we will get back to that.
162
00:13:22,570 --> 00:13:25,270
It'll be a phrase that will keep coming up.
163
00:13:25,330 --> 00:13:29,010
So for now let's delete this.
164
00:13:29,110 --> 00:13:31,030
Let's keep things the way that we have it.
165
00:13:31,180 --> 00:13:37,660
Let's refresh and in the next video I'm going to show you a couple of CSX properties that are more exciting
166
00:13:37,660 --> 00:13:40,420
than just color and background.
167
00:13:40,420 --> 00:13:42,030
I'll see you that one by.
16819
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.