Dev Tools in CSS

Transcript

Hey. Welcome back. 

You're a texting machine now, you can position your text, change its color, and you can change the font and all kinds of different ways. Since you've learned so much about styling text, we're going to move on to something new. 

But first, we have to investigate the Chrome Developer Tools.  I can pull up the dev tools by right clicking the page and clicking the inspect option. Now I can click the Select icon to get a closer look at one of my tags. I’ll select the header. 

If you look to the far right in the developer tools, you'll see a tab called styles. Under styles, you can add your own CSS declarations to the tag you selected. I added a black background color to my header. 

See how it changed immediately in the browser?

If I refresh the page, the styles I added go away. This is a great way to experiment with different styles without actually changing the CSS in your HTML file. Once you see something you like, you can copy and paste the code into your HTML file. Just cool feature that I wanted to introduce you to. 

Ok. Lets move forward to the next lesson.