In this exercise, you will create and modify style rules to learn more about how to place elements on a page using positions. An example of page element positions is shown in Figure 5-66. Figure 5-66 Grading Complete each task listed in this lab. Each task contains automated checks which are used to calculate your grade. You can use the Website Refresh button to refresh your website preview at any point. You can view a full-page version of your website by clicking the arrow in the top right corner of your website preview. When you have completed each task by clicking the checkbox, open the task list panel on the left navigation bar and click the "Submit" button. Perform the following tasks: Tasks Open index.html file and update the comment with your name (firstname lastname), the file name, and today’s date (MM/DD/YYYY). Open index.html in your browser to view the file. Add the text, CH 5 Extend Your Knowledge, to the title element. 4 Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules: Add a declaration for the position property with a value of -webkit-sticky. Add a declaration for the position property with a value of sticky. Add a declaration for the top property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position. 1 In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations: Add a declaration for the position property with a value of relative. Add another declaration for the top property and specify a value of 90px. Add another declaration for the left property with a value of 30px Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the relative div element to explain how the style rules affected the relative box. 1 In the styles.css file, locate the “fixed” comment and create a style rule for the fixed class selector with the following declarations: Add a declaration for the position property with a value of fixed. Add another declaration for the top property and specify a value of 90px. Add another declaration for the right property with a value of 10px. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the fixed div element to explain how the style rules affected the fixed box. 1 In the styles.css file, locate the “absolute” comment and create a style rule for the absolute class selector with the following declarations: Add a declaration for the position property with a value of absolute. Add another declaration for the bottom property and specify a 0 value. Add another declaration for the right property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the absolute div element to explain how the style rules affected the absolute box.
In this exercise, you will create and modify style rules to learn more about how to place elements on a page using positions. An example of page element positions is shown in Figure 5-66.
Figure 5-66
Grading
Complete each task listed in this lab. Each task contains automated checks which are used to calculate your grade. You can use the Website Refresh button to refresh your website preview at any point. You can view a full-page version of your website by clicking the arrow in the top right corner of your website preview. When you have completed each task by clicking the checkbox, open the task list panel on the left navigation bar and click the "Submit" button.
Perform the following tasks:
Open index.html file and update the comment with your name (firstname lastname), the file name, and today’s date (MM/DD/YYYY). Open index.html in your browser to view the file.
Add the text, CH 5 Extend Your Knowledge, to the title element.
Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules:
- Add a declaration for the position property with a value of -webkit-sticky.
- Add a declaration for the position property with a value of sticky.
- Add a declaration for the top property and specify a 0 value.
Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position.
In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations:
- Add a declaration for the position property with a value of relative.
- Add another declaration for the top property and specify a value of 90px.
- Add another declaration for the left property with a value of 30px
Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the relative div element to explain how the style rules affected the relative box.
In the styles.css file, locate the “fixed” comment and create a style rule for the fixed class selector with the following declarations:
- Add a declaration for the position property with a value of fixed.
- Add another declaration for the top property and specify a value of 90px.
- Add another declaration for the right property with a value of 10px.
Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the fixed div element to explain how the style rules affected the fixed box.
In the styles.css file, locate the “absolute” comment and create a style rule for the absolute class selector with the following declarations:
- Add a declaration for the position property with a value of absolute.
- Add another declaration for the bottom property and specify a 0 value.
- Add another declaration for the right property and specify a 0 value.
Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the absolute div element to explain how the style rules affected the absolute box.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
