Question

In: Computer Science

Use only three context selectors SPACE, >, and +, add document level CSS code to the...

  1. Use only three context selectors SPACE, >, and +, add document level CSS code to the HTML file below to implement styles required in the body portion of the HTML file.

    <body>
    <p> Here should be yellow </p> <div>

    <p> Here should be cyan </p> <div>

    Content of this division should be brown

               <p> Some text </p>
       </div>

    <p> Here should be red </p> <p> Here should be green </p> <div>

    <p> Here should be brown </p> <div>

    <p> Here should be pink </p> </div>

          </div>
   </div>

    <p> Here should be blue </p> </body>

2) Use minimal number of selectors, otherwise 10 points deduction will be applied.

  1. 1) Only three context selectors specified above can be used. Using other

    selectors or other types of CSS code, i.e. inline CSS or external CSS, will

    cause 50 points deduction.

Solutions

Expert Solution

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "selectors.html" is created, which contains following code.

selectors.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Context Selectors</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- style is used for internal style sheet -->

<style>

body p {

color: yellow;

}

/* style for para in div */

div>p {

color: cyan;

}

/* style for color brown */

div>div {

color: brown;

}

/* style for <p> immediately after <p> */

p+p {

color: green;

}

/* style for color blue */

div+p {

color: blue;

}

/* style rule for red color */

div>div+p {

color: red;

}

/* style rule for pink color */

div div div p{

color: pink;

}

/* style for brown color */

div div>p{

color: brown;

}

</style>

</head>

<body>

<p> Here should be yellow </p>

<div>

<p> Here should be cyan </p>

<div>

Content of this division should be brown

<p> Some text </p>

</div>

<p> Here should be red </p>

<p> Here should be green </p>

<div>

<p> Here should be brown </p>

<div>

<p> Here should be pink </p>

</div>

</div>

</div>

<p> Here should be blue </p>

</body>

</html>

======================================================

Output : Open web page selectors.html in the browser and will get the screen as shown below

Screen 1 :selectors.html

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

venereology answered 11 hours ago
Next > < Previous

Related Solutions

Create CSS styling for this xml code 5.2. Change the CSS so only a single course...
Create CSS styling for this xml code 5.2. Change the CSS so only a single course is displayed. 5.2.1. You may add IDs or classes to the XML file a desired. <InformationSystems>    <Classes>        <CourseHeader>            <CourseNumber>CIS 145</CourseNumber>            <CourseName>Introduction to Relational Database</CourseName>            <Credits>5</Credits>        </CourseHeader>        <Description><![CDATA[Introduces relational database concepts and practices using business-related examples. OFTEC 111 or 108 recommended, or comparable competencies. Prerequisite: OFTEC 141 or MATH...
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop",...
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop", "Back", "Reset". <button type="button"> 2. Add "glyphicon-shopping-cart" to <div id="sc" style="font-size: 100px; color: blue; ">. Use CSS in embeded style to set <style type="text/css">     #sc{ border-style: dotted; /* Required to animate border width */ border-color: red; border-width: 0; } </style> 3. <script> - "Start", call "animate()" function to move it to right by 300px for each click, speed is 2000. left: "+=300px". Hint:...
make multiply function with ‘add’ command， Convert to mips code Don’t use ‘mult’ Use 'add' multiple...
make multiply function with ‘add’ command， Convert to mips code Don’t use ‘mult’ Use 'add' multiple times Get input from key-board and display the result in the console window
You are to use your code from part A of this assignment and add to it....
You are to use your code from part A of this assignment and add to it. In this part of the project, you are to do the following: 1. In the count_voters function you are to add code to: • Count the number of votes for Trump • Count the number of votes for Biden • Count the number of females • Count the number of males • Count the number of Democrats • Count the number of Republicans •...
I want the code in the following three PHP files without any CSS. Thank you Create...
I want the code in the following three PHP files without any CSS. Thank you Create a Input.php. Create a PHP script that will perform the following tasks: 1. Divide the content area of this page into two sections (Side by Side) 2. On the left side: create a form that accepts the following information from the user a. Text box, Employee Name b. Text box, Employee ID c. Text box, Telephone Number d. Text box, Email Address e. Radio...
need to add these functions to my code: • show only important tasks • show all...
need to add these functions to my code: • show only important tasks • show all completed tasks My code in java: import java.util.ArrayList; import java.util.*; public class TodoList { String date=""; String work=""; boolean completed=false; boolean important=false; public TodoList(String a,String b,boolean c,boolean d){ this.date=a; this.work=b; this.completed=c; this.important=d; } public boolean isCompleted(){ return this.completed; } public boolean isImportant(){ return this.important; } public String getDate(){ return this.date; } public String getTask(){ return this.work; } } class Main{ public static void main(String[]...
PROVIDE CODE ONLY IN C++ / NO OTHER LANGUAGES PLEASE ADD SELECTION SORT/ INSERTION SORT/ AND...
PROVIDE CODE ONLY IN C++ / NO OTHER LANGUAGES PLEASE ADD SELECTION SORT/ INSERTION SORT/ AND BUBBLE SORT FUNCTION TO THIS PROGRAM #include <iostream> #include<vector> #include <algorithm >   #include <chrono>    #include <ctime> using namespace std; void bubblesSort() { // Please create Bubble Sort function// Make another for Selection Sort and  Insertion Sort } int main() { // empty vector vector<int> data; // data [0], data [1]... data[N-1] <-- end(data) // set of values to test N for (auto N :...
Using MongoDB, what command would you enter to retrieve this document using only the zip code...
Using MongoDB, what command would you enter to retrieve this document using only the zip code 11242? db.inspections.find(???????) Database: city Collection: inspections {"_id":{"$oid":"56d61033a378eccde8a898ae"}, "id":"23536-2015-ENFO", "certificate_number":5373970, "business_name":"NZO CORP.", "date":"Apr 22 2015", "result":"Violation Issued", "sector":"Grocery-Retail - 808", "address":{"city":"BROOKLYN", "zip":11242, "street":"COURT ST", "number":26}}
Code and document the following functions using NON-RECURSIVE ITERATION only. Test the functions by calling them...
Code and document the following functions using NON-RECURSIVE ITERATION only. Test the functions by calling them from a simple interactive main() function using a menu, with different values used to select the choice of function. Overall, you should have one C program (call it Lab1.c) containing one main() function and 5 other functions, where the functions are called based on an interactive user menu. The program should contain a loop that permits users to enter a new choice of function...
Identify and discuss three factors of the global or world context that influenced the use of...
Identify and discuss three factors of the global or world context that influenced the use of acupuncture in the United States
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT