Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Inside the city_info div, let's come in here and delete that default text, and let's start by typing City. We'll hit a Return, type Country, hit Return. Description goes here. Now let's select City. In the Properties panel let's come down under Format and let's choose Heading 2. For Country let's select Country and come down to Format and choose Heading 3. And then for Description goes here...let's just make sure that's set to a Paragraph setting.
With that in place, let's come over to the CSS Styles panel. Let's create a new rule. I'll move this over a little bit. We are going to create a compound rule. We are going to type .city_info h2. We want to target h2 tags only if they are inside of the city_info div. Let's click OK. Move this over. For Font-size, we want to choose 18 pixels. Let's come over to Box properties.
For Margin we are going to put 0 for all. Let's click Apply. Now we'll see city actually goes away up to the top of that container, since there's no margin across the top. Let's click OK. Let's create another new rule, Compound, city_info h3. Let's click OK. These are going to have a Font-size of 12. We are going to transform the text to be all uppercase.
Next, for Color, let's type #2C3748. This is going to give us that really dark cobalt blue color. Lastly, let's go over to the Block settings. For Letter-spacing we are going to type 4 pixels. Click Apply. We'll see the Country text to be transformed to all uppercase, 12 pixels, letters are spaced out 4 pixels.
Lastly, let's go to Box properties. For Margin, let's turn off Same for all. For the Top and the Right we are going to choose 0. For the bottom we are going to put 12 pixels and then 0 on the Left. Click Apply. That will make the h3 tuck up right underneath the h2. Let's click OK. One more rule. Compound, city_info p. All we are going to set in here under the Box properties for Margin, turn off Same for all, Top and Right, 0, 12 on the Bottom, 0 on the Left. Click OK.
Now that we have all of the city information styled in the next movie we'll add specific city information into the HTML code that corresponds to each of the dots on the map.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.