The following files are required for this lesson:

• demo-selectors.zip
• demo-flex-order.zip

Introduction

This lesson will be taught in tw0 parts:

• Part 1: CSS Selectors
• Part 2: Flex Order

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps - Part 1: CSS Selectors

1. Download the demo-selectors.zip file and extract its contents to a folder named demo-selectors.
2. The completed output should look like:
   
3. You need to add some code to the index.html file:
   
   1. Add a flex container:
      
   2. Add <section> blocks inside the flex container:
      
   3. Add a <footer>:
      
      The output in your browser should look like:
      
4. Now you need to add style rules to the styles.css file:
   
   1. Add a .flex-container class:
      
      Question: What does this style rule do?
   2. Add styling for the <section> elements:
      
      
   3. As the individual <section> blocks do not appear, you need to use a pseudo-selector to target the styling of each <section>:
      1. first-child:
         
      2. last-child:
         
      3. >nth-child(2):
         
      4. nth-child(3):
         
         Refresh your browser to see:
         
      5. nth-last-child(3):
         
      6. nth-last-child(2):
         
         Refresh your browser to see the following making note of the colours you used for each <section>’s background:
         
   4. The <footer> needs to have a different background colour:
      
      
   5. The nth of type selector can be used to target the position of a child element. Each <section> has two <p> elements, thus you can target each of these using:
      
      
      Note: the font of the 1^st paragraph is now bolded and has a slight text shadow:
   6. Targeting the other paragraphs is done using:
      
      

Steps - Part 2: Flex Order

1. Download the demo-flex-order.zip file and extract its contents to a folder named demo-flex-order.
2. Open the index.html in your browser to see something like:
   
3. The completed output should look like:
   
   Question: What do you think we need to do to achieve the completed output?
4. Examine the styles.css file and make note of the two changes that need to be made.
   
   1. Add a media query to change the layout and order of the items:
      
      1. Add the media query:
         
      2. Change to a 3-column layout and space the <section> elements equally:
         
      3. Change the order of the items in the layout:
         
         
   2. Position items in the order of 6, 4, 2, 5, 3, 1. In your media query set the order of the other items:
      
      1. 4^th child:
         
      2. 2^nd child:
         
      3. 5^th child:
         
      4. 3^rd child:
         
      5. 1^st child:
         
         
5. Now you need to test the media query to see what is happening to the output:
   
   1. Width < 950px:
      
   2. Width >= 950px:
      

Activity

For extra practice, open the css-selectors-activity.pdf file and complete the activity.

Module Home

DMIT1530 Home