Groups in CSS

Transcript

Hello. Nice to see you again. 

In our last lesson we introduced selectors and how they help make your code DRY, and efficiently style your page.  On mine, I put a green background behind the rank one heading and on the welcome message I put a different background color behind the pets I featured. 

To do this, I'll show you how to group blocks of content together, and then how to use selectors to change their background color.  To group content, you'll have to learn a few more HTML tags and some coding vocabulary 

Lets start with Header tags. Header tags are used to group introductory content. This is the stuff that's generally at the top of your page.  I've wrapped the header tags around my title and welcome message, which are specifically for introducing what my webpage is about. An added bonus of grouping tags properly is that it allows you to select and style them. 

Now, I can select the header tag, and give it a new property, background color, and the color code value. Although headings are used to divide your page into clear sections, you can group these sections in your HTML even more clearly with the Section tags.  In most cases, you'll put the open section tag right before a heading and the close section tag where the section ends.   Just like the header this allows us to select a section and style it. This is how I change the background color of my featured pet sections. 

You can also use the footer tags to group content. Originally, I put the text right in the footer because I didn't have much text. However, you might want more than just a publish date in your footer. You might add contact info to when other additional details about your page. 

To reorganize my code a little I'll wrap <p> tags around the publish date and another set of <p> tags around my email. Now, the start and end of my page are in groups that are very easy to identify in my HTML code, as are all the sections in between. Grouping content keeps your code organized and easy to style.

You can also use the footer tags to group content. Originally, I put the text right in the footer because I didn't have much text. However, you might want more than just a publish date in your footer. You might add contact info to when other additional details about your page. 

To reorganize my code a little I'll wrap <p> tags around the publish date and another set of <p> tags around my email. 

Now, the start and end of my page are in groups that are very easy to identify in my HTML code, as are all the sections in between. Grouping content keeps your code organized and easy to style.

Lets move on. The next two lessons are dedicated to a coding concept called Descendants.

Are you ready?