WEBVTT FILE





1
00:00:05.540 --> 00:00:11.730
in this video we can learn how to style links we're gonna be using the same

2
00:00:11.730 --> 00:00:17.369
source code as in the given span file and now we're gonna create a link in

3
00:00:17.369 --> 00:00:24.869
each of the three dips so this starts with the Facebook tip and it's all a

4
00:00:24.869 --> 00:00:32.430
paragraph with a link inside it so the syntax again for links is we need to use

5
00:00:32.430 --> 00:00:43.379
the a tag and then between the two a tags we can put some text and in the

6
00:00:43.379 --> 00:00:55.649
open tag we need to use an ace ref okay so let's set this to the Amazon home

7
00:00:55.649 --> 00:01:16.770
page for instance let's add the same paragraph to the other two tips and

8
00:01:16.770 --> 00:01:29.790
change the link to this puts evade or come for instance and let's use cnn.com

9
00:01:29.790 --> 00:01:38.970
for example okay so now we want to style these links so at the moment you can see

10
00:01:38.970 --> 00:01:45.630
that's the default style for these links as they are not visited yet they are all

11
00:01:45.630 --> 00:01:57.180
blue and underlined okay so the syntax to style the links of the whole webpage

12
00:01:57.180 --> 00:02:07.049
is by using the a tag or the a letter followed by Curran and then we need to

13
00:02:07.049 --> 00:02:13.980
specify that we are styling the links as they are okay so if we set this

14
00:02:13.980 --> 00:02:23.549
- if we change the color for instance I'll choose a specific color that we can

15
00:02:23.549 --> 00:02:29.390
see that all the links they change depending on which color we are using

16
00:02:29.390 --> 00:02:40.319
all right now if we want to style links when we hover on these links so then we

17
00:02:40.319 --> 00:02:50.459
need to use a colon and then hover and for example we can set the font size for

18
00:02:50.459 --> 00:02:56.430
instance - 3 M for example so when we hover on any of these links we can see

19
00:02:56.430 --> 00:03:04.079
that the font size gets bigger okay now if we want to style links that are

20
00:03:04.079 --> 00:03:12.840
inside the Facebook div or links that are inside any div of glass blue box

21
00:03:12.840 --> 00:03:18.440
then there is another syntax we need to use here so through styling links inside

22
00:03:18.440 --> 00:03:26.160
tips of class blue box so so that's gonna be there for all by a dot followed

23
00:03:26.160 --> 00:03:34.230
by blue box okay and then space and then we use the same syntax we used at the

24
00:03:34.230 --> 00:03:42.980
beginning so a kunana then we need to specify here so there is another

25
00:03:44.060 --> 00:03:54.890
parameter we can use is it's the active a state of the link so basically what we

26
00:03:54.890 --> 00:04:10.610
seen here is when the link is active we want for example the font size to be 4m

27
00:04:10.610 --> 00:04:21.890
for example and if we click on the link and we hold the mouse key then the link

28
00:04:21.890 --> 00:04:29.840
now is active and we can see that's the font the font size is for M okay it's

29
00:04:29.840 --> 00:04:36.650
right again so if you hover font size is 3 M if we click and we hold the mouse

30
00:04:36.650 --> 00:04:44.720
key then it becomes 4 m all right if we look at the other links if we hover it's

31
00:04:44.720 --> 00:04:51.230
also 3 M right but if we click on the link and we hold the mouse key at the

32
00:04:51.230 --> 00:04:59.780
moment we don't have any styling for that okay so let's try the link inside

33
00:04:59.780 --> 00:05:09.740
Apple div dot yellow box and then a and now we want to style the link when it's

34
00:05:09.740 --> 00:05:16.700
already visited so the syntax gonna be visited and then we can change for

35
00:05:16.700 --> 00:05:23.270
instance the color so before we do that if we visit the link

36
00:05:23.270 --> 00:05:27.470
normally the link will turn will turn purple so if we visit for any for

37
00:05:27.470 --> 00:05:39.560
instance the Microsoft's link then now we can see that it's by default it

38
00:05:39.560 --> 00:05:47.510
becomes purple but now we want to change the settings for the links inside up all

39
00:05:47.510 --> 00:05:53.290
so that when they are visited so we want for instance their color to be

40
00:05:54.639 --> 00:06:02.889
let's set the color to orange for example okay let's try it now let's

41
00:06:02.889 --> 00:06:11.889
visit our link and now we can see that the link turned orange okay so there are

42
00:06:11.889 --> 00:06:18.819
some limitations to visits links so for example we can't if we try the color we

43
00:06:18.819 --> 00:06:24.400
work but with Google Chrome if we try the font size for instance for visited

44
00:06:24.400 --> 00:06:33.039
link links if we set it for instance to 6m it doesn't work so just bear this in

45
00:06:33.039 --> 00:06:37.419
mind the visited properties or settings for

46
00:06:37.419 --> 00:06:41.710
links we've caused some limitations there so color for instance is going to

47
00:06:41.710 --> 00:06:48.250
work with Google Chrome but usually other parameters are not gonna work okay

48
00:06:48.250 --> 00:06:59.039
so that's how we style links in the next video you're going to move to gradients