Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we're going to create our remaining CSS rules. Let's come over to the CSS Styles panel. Let's create a new rule. First one is going to be a tag, p tag. Let's click OK. Under the Box properties for a p tag, we want to just set the margins to 0 on all sides. Click OK. Let's create another rule. This one's also going to be a tag. Select the a tag. This is going to be for links. For links we want to come down to color inside of custom color inside of here.
We're going to type #bf572c, and then click OK. Let's create another rule. This would be a Compound rule, a. Let's come over here and choose :hover. We're going to add a pseudo class onto here. What we're going to do is come in here set the Color to black. So when I roll over the hyperlinks, they'll change black. Let's click OK.
Let's create another rule. This one is also going to be a Compound rule. This one is going to be .faq .letter_q. Let's click OK. First, let's go to the Box properties. We're going to set a width on this to 40 pixels; we're going to set a height of 50 pixels. Let's come over to Background properties. Let's choose Browse > Desktop > Images in the myFAQ folder.
Let's come over and choose q.png. Click Choose. For Background-position, let's choose 0 on the X and 0 on the Y. Then let's come over to the Positioning properties. Under Position, let's set absolute. For Top we're going to choose 20 pixels, and for Left we're going to choose 25 pixels. Then we're going to say OK. Create one more rule. This is also going to be a Compound rule, faq .letter_a. Let's choose OK.
Box properties, we're going to set a width of 43 pixels, a height of 40 pixels. Let's go to Background settings. For Background-image choose Browse. Let's select a.png. Click Choose. Background-position, 0 on the X and 0 on the Y. Positioning properties, let's come down and choose absolute. For the Top let's choose 42 pixels and for the Left let's type in 23 pixels. Then click OK. Now that we have all of our HTML and CSS in place, in the next movie we'll work on a script that will inject the divs for the Q and the A into each one of the questions, so we don't have to manually put them into our page.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66493 Viewers
61 Video lessons · 96920 Viewers
56 Video lessons · 110602 Viewers
82 Video lessons · 105187 Viewers
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.