Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating project folders
- Adding in sample question and answer content
- Creating CSS rules for graphics
- Animating the graphic states
Skill Level Intermediate
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.