WEBVTT FILE





1
00:00:06.350 --> 00:00:12.230
in this video we're gonna learn the diff and span elements let's start with a dip

2
00:00:12.230 --> 00:00:18.869
ATF or division is an HTML section which groups are block elements and then the

3
00:00:18.869 --> 00:00:24.920
div is used to M style these elements using CSS okay let's start by creating

4
00:00:24.920 --> 00:00:34.410
our first a div the tank used for divs is div okay it is a block elements okay

5
00:00:34.410 --> 00:00:39.920
let's create a paragraph inside a div and let's call this first one Facebook

6
00:00:39.920 --> 00:00:50.579
let's create another div let's call it apple now let's have a 30 and we're

7
00:00:50.579 --> 00:00:54.170
gonna put this time Microsoft's in the paragraph

8
00:00:54.170 --> 00:01:00.270
okay now we want to style these tips so you gonna give each of them a class so

9
00:01:00.270 --> 00:01:03.830
for the first one I'm gonna give it a class and we're gonna call its blue box

10
00:01:03.830 --> 00:01:11.340
the second one we're gonna give it a class yellow box and the third one let's

11
00:01:11.340 --> 00:01:17.549
give it a class green box okay now we're going to go to the Style section and

12
00:01:17.549 --> 00:01:22.320
we're going to style the classes using these syntax we have learns so its dot

13
00:01:22.320 --> 00:01:28.740
followed by the name of the class okay so now we're gonna give the class a

14
00:01:28.740 --> 00:01:35.700
background color so the syntax is background color and there are several

15
00:01:35.700 --> 00:01:42.270
ways to choose a color the first one is by using the name of the color okay okay

16
00:01:42.270 --> 00:01:48.030
so also let's set the color of the text so it's by using color and unisys it to

17
00:01:48.030 --> 00:01:54.060
white also we can give the div a certain certain height so let's set it to 100

18
00:01:54.060 --> 00:02:05.040
pixels and let's give it a width and let's set it to auto okay

19
00:02:05.040 --> 00:02:15.120
all right now if we wanted to use the same color as the one in the facebook

20
00:02:15.120 --> 00:02:20.240
login page there is a nice way to do that let's go to the facebook login page

21
00:02:20.240 --> 00:02:25.050
okay I'm gonna use a Google Chrome extension it's called color pick

22
00:02:25.050 --> 00:02:31.410
eyedropper so if I click on the icon I can hover in the page and it can pick up

23
00:02:31.410 --> 00:02:35.790
any color I want so we want this color so I'm just gonna click left and I'm

24
00:02:35.790 --> 00:02:42.660
gonna copy this value so this value is the hexadecimal value of the color okay

25
00:02:42.660 --> 00:02:48.420
so the way to use it is by using first a number sign and then putting the value

26
00:02:48.420 --> 00:02:53.040
after the number sign and you can see that's the exact Facebook color is used

27
00:02:53.040 --> 00:03:04.530
now in the blue box tip okay let's style the next class so yellow box okay

28
00:03:04.530 --> 00:03:12.120
this gives a background color as well this time we're gonna use another Google

29
00:03:12.120 --> 00:03:18.989
Chrome extension to pick up a specific color so this time we're gonna use the

30
00:03:18.989 --> 00:03:24.420
colorzilla it's a nice extension as well I'm gonna go to the color picker so now

31
00:03:24.420 --> 00:03:29.790
we can use this tool to select any color we want and then the tool will translate

32
00:03:29.790 --> 00:03:34.620
the color into the different values so you've got the RGB values you cause the

33
00:03:34.620 --> 00:03:43.530
HSL values and also you've got the hexadecimal value so let's go for this

34
00:03:43.530 --> 00:03:51.080
color for instance and let's use the RGB value for instance okay

35
00:03:54.030 --> 00:04:00.130
let's give it a height as well of 100 pixels and let's give it a width of auto

36
00:04:00.130 --> 00:04:07.840
as well okay now we're going to move to the last one green box so dots green box

37
00:04:07.840 --> 00:04:19.450
and let's try this as well let's have a background color and let's okay this

38
00:04:19.450 --> 00:04:23.020
time we're going to use a different way of this in the color we're going to use

39
00:04:23.020 --> 00:04:28.810
a bracket extension so I'm going to go to the list of available extensions and

40
00:04:28.810 --> 00:04:50.160
I'm gonna look for a color picker I'm gonna go for this one let's install it

41
00:04:53.190 --> 00:04:58.600
okay now if you if you want to use this color picker all you need to do is click

42
00:04:58.600 --> 00:05:05.440
ctrl alt K and a box like this will show up and then you can select any color you

43
00:05:05.440 --> 00:05:08.020
want and that's gonna be translated to a

44
00:05:08.020 --> 00:05:16.710
value over here so let's go for a green color let's use this one for instance

45
00:05:18.889 --> 00:05:25.009
okay let's also give it a height of 100 pixels and keep the width

46
00:05:25.009 --> 00:05:32.030
okay all right okay so this is it's regarding divisions so we have used

47
00:05:32.030 --> 00:05:37.699
divisions to style block elements so all these paragraphs now are styled

48
00:05:37.699 --> 00:05:43.069
using the classes we have given to the different dips now let's go for spans so

49
00:05:43.069 --> 00:05:47.840
spans are in line elements which were which are used to group in line elements

50
00:05:47.840 --> 00:05:52.310
and style them using CSS so what we gonna do now we're gonna add some text

51
00:05:52.310 --> 00:05:59.270
to the Facebook paragraph let's say Facebook is great and now all all we

52
00:05:59.270 --> 00:06:05.300
want to do is to style this word only great okay so the way to do that is by

53
00:06:05.300 --> 00:06:12.740
using a span so we're gonna put the word inside a span okay

54
00:06:12.740 --> 00:06:18.319
and then we're gonna style the span so let's give this a class let's call is

55
00:06:18.319 --> 00:06:27.620
great for instance and we're gonna give it a style so dot great and let's give

56
00:06:27.620 --> 00:06:37.729
it a background color and let's use again ctrl alt K and let's go for a

57
00:06:37.729 --> 00:06:46.789
color let's go for this one for instance oh this one okay and now you can see

58
00:06:46.789 --> 00:06:55.129
that only that's word is styled with this background color okay so this is it

59
00:06:55.129 --> 00:07:00.169
regarding dips and spans they are really important when it comes to styling

60
00:07:00.169 --> 00:07:07.279
different HTML elements and the syntax is pretty easier and we're gonna keep

61
00:07:07.279 --> 00:07:14.620
using them in the next videos to do styling using CSS