Question: Can you fix what is wrong with this CSS code at the bottom is what I have done and all the html files that are

Can you fix what is wrong with this CSS code at the bottom is what I have done and all the html files that are needit for this are all correct. i just need to fix this css file.

dirctions

Instructions: 1. Open the cssterminology04.html, csssyntax04.html, cssdeclarations04.html, and cssblock04.html les in your HTML editor from the Data Files for Students and then modify the comment at the top of each of the four pages to include your name and todays date. 2. Enter CSS terminology within the

tags of cssterminology04.html, CSS syntax within the <title> tags of csssyntax04.html, CSS declarations within the <title> tags of the cssdeclarations04.html page, and CSS block styles within the <title> tags of the cssblock04.html page. 3. Open the cssterminology04.html page in the browser and read the page. Tap or click the links for the three other pages and read them as well. Note that the content goes wall-to-wall in your browser. To center the content within a small left and right margin, add padding between the content and border, and then change the background color to light gray. To do so, create an external style sheet with the following rules for the content marked up between <div id="main"> and </div> tags: #main {width: 90%; margin: 0 auto 0 auto; padding: 2%; background-color: #D7D7D7; } 4. Save the le as css04.css in the same folder as the HTML webpages and then add a comment as the rst line of the le with your name and the current date. 5. Link the css04.css stylesheet to each page by entering the following element to the section in each page. <link rel="stylesheet" href="css04.css"> 6. Save and refresh your webpages after every step and tap or click each link to see the impact of each new set of rules on the four pages. Style <h1> content with a dark red text color by adding the following style to the external style sheet: h1 {color: #CF0000;} 7. To study how borders are applied to block paragraph content, add the following rule to apply a blue, 1px, solid border to all sides of every paragraph: p {border: blue 1px solid;} Save your changes and then refresh your webpages and view the borders around the paragraphs. 8. To study how oat is applied, you will work with the cssblock04.html page. Read the paragraphs that surround each example. Example 1 proves that when an image is followed by another image, they arrange themselves in a line, as inline content. Example 2 shows how a single image appears to be block content, but only because the content that follows the image is a block and thus starts on its own line. You will modify the image after the Example 3 paragraph to oat left. To do this, add class="floatleft" to the tag that follows the Example 3paragraph. (Hint: The order of attribute value pairs in an HTML tag is not technically signicant, but it is common to put the most important attributes rst. Typically class and id attribute values are listed early in the tag.) Add the following rule to the external style sheet: .floatleft {float: left;} </h1>to observe how the image after the Example 3 paragraph oats left. Content that follows the oated image lls the space to the right of the oated image. 9. You want the Example 4 paragraph to start on its own line, so you need to clear the oat at that point. To study how oat is cleared, add class="clearfloat" to the opening tag for the Example 4 paragraph. Add the following rule to the external style sheet: .clearfloat {clear: both;} Save the les and refresh the cssblock04.html page in the browser to observe how the Example 4 paragraph is cleared of the oat and acts as normal block content again, starting on its own line. 10. You want the image after the Example 4 paragraph to oat right. To do this, add class="floatright" to the <img src="" alt="Can you fix what is wrong with this CSS code at the"> tag that follows the Example 4 paragraph. Add the following rule to the embedded style sheet: .floatright {float: right;} Save the les and refresh the cssblock04.html page in the browser to observe how the image following the Example 4 paragraph oats right. Floating content right can be tricky considering that people read English from left to right. Content that oats right is positioned before the content that ows next to it in the HTML le. 11. Change the existing navigation content into a horizontal navigation bar. To do this, rst remove the bullets from the list items in the nav area. List item content naturally ows as block content, with each list item on its own line. To create a horizontal navigation system with each of the links on the same line, you also must add a rule to change the list item content from block to inline. To do this, add the following rules to the style sheet: nav li {list-style-type: none; display: inline; } Save the les and refresh the pages in the browser to observe the new horizontal navigation system. 12. Tap or click the CSS Terminology link to open the cssterminology.html page in the browser. This page lists several key CSS terms. You want to style the terms in bold. To do this, you will mark up the CSS key terms using the tags. (The span element is an inline element that allows you to mark up and style content within a paragraph without creating a new line.) Mark up the following CSS terms using both the tag and a class="cssterm" attribute in the opening tag as follows: (Hint: Be careful to add only the opening and closing tags and not change or delete any of the existing content or HTML code.) External styles (rst paragraph) Embedded styles (second paragraph) Inline styles (third paragraph) Rules (fourth paragraph) selector (fth paragraph) declaration (sixth paragraph) Inheritance (seventh paragraph) Specicity (eighth Add the following rule to the external style sheet to style the terms marked up by the class="cssterm" attribute value: .cssterm {font-weight: bold;} Save the les and refresh the pages in the browser to observe the new bold terms on the cssterminology04.html page. 13. Validate your HTML and CSS pages and x any errors. /* 2/11/2017*/ css terminolg nav li { list-style-type: none; display: inline; } nav li { list-style-type: none; display: cssterminology04.css csssyntax04.css cssdeclarations04.css cssblock04.CSS Styles for Blocks and Float #main { width: 90%; margin: 0 auto 0 auto; padding: 2%; background-color: #D7D7D7; } CSS: Cascading Style Sheets - Terminology p.one { border: blue 1px solid; } External styles, also called linked styles, are separated into a separate file with a .css extension. p.two { border: blue 1px solid; } Embedded styles, also called internal styles, are inserted within style tags in the head section of an .html page. p.three { border: blue 1px solid; } Inline styles are inserted in the opening tag using a style attribute. p.four { border: blue 1px solid; } Rules are also referred to as styles and consist of a selector and a set of one or more declarations. p.four { border: blue 1px solid; } A selector may "select" different areas in the html to style: An element name such as body or h1 A class value. class="floatright" connects to the .floatright selector. An id value. id="outerwrapper" connects to the #outerwraper selector. Multiple items that are separated by commas. For example h1, h2, h3 A descendant selector (for example, nav li) which selects only the li content within the nav tags. A declaration (for example, color: #FFFFFF; ) is made up of a CSS property followed by a colon: followed by the property value and ends with a semicolon; Inheritance means that CSS properties can be inherited from a parent container. For example, paragraphs and headings will inherit the font and color rules of the body selector. Properties that affect the placement of elements such as padding, borders, and margins are not inherited. Specificity means that if the background-color property was applied to the body, p (paragraph), and #leftcolumn selectors in the same style sheet, the more specific selector wins. So the rule for the #leftcolumn selector would beat the p rule which would beat the body rule. Specificity also means that that if two or more rules for the same property apply to the same content, the closer rule will win. For example, if the background-color property was created for the body selector in three different style sheets (inline, embedded, external), the inline style would beat the embedded style which would beat the external style. The rules by which styles are applied help explain the "cascade" in cascading style sheets.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock blur-text-image

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!

