␡
- The Element Family Tree
- Defining Styles Based on Context
- Working with Pseudo-classes
- Working with Pseudo-elements
- Defining Styles Based on Tag Attributes
- NEW IN CSS3: Querying the Media
- Inheriting Properties from a Parent
- Making a Declaration !important
- Determining the Cascade Order
- Putting It All Together
< Back
Page 10 of 10
This chapter is from the book
Putting It All Together
- Using the HTML code you created in Chapter 3, style all descendents of the paragraph tag to bold. This requires using the universal selector.
- Style all paragraph siblings. Turn all paragraphs that follow another paragraph to gray.
- Add hypertext links to your page, and then use the link pseudo-classes to style them. Remember to style all four link states.
- Style the first letter and first line of text of the first paragraph in your page. Start by styling the first line of all paragraphs and then use pseudo-classes to focus on the first paragraph.
- Style images with an alt tag value with a black rule and images that do not have a value with a red rule. This is useful for highlighting images you need to add alt values to.
- Style your page for print by hiding navigation and using a white background and dark text. You want to consider media other than screen for your designs.
- Play around with adding more styles and then changing the order to see how the order affects which styles are applied. Pay careful attention to the cascade order and how specificity affects that.
- Play around with adding !important to different styles to see how it affects which styles are applied. Remember, the !important property is very powerful and should only be used to help you style your page while working. The final design should be able to work without it.
< Back
Page 10 of 10