Starting from:
$20
Practicing CSS Basics Solution
Step 1. In that window, duplicate the index.html file and rename the duplicate index2.html. Next, click down into the css folder and duplicate the site.css file and rename the duplicate site2.css—we are making copies of these files in order to preserve the original files, in case you wish to revisit the
“finished” and unaltered versions of the originals.
Step 2. Open the index2.html file in Sublime Text by either using the File menu Open File command in the program or by dragging the file from the folder window into the blank Sublime Text window.
Step 3. Complete the following edits and additions in the index2.html file:
A. Ensure that the externally linked CSS file reference in the <head portion of code correctly points to the site2.css file instead.
B. Create a new <section portion of code below the existing <section id=”main” that currently comprises most of the index2.html page.
C. Give this new <section an id of “secondary”
D. Within the new main2 <section, type or paste in this code:
<h3Additional Resources</h3
<pVisit the <span
class=”highlight”Resources</span section of our website for additional help.
</p
<h3Contact Information</h3
<pPlease contact the <span
class=”highlight”author</span for additional resources at shawn@github.com.
</p
E. Save your edits to index2.html in Sublime Text and then open the index2.html file in a blank browser window to proof and ensure it looks like the figure at right.
Step 4. Next, open the site2.css file in Sublime Text by either using the File menu Open File command in the program or by dragging the file from the folder window into the blank Sublime Text window.
Step 6. Please complete the following edits and additions in the site2.css file:
A. Define a new ID selector called secondary, immediately after the current main selector in the site2.css file; you may start with the same styles defined in the current main selector.
B. Make the sole style of the secondary
selector the color ff0000 (red).
C. At this point, do a quick proof of your index2.html file, which should look like the figure at right.
D. Back in the site2.css file in Sublime Text, create a new relative selector, based on the secondary ID selector and pertaining ONLY to the <h3 headline—this relative selector should have a color style of #0066ff and a letter-spacing style of 7px. When proofing your index2.html file, your results should now look like the figure at right.
Step 5. Finally, back in your site2.html file, create a new class selector called highlight, which has a background color of yellow and a font-weight of bold. Save your work, both in your index2.html and site2.css files. Be sure to proof your finished work a final time in your browser before submitting your assignment. Your finished work should look like the figure at left.
“finished” and unaltered versions of the originals.
Step 2. Open the index2.html file in Sublime Text by either using the File menu Open File command in the program or by dragging the file from the folder window into the blank Sublime Text window.
Step 3. Complete the following edits and additions in the index2.html file:
A. Ensure that the externally linked CSS file reference in the <head portion of code correctly points to the site2.css file instead.
B. Create a new <section portion of code below the existing <section id=”main” that currently comprises most of the index2.html page.
C. Give this new <section an id of “secondary”
D. Within the new main2 <section, type or paste in this code:
<h3Additional Resources</h3
<pVisit the <span
class=”highlight”Resources</span section of our website for additional help.
</p
<h3Contact Information</h3
<pPlease contact the <span
class=”highlight”author</span for additional resources at shawn@github.com.
</p
E. Save your edits to index2.html in Sublime Text and then open the index2.html file in a blank browser window to proof and ensure it looks like the figure at right.
Step 4. Next, open the site2.css file in Sublime Text by either using the File menu Open File command in the program or by dragging the file from the folder window into the blank Sublime Text window.
Step 6. Please complete the following edits and additions in the site2.css file:
A. Define a new ID selector called secondary, immediately after the current main selector in the site2.css file; you may start with the same styles defined in the current main selector.
B. Make the sole style of the secondary
selector the color ff0000 (red).
C. At this point, do a quick proof of your index2.html file, which should look like the figure at right.
D. Back in the site2.css file in Sublime Text, create a new relative selector, based on the secondary ID selector and pertaining ONLY to the <h3 headline—this relative selector should have a color style of #0066ff and a letter-spacing style of 7px. When proofing your index2.html file, your results should now look like the figure at right.
Step 5. Finally, back in your site2.html file, create a new class selector called highlight, which has a background color of yellow and a font-weight of bold. Save your work, both in your index2.html and site2.css files. Be sure to proof your finished work a final time in your browser before submitting your assignment. Your finished work should look like the figure at left.
1 file (37.1KB)
