CSS Selectors

Transcript

Hi. Were back and in today’s lesson we are going to explore an important tool – Style Tags.

Lets go!

Check this out, I want all of my paragraphs to have 18 pixel font and a line height of 1.4 so they look consistent. This means I have to copy and paste my style seven different times. And if I add another paragraph later on, I'll have to remember to copy the styles all over again.

Ugh!

Style attributes are pretty terrible, especially as you add more content to your web page. Fortunately, we have style tags. These awesome tags let you code CSS and your HTML file in one organized place. You put the style tags at the top of your HTML file. And you'll need to learn a new slightly different way to write CSS -- a much better way then just writing style attributes.  

In the style tags, you use CSS selectors to tell your browser which tags to select for styling. If I want to select all of the paragraphs, I use the p type selector.  You can select all of the H paragraphs, by using an h1 type selector, and so on. This is called a type selector, because it selects all of the tags that match the tags name in your HTML. 

Let me show you an example by selecting all of my paragraphs. I'll start with the character P. Then I'll code a set of curly braces, you’ll put all of your paragraph styles inside these curly braces. 

This lets me remove the style attributes from my paragraphs and sets the font size and line height for my paragraphs with MUCH less code. This is one of the most important lessons of coding. If you find yourself repeating code over and over again, there's probably a better way to do it. Great programmers do their best to limit the amount of times they repeat the same kind of code. 

This concept is called “Don't Repeat Yourself” or DRY for short in English. Selectors allow you to DRY up your code by using the same styles for tags of the same type. Style attributes are officially code garbage, so keep them out of your HTML.

Lets move on to some more tags in the next lesson.

Ill see you there.