Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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

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 rst line of the portfoliostyles04 css le.

3. Open your portfolio html le in your HTML editor and oat the image in the header section to the left by adding the attribute of class="float-left" to the tag and a corresponding .float-left {float: left;} rule to the external style sheet.

4. Add a tag to the section of the portfolio html le to link the external style sheet to the portfolio html page as follows: Save both the CSS and HTML les, and open the portfolio html le in your browser to make sure the style sheet is linked and the image is loading properly.

5. Add some space between the image and the content that is located 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 tags. Add a comment after the closing tag to identify that section as follows: Style the outer wrapper 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

and tags versus and , and include three pairs of tags in that section that mark up the headings of Strengths, Technologies, and Other.

8. Clear the oat 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 web page with a large Futura then Calibri then generic sans-serif font by adding the following class to the opening 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 stylesheet to any other pages you have created in your portfolio website.

14. Add any other styles that you think would improve your portfolio web pages.

15. Validate and correct your HTML and CSS less

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Programming The Perl DBI Database Programming With Perl

Authors: Tim Bunce, Alligator Descartes

1st Edition

1565926994, 978-1565926998

More Books

Students also viewed these Databases questions

Question

What are the uses of performance appraisal?

Answered: 1 week ago

Question

1. Who is responsible for resolving this dilemma?

Answered: 1 week ago