Answered: 1. Create a style rule for anchor…

Principles of Information Systems (MindTap Course List)

13th Edition

ISBN:9781305971776

Author:Ralph Stair, George Reynolds

Publisher:Ralph Stair, George Reynolds

Chapter6: Networks And Cloud Computing

Section: Chapter Questions

Problem 9SAT

See similar textbooks

Related questions

Question

100%

1. Create a style rule for anchor elements within the main element that sets the font color value to #47476b, removes the underline, sets a font-weight value of bold, and sets a font style value of italic.

Adjust the width value for the cssl, css2, and css3 id selectors so that they appear next to each other horizontally.

2. Update the style rule for the footer selector to clear a float on the left.

STYLES.CSS code

#css1, #css2, #css3

{

width: 40%;

float: left;

padding: 0 1%;

}

footer

{

text-align: center;

font-size: 0.85em;

color: #47476b;

padding: 1% 0;

border-top: 3px solid #47476b;

}

body

{

padding 2%;

background-color: #d1d1e0;

}

main

{

padding: 2%;

font-family: Geneva, Arial, sans-serif;

}

header h1

{

text-align: center;

font-size: 3em;

font-family: Georgia, Times, serif;

padding: 3%;

color: #47476b;

}

nav

{

background-color: #47476b;

}

nav ul

{

margin: 0;

}

nav li

{

display: inline-block;

font-size: 1.5em; font-family: Verdana, Arial, sans-serif; font-weight: bold;

}

nav li a

{

display: inline-block; color: #e3eaf8; padding: 0.5em 2em;

}

main p

{

overflow : auto;

font-size: 1.25em;

}

main h3

{

overflow : auto;

padding-top: 2%;

font-size: 2em;

}

Index.html code

<head>

<title>Chapter 4, Analyze</title>

</head>

<body>

<h1>CSS Levels</h1>

</header>

<nav>

<ul>

<li><a href="https://www.w3schools.com/">W3Schools</a></li>

<li><a href="https://www.w3.org/Style/CSS/members">CSS Working Group</a></li>

<li><a href="https://www.w3.org/Style/CSS/current-work">CSS Current Work</a></li>

</ul>

</nav>

<main>

<h2>CSS Level 1</h2>

<p>The original CSS Level 1 recommendation was released by the W3C in December 1996. There have been many revisions since its original release. You can find the original recommendation and the latest revision at <a href="https://www.w3.org/" target="_blank">w3.org</a></p>

</div>

<h2>CSS Level 2</h2>

<p>The CSS Level 2 recommendation was originally released by the W3C in May 1998. There have been many revisions since its original release. CSS Level 2 has had two revisions, <a href="https://www.w3.org/TR/CSS2/"

target="_blank">CSS 2.1</a> and <a href="https://www.w3.org/TR/CSS22/" target="_blank">CSS 2.2</a>.</p>

</div>

<h2>CSS Level 3 and Beyond</h2>

<p>The CSS Level 3 recommendation was released in May 2001. Since its release, there have been several changes, including the method for making changes. For the latest updates, visit the <a href="https://www.w3.org/Style/CSS/current-work" target="_blank">CSS Current Work webpage</a>.</p>

</div>

</main>

<p>Student Name:

</footer>

</html>

It needs to display this exact image to be correct please help me thank you.

CSS Levels
w3Schools
css Working Group
css Current Work
W3C
CSS Level 1
csS Level 2
csS Level 3 and Beyond
The original CSS Level 1 recommendation
was released by the W3C in December
1996. There have been many revisions
since its original release. You can find the
original recommendation and the latest
revision at w3.org
The CSS Level 2 recommendation was
originally released by the W3C in May 1998.
There have been many revisions since its
original release. CSS Level 2 has had two
revisions, CsS 2.1 and CSS 2.2.
The CSS Level 3 recommendation was
released in May 2001. Since its release,
there have been several changes, including
the method for making changes. For the
latest updates, visit the CSS Current Work
webpage.
Studet Name
C Coprgh 201. AI Rgh Reed

Expert Solution

EXPLANATION :-

To make the css1,css2 and css3 id selectors appear horizontally, set the width as 32%, instead of 40 %. So, the style will look like :-

#css1, #css2, #css3
{
width: 31%;
float: left;
padding: 0 1%;

}

2. To make changes in the styles of anchor tags inside the main element, we need to add main a{} inside the css. So, the style will look like :-

main a
{
font-weight: bold;  ---> To make it as bold
color: #47476b;  -----> to define color as mentioned
text-decoration: none; -----> to remove underline
font-style: italic;  ----> to set style as italic
}

3. Style rule for the footer selector to clear a float on the left. :-

footer
{
text-align: center;
font-size: 0.85em;
color: #47476b;
padding: 1% 0;
border-top: 3px solid #47476b;
clear: left;

}

Some other changes has been made to match the exact output :-

- To remove the underline from the anchors which is not there in main -

nav li a
{
display: inline-block; color: #e3eaf8; padding: 0.5em 2em;
text-decoration :none; ---> To remove underline from the list
}

- To match the font size from the output, needs to decrease the font size inside main p elements

main p
{
overflow : auto;
font-size: 1.15em; ---> Reduce the font size by 0.10 em
}

- To make both the lines of footer in separate line, add <br> inside the code -

</footer>

Trending now

This is a popular solution!

Step by step

Solved in 4 steps with 7 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.