Using inspect element for CSS styles

- [Voiceover] Here I'm checking out a webpage that a student made about Joan of Arc. And it's a really good-looking webpage. I really like it. So I'm curious what CSS styles are making it look the way it looks. Now, I've got the code right here, so I could just look through it and get a feel this way, but I can also use "Inspect Element" to figure it out even faster. Let me show you. Let's say I want to know about this text here and what's making it look the way it looks. I'm going to right-click on it, click "Inspect Element," wait for this thing to pop up. So we can see the text is highlighted, this is a '<p>' tag here, and it has a class name. And now I can see, I have this "Styles" panel. This is where all the CSS for a particular element shows up. And we can see all the different rules that apply to it, and what order they get applied. So this 'title' rule is making it so that it's center-aligned and bold, we can see that. And this other rule, the 'i1', is making it so that it has a .9m font size and .26 opacity. OK, cool, now I might think that maybe it should be more opaque to be a little more readable. I can actually just go in here and play with it, and see what it looks like. And this will just update the preview. It's not actually updating their code. It's just updating how it looks in the browser right now. If I wanted them to update their code, I have to tell them like "Hey, why don't you try this instead? "I think this will be more readable." So I can play around with any of these values here. I can also add new properties. Oh, that was big. So if I think that maybe it should be a different color, I could go in and say 'color' and then it gives me a bunch to pick from. Or, I can write in a hexadecimal, and then I can get a little color-picker, and say I really like this green instead. So I can just really easily play around with things and see what they look like. So when is this useful? Well it's useful if you're curious about the CSS of another person's webpage and you're trying to understand how they achieved some particular effect. It's also useful if you're working on the design of a webpage that maybe you don't have access to the HTML for. You can go in, make some CSS changes, and then forward on those suggestions to whoever can change the HTML. And it's also just kind of fun to mess with other people's webpages.