Question

In: Computer Science

Given the HTML below ( do not modify the HTML), Outer paragraph, outer list, div with...

  1. 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 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 C)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) D)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

GIVEN HTML

<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

First create css file mystyle98_d.css

there are four separate case

A) blue-blue-green-blue-pink

/*set text color blue outer div list*/
#fix{
   color: blue;
}

/*set text color blue outer and inner div paragraphs */
p{
   color: blue;
}

/*set text color pink inner div list*/
#fix1{
   color: pink;
}

/*set text color green inner div first paragraph */
p.above{
   color: green;
}

B) cyan-black-red-blue-red

/*set text color red inner div first paragraph and set font style normal*/
p.above{
   color: red;
   font-style: normal;
}

/*set text color red inner div list */
#fix1{
   color: red;
}

/*set text color blue inner div second paragraph and font style italic*/
div p{
   color: blue;
   font-style: italic;
}

/*set text color cyan outer div paragraph */
p{
   color: cyan;
}

C) blue-red-green-blue-red

/*set text color red outer div list*/
#fix{
   color: red;
}

/*set text color green inner div first paragraph */
p.above{
   color: green;
}

/*set text color blue inner div second paragraph */
div p{
   color: blue;
}

/*set text color blue outer div paragraph */
p{
   color: blue;
}

/*set text color red inner div list */
#fix1{
   color: red;
}

D) red-black-cyan-cyan-black

/*set text color cyan inner div both paragraphs*/
div p{
   color: cyan;
}

/*set text color red outer div paragraph */
p{
   color: red;
}

==Please Upvote==

venereology answered 7 months ago
Next > < Previous

Related Solutions

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: 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 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:...
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");...
Given this HTML form <div class="mymargin"> <h2>iTunes Popular Music by Genre</h2> <table> <tr> <td width="100px">&nbsp;</td> <td>...
Given this HTML form <div class="mymargin"> <h2>iTunes Popular Music by Genre</h2> <table> <tr> <td width="100px">&nbsp;</td> <td> <form > <span><b>Filter by Genre:</b></span> <br />   <select name="genre" id="genre">     <option value="">Select Genre</option>     <option value="Alternative Rock">Alternative Rock</option>     <option value="Country">Country</option>     <option value="Hip Hop/Rap">Hip-hop/Rap</option>     <option value="pop">Pop</option>     <option value="R&B/Soul">R&B/Soul</option>   </select>   <input type="button" id="mymusic" name="mymusic" value="Filter Songs"> </form> </td> </tr> </table> <table id="top25"></table> </div> and a JSON array var arrJson = {"iTunes Top Song":[ {"Song": "Mood (feat. iann dior)", "Artist": "24kGoldn", "Genre": "Hip Hop/Rap", "Release Date": "July 24,...
<!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"...
(a) Read and modify the following passage given below: Passage: Since 2000, the technologies known as...
(a) Read and modify the following passage given below: Passage: Since 2000, the technologies known as social media have grown exponentially. Social media is “a group of internet-based applications that build on the ideological and technological foundations of web 2.0, and allow the creation and exchange of user generated content” (Kaplan and Heinlein,61). In other words, social media allow creators to interact with one another by posting, commenting and changing each other’s work. Now in 2012, the two-way communication possibilities...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT