1
00:00:00,450 --> 00:00:04,920
There are two ways to affect the style
of an element on a webpage with jQuery.

2
00:00:04,920 --> 00:00:09,980
Manipulating the CSS directly, or adding,
or removing the class of an element.

3
00:00:09,980 --> 00:00:13,020
We've already seen a bit
of the CSS method.

4
00:00:13,020 --> 00:00:17,433
It works like the other manipulation
methods as a getter and a setter.

5
00:00:17,433 --> 00:00:22,400
The first parameter this method takes
is a CSS rule you wanna get or change.

6
00:00:22,400 --> 00:00:24,350
If the second parameter is present,

7
00:00:24,350 --> 00:00:29,245
the CSS method will set the value of
the CSS rule to whatever you pass in.

8
00:00:29,245 --> 00:00:34,190
jQuery gives you a few options for adding
or removing classes from an element.

9
00:00:34,190 --> 00:00:38,790
To add a class to an element, use the
addClass method with the name of the class

10
00:00:38,790 --> 00:00:40,740
you want to apply to the element.

11
00:00:40,740 --> 00:00:43,400
The removeClass method does the opposite.

12
00:00:43,400 --> 00:00:46,340
While the toggle class method
toggles between adding and

13
00:00:46,340 --> 00:00:48,460
removing the class on an element.

14
00:00:48,460 --> 00:00:51,470
Let's see this in action
using our list of links.

15
00:00:51,470 --> 00:00:52,696
In the app.js file,

16
00:00:52,696 --> 00:00:56,590
we'll apply a background color of
light gray to every odd element.

17
00:00:57,600 --> 00:01:01,770
We can do this by calling the CSS
method on the odd elements.

18
00:01:01,770 --> 00:01:06,230
Remember that this odd variable refers
to this jQuery selection we made in

19
00:01:06,230 --> 00:01:09,490
the previous video,
which selects all the odd elements.

20
00:01:12,760 --> 00:01:16,710
Then we can pass in the name of the style
property that we want to affect,

21
00:01:16,710 --> 00:01:18,970
which is background color.

22
00:01:18,970 --> 00:01:23,601
Notice here, because this will trip you up
at some point, if you were to write this

23
00:01:23,601 --> 00:01:29,850
rule directly into CSS, you'd write it
with a hyphen, which is called kabob case.

24
00:01:29,850 --> 00:01:34,860
But when you're using JavaScript, you'll
use camel case, which means to lowercase

25
00:01:34,860 --> 00:01:39,650
the first word, and
then capitalize each new word after that.

26
00:01:39,650 --> 00:01:44,540
The second parameter is the value you
want to set or change the property to.

27
00:01:44,540 --> 00:01:48,500
In our case let's change
it to 'lightgrey'.

28
00:01:48,500 --> 00:01:50,650
Let's save and preview the file,

29
00:01:50,650 --> 00:01:55,260
and now you can see that every
other link has a grey background.

30
00:01:55,260 --> 00:01:59,350
It's worth mentioning here that setting
CSS is normally something you would just

31
00:01:59,350 --> 00:02:01,350
do in your CSS file.

32
00:02:01,350 --> 00:02:06,230
You may rarely encounter a good reason
to use jQuery CSS method, however,

33
00:02:06,230 --> 00:02:08,818
it's still helpful to know that it exists,
and how to use it.

34
00:02:08,818 --> 00:02:13,910
Next, in app.js,
let's add some classes to our links.

35
00:02:13,910 --> 00:02:16,750
I'll delete this line because
it was just for demonstration.

36
00:02:17,930 --> 00:02:21,500
For the secure links let's
add a class of secure.

37
00:02:25,170 --> 00:02:28,135
This will add a little
tag next to each link.

38
00:02:28,135 --> 00:02:31,327
I'll show you that in the CSS.

39
00:02:35,396 --> 00:02:37,238
I have a class called secure.

40
00:02:40,083 --> 00:02:43,237
Let's save and preview,
and as you can see,

41
00:02:43,237 --> 00:02:47,240
the Safe flag appears next
to every secure link.

42
00:02:47,240 --> 00:02:50,730
Now let's add the class
of PDF to the PDF links.

43
00:02:51,840 --> 00:02:55,313
To do that we'll use our
PDFs variable up here.

44
00:02:59,067 --> 00:03:03,869
Call addClass, And

45
00:03:03,869 --> 00:03:11,145
we'll add the class of pdf which
you can see here in our CSS.

46
00:03:13,466 --> 00:03:14,913
Save and preview.

47
00:03:16,552 --> 00:03:20,390
And the Locked flag will
appear next to every PDF link