Voiceover: Welcome to the CSS basic section. 2 2
So far, we have used HTML 3 3
to put content on our webpage. 4 4
Now, we'll use some basic CSS to actually 5 5
style that content to make it look 6 6
the way we want it. 7 7
After this section, you will be able to build 8 8
a simple layout with some formatted content. 9 9
We will continue to work on this simple blog past webpage 10 10
that I showed you before. 11 11
So we will add some more content, 12 12
build a simple layout and style the whole thing. 13 13
After this section, we will be ready to start 14 14
on our killer website project. 15 15
So, what is CSS? 16 16
CSS stands for cascading style sheets. 17 17
CSS defines exactly how HTML elements should look. 18 18
It allows us to make a clear separation 19 19
between content and style. 20 20
HTML is the content and CSS is style. 21 21
These two images show the exact same HTML 22 22
with the only difference 23 23
that the website on the left side 24 24
has not been formatted with CSS yet. 25 25
It's just bare HTML, which doesn't look very good, 26 26
of course. 27 27
So how are we gonna use CSS in practice? 28 28
There are three ways to use CSS. 29 29
First, we can write CSS code 30 30
right inside an HTML tag using the style attribute. 31 31
Second, we can write CSS code in the head section 32 32
of an HTML document. 33 33
And third, CSS code can be put into an external file. 34 34
And this is what we're actually going to do. 35 35
Remember what I said about 36 36
how CSS allows us to separate content from style? 37 37
That is why we'll put all our visual styles 38 38
in a separate file 'cause it's a much cleaner solution 39 39
and therefore everybody does it that way. 40 40
So let's go back to brackets and do this. 41 41
So let's start by creating a new file 42 42
just as we did before with the HTML file. 43 43
So File, New 44 44
and then save it with command S or control S 45 45
and I will call it style.css. 46 46
Okay, that's it. 47 47
You see, now it appears here 48 48
in our project folder. 49 49
Now I'm going to go back to the HTML file 50 50
because now we have to tell the HTML file 51 51
in which CSS file the new styles will be. 52 52
So to link these two documents 53 53
we use the link tag in the HTML head 54 54
just like this. 55 55
Link. 56 56
And this is another element which has no closing text. 57 57
So it's just link. 58 58
I hope you remember HTML attributes 59 59
because we will use them right now. 60 60
So at start we tell the browser 61 61
that we want to link a style sheet. 62 62
So rel and style sheet. 63 63
Then next we 64 64
tell the HTML document 65 65
that it is a CSS file 66 66
and finally with the H ref attribute 67 67
we used before for our links, 68 68
we tell the document 69 69
where the CSS styles are. 70 70
Style.css, which is the file we just created before. 71 71
So hit enter and now 72 72
these two documents are linked. 73 73
Alright, now we are ready to start writing some CSS. 74 74
And let's do that in the next lecture.