Question

In: Computer Science

Look at the HTML below ( do NOT modify the HTML), Outer paragraph, outer list, div...

Look at the HTML below ( do NOT modify the HTML),

Outer paragraph, outer list, div with 2 inner paragraphs and one inner list ,

create a CSS which will:

  1. Make the outer list text color blue , and make the outer (non div) paragraph blue, and the div inner list element pink also inside the div element make the first inner paragraph green, and in the div element the second paragraph blue, so that in order: blue-blue-green-blue-pink
  2. As a separate case, make the text elements of all the div elements red , except the second div paragraph blue and italic and also make the outer non div paragraph cyan so that in order: cyan-black-red-blue-red
  3. As a separate case, create css to make all the text elements of the HTML page alternate between blue,

Red , green,blue,red ( in that order)

  1. As another separate case , create css to make the non-div paragraph red, and the div inner paragraphs cyan, so that in order: red-black-cyan-cyan-black

<html>

<head>

      <link rel="stylesheet" type="text/css" href="mystyle98_d.css">

</head>

<body>

             <p>

    I'm a paragraph, what color am I ?

     </p>

   <ul>

     <li id = "fix"> I'm a list item;what color am I? </li>

       </ul>

<div class = "central1">

<p class ="above">

I'm a paragraph; what color am I?

</p>

     <p>

    I'm another paragraph, what color am I ?

     </p>

   <ol>

     <li id = "fix1"> I'm another list item;what color am I? </li>

       </ol>

          </div>

</body>

</html>

Solutions

Expert Solution

In the following output:

if tag name is written like p or ul it will set the properties of all tags with the css. But later in the code if two tags are written together like div p which means paragraph inside a div tag so the css will overwrite from just p to more specific like div p tag and so on.

If div p:nth-child(2) is written it means inside the div tag the second paragraph

comma (,) between two elements is same as writing the same thing twice for two elements for e.g:

ul, p {
    color: blue
}

is same as the below:

ul {
    color: blue
}
p {
    color: blue
}

.above is used for calling css elements of class name above

First case:

ul, p{
        color: blue;
}
div ol {
        color: pink;
}
.above {
        color: green;
}

Output:

Second case:

p {
        color:cyan;
}
.central1 {
        color: red;
}

div p:nth-child(2) {
        color: blue;
        font-style: italic;
}

Output:

Third case:

p {
        color:blue;
}
li {
        color: red;
}
.above {
        color: green;
}

Fourth case:

p {
        color: red;
}
div p{
        color: cyan;
}

venereology answered 9 months ago
Next > < Previous

Related Solutions

Given the HTML below ( do not modify the HTML), Outer paragraph, outer list, div with...
Given the HTML below ( do not modify the HTML), Outer paragraph, outer list, div with 2 inner paragraphs and one inner list , create a CSS which will: a) Make the outer list text color blue , and make the outer (non div) paragraph blue, and the div inner list element pink also inside the div element make the first inner paragraph green, and in the div element the second paragraph blue, so that in order: blue-blue-green-blue-pink b)As a...
modify code to write the output as an HTML table to a file in the output...
modify code to write the output as an HTML table to a file in the output directory. The file that is saying to work at : SOURCE CODE IN PERL: print "Enter principal amount: "; $P=; while($P<=0) { print "Principal must be positive. Try again: "; $P=; } print "Enter number of times interest is applied in a year: "; $n=; while($n!=12 && $n!=4 && $n!=2 && $n!=1) { print "It must be 12, 4, 2 or 1. Try again:...
Full paragraph (a) Why do economists look at implicit costs? (b) Look at two businesses (one...
Full paragraph (a) Why do economists look at implicit costs? (b) Look at two businesses (one big and one small) and for each identify what might be their implicit costs. Be specific! 1.What is the marginal product of labor (MP or MPP)? Why is the curve shaped the way it is? 2.Explain and describe each of the four production relationships.
Write an HTML which will create two moving balls (use div with border-radius to create these...
Write an HTML which will create two moving balls (use div with border-radius to create these balls). The red ball starts its movement from top left corner and the green ball starts its movement from top right corner. Assuming the red ball take diagonal direction and the red ball takes anti-diagonal direction downward. When ball meets in the middle of the screen, the red ball will on top of the green ball (hint: use z-inedx). Make sure these two balls...
Overview Students will learn how to use block-level <div> elements in HTML and style them with...
Overview Students will learn how to use block-level <div> elements in HTML and style them with CSS to transform them using various properties such as: position top, left, right, bottom float border border-radius background-color etc. Related Lecture(s) Module 2: Lecture #3 - The Box Model & Positioning Elements Basic Content Create a folder on your local machine in the "csis1430/htdocs" folder called "little-boxes" with the following folder structure: css img js Create an index.html file with multiple (as many as...
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change...
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change anything within the <head></head> section of the HTML * --> <!-- * * --> <!-- *************************************************************************************** --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .btn{border:1px solid black; padding:5px;display:inline-block} </style> </head> <body> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Nothing to change here in the <body> * --> <!-- * * --> <!-- ***************************************************************************************...
JavaScript (HTML) Task: Please read 10 numbers that are list below, sort the numbers and then...
JavaScript (HTML) Task: Please read 10 numbers that are list below, sort the numbers and then print those numbers. 10 numbers = { 9, 3, 2, 1, 10, 30, 4, 6, 7, 8} [Reference JavaScript code] <html> <body>     <H1>prompt()</h1>     <p id="pro"></p>     <script>        // Array creation        var num= new Array();               var ix = 0;        // Read 10 numbers        for (ix = 0; ix < 10; ix++)        {num[ix] = prompt("Enter a number");...
look this code is a correct but i want modify it to allow the client to...
look this code is a correct but i want modify it to allow the client to have three attempts to login to the server package hw2; import java.net.*; import java.util.Formatter; import java.util.Random; import java.util.Scanner; import java.io.*; public class Client {    Socket server;    int port;    Formatter toNet = null;    Scanner fromNet = null;    Scanner fromUser = new Scanner(System.in);    public Client() {        try {            // login at server at local host...
<!DOCTYPE html> <html> <body> <!-- replace the text below with your name!--> <!-- --> <!-- -->...
<!DOCTYPE html> <html> <body> <!-- replace the text below with your name!--> <!-- --> <!-- --> <title> TYPE YOUR NAME HERE</title> <script> // // A bug collector collects bugs every day for five days. Write a function that keeps // a running total of the number of bugs collected during the five days. The loop // should ask for the number of bugs collected for each day, and when the loop is // finished, the program should display the total...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT