Question

In: Computer Science

Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form>...

Remove inline style to an external file

<!DOCTYPE html>
<html>
<head>
<title>PROBLEM</title>
</head>
<body>
  
<form>
<table style="color:white;background-color:blue;border:solid black 7px;border-radius:25px;">
<tr><th colspan="2" style="color:white;background-color:black;border:solid black 2px;outline:solid black 2px;">SQUARE PROBLEM</th></tr>
<tr> <td><label>Enter side:</label></td><td> <input type="text" style="background-color:#DEDEE6;border:4px solid red;"/> </td> </tr>
<tr> <td><label>Area:</label></td><td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr>
<tr> <td><label>Perimeter:</label></td>   <td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr>
<tr>
   <td colspan="2" >
   <center>
   <input type="button" value="Area" style="color:white;background-color:black;border:1px solid red;"/>


   <input type="button" value="Perimeter" style="color:white;background-color:black;border:1px solid white;"/>
   <input type="button" value="Both" style="color:white;background-color:black;border:1px solid red;"/>
   <input type="button" value="Clear" style="color:white;background-color:black;border:1px solid white;"/>
   </center>
   </td>
</tr>
</table>
</form>
</body>
</html>

Solutions

Expert Solution

From the external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

index.html

<!-- Solution for Remove inline style to an external file -->

<!DOCTYPE html>
<html>
<head>
<!-- External Style Sheet was defined with in the <link> element, inside the head section of an html page -->
<link rel="stylesheet" href="Style.css"/>
<!-- End of External Style Sheet -->
<title>Solution</title>
</head>
<body>
  
<form>
<table class="table-top">
<tr><th colspan="2" class="table-cellhead">SQUARE PROBLEM</th></tr>
<tr> <td><label>Enter side:</label></td><td> <input type="text" class="table-cell"/> </td> </tr>
<tr> <td><label>Area:</label></td><td> <input type="text" readonly class="table-cell1"/> </td> </tr>
<tr> <td><label>Perimeter:</label></td> <td> <input type="text" readonly class="table-cell2"/> </td> </tr>
<tr>
<td colspan="2" >
<center>
<input type="button" value="Area" class="table-perimeter-cell"/>
<input type="button" value="Perimeter" class="table-perimeter-cell1"/>
<input type="button" value="Both" class="table-perimeter-cell2"/>
<input type="button" value="Clear" class="table-perimeter-cell3"/>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>

An External Stylesheet must be saved with a .css extension.

Style.css

.table-top{
color:white;
background-color:blue;
border:solid black 7px;
border-radius:25px;
}
.table-cellhead{
color:white;
background-color:black;
border:solid black 2px;
outline:solid black 2px;
}
.table-cell{
background-color:#DEDEE6;
border:4px solid red;
}
.table-cell1{
background-color:#DEDEE6;
border:4px solid yellow;
}
.table-cell2{
background-color:#DEDEE6;
border:4px solid yellow;
}
.table-perimeter-cell{
color:white;
background-color:black;
border:1px solid red;
}
.table-perimeter-cell1{
color:white;
background-color:black;
border:1px solid white;
}
.table-perimeter-cell2{
color:white;
background-color:black;
border:1px solid red;
}
.table-perimeter-cell3{
color:white;
background-color:black;
border:1px solid white;
}

venereology answered 3 months ago
Next > < Previous

Related Solutions

Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-
Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-align: center;     }     .textdiv {        background-color: LightSlateGrey;        width: 50%;     }     .imgdiv {                      background-color: PapayaWhip;                   width: 30%;     } </style> </head> <body>     <h2>Center Me</h2>     <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>     <div class="textdiv">                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {    dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200')       message = "<ul><li>NAME:" + document.form1.name.value;    message += "<li>ADDRESS:" + document.form1.address.value;    message += "<li>PHONE:" + document.form1.phone.value;    message += "</ul>";    dispWin.document.write(message); } </script> </head> <body>    <h1>Form Display Example</h1>    <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>    <form name="form1" method="get" action="">   ...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image Swap Application</title> <link rel="stylesheet" type="text/css" href="image_swap.css"> <script type="text/javascript" src="image_swap.js"></script> </head> <body>     <main>         <h1>Fishing Images</h1>         <p>Click on an image to enlarge.</p>         <ul id="imageLinks">             <li><a href="images/release.jpg" title="Catch and Release">                 <img src="thumbnails/release.jpg" alt=""></a></li>             <li><a href="images/deer.jpg" title="Deer at Play">                 <img src="thumbnails/deer.jpg" alt=""></a></li>             <li><a href="images/hero.jpg" title="The Big One!">                 <img src="thumbnails/hero.jpg" alt=""></a></li>             <li><a href="images/bison.jpg" title="Grazing Bison">                 <img src="thumbnails/bison.jpg"...
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = new Date(2020, 12, 29);           // HINT: Be careful with getMonth()           var d =  a.getFullYear() + a.getMonth();           var sum = d % 5;           document.getElementById("ans").innerHTML = sum.toString();         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <input type="button" name="Submit" id="submit" value="Submit" onclick="findAnswer();"/>          </form>     <p id ="ans"></p>   </body> </html> none Will the code from above print anything, if so, what printed ?...
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = document.getElementById("box1").value;           var b = document.getElementById("box2").value;                        if (typeof(a) == "number" && typeof(b) == "number") {               var c = (a + b) % 5;               document.getElementById("ans").innerHTML = c.toString();             } else {                document.getElementById("ans").innerHTML = "no Good";             }         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <label>Enter Numbers: </label> <br />           <label> Value 1  : </label><input type="text" name="box1" id="box1"  value="10" /><br/>           <label> Value...
<!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> * --> <!-- * * --> <!-- ***************************************************************************************...
HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">    &n
HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">     <script src="clock.js"></script> </head> <body>     <main>         <h1>Digital clock</h1>         <fieldset>             <legend>Clock</legend>             <span id="hours">&nbsp;</span>:             <span id="minutes">&nbsp;</span>:             <span id="seconds">&nbsp;</span>&nbsp;             <span id="ampm">&nbsp;</span>         </fieldset>     </main> </body> </html> CSS: body {     font-family: Arial, Helvetica, sans-serif;     background-color: white;     margin: 0 auto;     width: 450px;     border: 3px solid blue;     padding: 0 2em 1em; } h1 {     color: blue; } label {     float: left;     width: 11em;     text-align: right;     padding-bottom: .5em; } input {     margin-left: 1em;     margin-bottom: .5em; } fieldset {...
<html> <head>     <title>Nick D'Angelo</title> </head> <body>     <h1>This is a header</h1>     <h2>This is a subheader</h2>  &nbs
<html> <head>     <title>Nick D'Angelo</title> </head> <body>     <h1>This is a header</h1>     <h2>This is a subheader</h2>     <p>The quick <b>brown</b> fox jumped <i>over</i> the lazy dog.</p>     <!--additional paragraph-->     <!--here two words are bold and two are italicized-->     <p>Pack my <b>box</b> with <i>five</i> dozen <b>liquor</b> <i>jugs</i>. Go to <a href='https://www.esu.edu' target="_blank">site</a></p>     <a href="http://ndangelo.com">Nick's Homepage</a>     <a href="http://ndangelo.com" target="_blank">Nick's Homepage</a> </body> <html> Add an Ordered, Unordered, Definition and Nested list to your html file (one for each). Each should be at least 10 lines or more....
<!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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT