Question
1. Style Your Personal Portfolio Website
Personal
Part 1: In Chapter 3, you added content for your personal portfolio website on the portfolio
.html webpage. In this exercise, you will update the page with an external style sheet that
includes the following updates: (Note: Your instructor may want you to use the Data Files for
Students provided for this exercise instead.)
1. Create an external style sheet with the name portfoliostyles04.css and save it in the
styles folder within the your_turn_1 folder.
2. Add your name and the current date as a comment to the first line of the portfoliostyles04.css
file.
3. Open your portfolio.html file in your HTML editor and float the image in the header section
to the left by adding the attribute of class="float-left" to the <img> tag and a
corresponding .float-left {float: left;} rule to the external style sheet.
4. Add a tag to the <head> section of the portfolio.html file to link the external style sheet to the
portfolio.html page as follows:
<link rel="stylesheet" href="styles/portfoliostyles04.css">
Save both the CSS and HTML files, and open the portfolio.html file in your browser to make
sure the style sheet is linked and the image is floating properly.
5. Add some space between the image and the content that is floated to the right by adding the
following rule to the style sheet:
img { margin-right: 3%; }
Also remove the bullets on the list items within the nav section by adding the following rule to
the style sheet:
nav li { list-style-type: none; }
6. Center the content on the page by containing all of the content within the body by
surrounding it with <div id="outerwrapper"> … </div> tags.
Add a comment after the closing </div> tag to identify that section as follows:
<!--end outerwrapper-->
Style the outerwrapper in the external style sheet to take up 70% of the available space on the
screen and to center it within that space as follows:
#outerwrapper { width: 70%;
margin: 0 auto 0 auto;
}
7. To make sure the webpage will render successfully in all browsers, identify the main section
using the <div id="main"> and </div> tags versus <main> and </main>, and include three pairs
of <h2> tags in that section that mark up the headings of Strengths, Technologies, and Other.
8. Clear the float with the main content by adding the following style to the style sheet:
#main { clear: both; }
9. Push the content below the image by adding the following declaration to the img selector in
the style sheet:
margin-bottom: 2%;
10. Style your name at the top of the webpage with a large Futura then Calibri then generic
sans-serif font by adding the following class to the opening <p> tag that contains your name.
class="myname" and by adding the following corresponding styles to the stylesheet:
.myname { font-family: Futura, Calibri, sans-serif;
font-size: 2em;
}
11. Add a light background color to the #main selector that goes well with the colors in your
image.
12. Add styles for padding and a border with rounded corners to the #main selector as follows:
padding: 3%;
border: 2px black solid;
border-radius: 25px;
13. Link your style sheet to any other pages you have created in your portfolio website.
14. Add any other styles that you think would improve your portfolio webpages.
15. Validate and correct your HTML and CSS files, and then submit your assignment in the
format specified by your instructor.
Part 2: Go to www.csszengarden.com and tap or click the style links to see how the single
HTML file appears with different styles. The featured styles change, but at the time of this writing,
the featured eight styles were named “Mid Century Modern,” “Garments,” “Steel,” “Apothecary,”
“Screen Filler,” “Fountain Kiss,” “A Robot Named Jimmy,” and “Verde Moderna.” Be careful to tap
or click the style names rather than the “by author’s name” links to apply the new style to the webpage.
Tapping or clicking the author’s name links takes you to the home page for that author.
Explore the site to see how the location and appearance of the content changes from style
to style. Locate the links to download the HTML file and CSS file. Download both files and open
them in your HTML editor. After reviewing the code in each file, comment on what you learned or
want to know more about.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.