Pular para o conteúdo principal

Se você está vendo esta mensagem, significa que estamos tendo problemas para carregar recursos externos em nosso website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Transcrição de Using inspect element for CSS styles

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