please use notepad ++ or bbedit Instructions: Perform the following tasks: Open cityfarmer04. htm1 in your HTML editor from the Data Files for Students and then modify the comment at the top of the...

n I LAN> Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the chapter; Lab 3 requires you to dive deeper into a topic covered in the chapter....

I am providing you with six image files to use. I recommend you build your HTML from the February 8 class demonstration (in class Workshop 6) of the three stooges. Please your images inside of...

can you please help me solving this it is E- Commerce Cours TRY IT OUT Writing Your First CSS In this Try It Out you will write some CSS that changes the appearance of a header and two paragraphs....

SELFIE-SITE EXERCISE 3 INTRODUCTION This exercise is intended help you practice adding basic CSS (Cascading Style Sheet) styling rules to your web pages. It will have you create and link an external...

EECS 1012. Lab 2: HTML and CSS A. IMPORTANT REMINDERS 1. Lab2 is due on Friday (Jan 27) at 9pm. No late submission will be accepted. 2. You are welcome to attend the lab session. TAs and instructor...

Create an HTML and CSS page: No tags in the HTML code. Do not use pixels (px). Use em, percent, and etc. HTML Starter Code: You are asked to build out a model call to action web page featuring three...

Pacific Trails Resort Case Study In this chapter's case study, you will use the existing Pacific Trails Resort (Chapter 6) website as a starting point to create a new responsive version of the...

Can someone help me with these code please , the html for home page, classes page and the schedule page all in html, then the css page to link with the html. Thanks Yun Reader Web Development X...

Part 1: Planning D Introduction Planning for a project is an important skill, so the TT284 EMA includes an element to encourage you to think about the work you will have to complete, how long the...

Diffraction occurs for all types of waves, including sound waves. High-frequency sound from a distant source with wavelength 9.00 cm passes through a narrow slit 12.0 cm wide. A microphone is placed...

Our perception of accounting, as noted in our conversation of Accounting Professionalism and tracing its written origin to Luca Pacioli, is of the highest standard. Accounting is a tool to produce...

3. Create an empty Web Site application named Market and save it in the VB2015\Chap12 folder. Add three new Web pages named Default.aspx, Apples.aspx, and Oranges.aspx to the application. Change each...

30) Bob and Bill allocate 2/3 of their partnership's profits and losses to Bob and 1/3 to Bill. The net income of the firm is $20,000. The journal entry to close the Income Summary will include...