1
00:00:05,630 --> 00:00:09,860
Welcome back, everyone, in this lecture in section, we're going to be discussing CSIS.

2
00:00:11,120 --> 00:00:16,160
Now that we understand the very basics of HTML tax and elements, let's go ahead and move on to a brief

3
00:00:16,160 --> 00:00:22,610
introduction to CSIS, which stands for cascading style sheets, and CSIS is really designed to separate

4
00:00:22,610 --> 00:00:26,540
out the styling of each two elements into a separate document.

5
00:00:28,050 --> 00:00:34,800
Now, we've already seen a small example of the style attribute, and all elements have a style attribute,

6
00:00:34,950 --> 00:00:37,410
which is why style is known as a global attribute.

7
00:00:37,620 --> 00:00:39,120
We could apply this to any element.

8
00:00:39,510 --> 00:00:45,690
For example, let's imagine on our HTML document, we have a paragraph element tag and then inside this,

9
00:00:45,690 --> 00:00:51,240
we have text and I wanted this text to show up as the color green on the actual user web page.

10
00:00:51,540 --> 00:00:57,660
What I could do is for this specific element I could call the style attribute and then set up the color,

11
00:00:57,660 --> 00:00:58,980
property and value for it.

12
00:00:59,520 --> 00:01:02,760
So here I have style the attribute inside my paragraph tag.

13
00:01:03,210 --> 00:01:07,050
And then I have the style property, which is color, and I've given it the value green.

14
00:01:07,680 --> 00:01:13,230
Now it's going to be inefficient is I would have to do this for every single paragraph element on the

15
00:01:13,230 --> 00:01:13,650
page.

16
00:01:13,860 --> 00:01:17,130
If I actually wanted to change all the text on the page to green.

17
00:01:18,490 --> 00:01:23,740
So clearly, it will be a lot more efficient if I could separate out these style property assignments

18
00:01:23,740 --> 00:01:31,270
to another CSV file and then leak that CSV file to the HTML, which would then also allow us to assign

19
00:01:31,270 --> 00:01:35,770
styles to multiple elements at once using what is known as selectors.

20
00:01:36,130 --> 00:01:42,220
So in the CSV file, I'll be able to say something like for all paragraph tags in the HTML change the

21
00:01:42,220 --> 00:01:47,740
color of the text to green, rather than having to do that for every single paragraph element in my

22
00:01:47,950 --> 00:01:48,760
HTML document.

23
00:01:50,510 --> 00:01:55,880
Now, you should know, after we learn about CSIS, the very next section of the course is us moving

24
00:01:55,880 --> 00:02:00,380
on to discuss Bootstrap, which is a framework for the front end that is actually going to provide us

25
00:02:00,380 --> 00:02:04,940
with templates for really quick and easy styling that we could later customize ourselves.

26
00:02:05,270 --> 00:02:10,130
I just want to point out that we're not really going to dive too deep into the success of our web sites

27
00:02:10,340 --> 00:02:11,480
throughout the rest of the course.

28
00:02:11,720 --> 00:02:16,640
We just want to give you enough knowledge to understand what's going on when we see something like bootstrap.

29
00:02:17,950 --> 00:02:22,540
So again, the goal of this action is not to make it familiar every possible success property, but

30
00:02:22,540 --> 00:02:28,630
to know enough about it to later style and customize your own websites and be able to read online documentation.

31
00:02:28,990 --> 00:02:33,490
And later on, when you see how well bootstrap works, you're going to be able to just really quickly

32
00:02:33,490 --> 00:02:37,060
make really good looking sites without having to write too much code.

33
00:02:38,220 --> 00:02:40,950
OK, so what are we actually going to learn in this section?

34
00:02:41,310 --> 00:02:46,800
We're going to talk about just basic styling, starting with color and how to connect X-File to an HTML

35
00:02:46,800 --> 00:02:49,260
file and begin to style elements.

36
00:02:49,560 --> 00:02:51,750
Then we'll talk about some common style attributes.

37
00:02:52,050 --> 00:02:53,190
We'll talk about selectors.

38
00:02:53,370 --> 00:02:59,070
That is things like class and I.D. We'll discuss fonts, how to change the font on your website, and

39
00:02:59,070 --> 00:03:04,110
then we'll talk about box models, which allows us to actually have spacing and padding around elements.

40
00:03:05,010 --> 00:03:06,210
OK, let's get started.

41
00:03:06,360 --> 00:03:07,320
I'll see you at the next lecture.