Description
Practicing CSS Basics
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:
- Ensure that the externally linked CSS file reference in the <head> portion of code correctly points to the site2.css file
- Create a new <section> portion of code below the existing <section id=”main”> that currently comprises most of the index2.html
- Give this new <section> an id of “secondary”
- Within the new main2 <section>, type or paste in this code:
<h3>Additional Resources</h3>
<p>Visit the <span
class=”highlight”>Resources</span> section of our website for additional help.
</p>
<h3>Contact Information</h3>
<p>Please contact the <span
class=”highlight”>author</span> for additional resources at [email protected].
</p>
- 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
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:
- 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
- Make the sole style of the secondary
selector the color ff0000 (red).
- At this point, do a quick proof of your html file, which should look like the figure at right.
3. 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
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.
