Original subtitles

1 1

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.