ZuoTi.Pro
Question

Overview The purpose of this assignment is to explore the manner in which CSS styles can...

Overview

The purpose of this assignment is to explore the manner in which CSS styles can be transported into an external file.

Assignment

You may find the W3 Schools examples on this process useful (http://www.w3schools.com/css/css_howto.asp). Once you have a working understanding of how to move your stylesheet outside of the HTML file and into a CSS file, remove and style information from your Weekly Assignment #02's HTML file and move it to an externally attached CSS file. When you are finished, place both files or the underlying directory structure you have created into a single, zipped folder and attach it to this

This is my Weekly Assignment #02 in Notepad++:

<!DOCTYPE html>

<html lang="en">

<head>

<!--title for web page -->

<title>HTML Table Markup</title>

<meta charset="UTF-8">

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

<!--embedded style sheet -->

<style>

.monthcalender{

float:left;

padding: 20px;

}

.calender{

float: left;

padding: 20px;

}

.calender table,th,tr,td{

border: 1px solid red;

border-collapse: collapse;

}

.calender th{

background-color: orange;

padding: 10px;

color: green;

font-size: 20px;

font-weight: bold;

}

.calender td{

background-color: yellow;

padding: 10px;

font-size: 20px;

font-weight: bold;

color: blue;

}

</style>

</head>

<body>

<div class="monthcalender">

<!--multiplication table -->

<h1>Multiplication table</h1>

<table border="1">

<tr>

<th>NO</th>

<th>Multiply By</th>

<th>Result</th>

</tr>

<tr>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td>2</td>

<td>2</td>

<td>4</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

<td>9</td>

</tr>

<tr>

<td>4</td>

<td>4</td>

<td>16</td>

</tr>

<tr>

<td>5</td>

<td>5</td>

<td>125</td>

</tr>

<tr>

<td>6</td>

<td>6</td>

<td>36</td>

</tr>

<tr>

<td>7</td>

<td>7</td>

<td>49</td>

</tr>

<tr>

<td>8</td>

<td>8</td>

<td>64</td>

</tr>

<tr>

<td>9</td>

<td>9</td>

<td>81</td>

</tr>

<tr>

<td>10</td>

<td>10</td>

<td>100</td>

</tr>

<tr>

<td>11</td>

<td>11</td>

<td>121</td>

</tr>

<tr>

<td>12</td>

<td>12</td>

<td>144</td>

</tr>

</table>

</div>

<div class="calender">

<!-- Month calender -->

<h1>Month Calender</h1>

<table>

<tr>

<th>MON</th>

<th>TUE</th>

<th>WED</th>

<th>THR</th>

<th>FRI</th>

<th>SAT</th>

<th>SUN</th>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

</tr>

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

<td>14</td>

<td>15</td>

<td>16</td>

<td>17</td>

</tr>

<tr>

<td>18</td>

<td>19</td>

<td>20</td>

<td>21</td>

<td>22</td>

<td>23</td>

<td>24</td>

</tr>

<tr>

<td>25</td>

<td>26</td>

<td>27</td>

<td>28</td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</div>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Please find the content of each file below.

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<!--title for web page -->

<title>HTML Table Markup</title>

<meta charset="UTF-8">

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

<!--embedded style sheet -->

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

<body>

<div class="monthcalender">

<!--multiplication table -->

<h1>Multiplication table</h1>

<table border="1">

<tr>

<th>NO</th>

<th>Multiply By</th>

<th>Result</th>

</tr>

<tr>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td>2</td>

<td>2</td>

<td>4</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

<td>9</td>

</tr>

<tr>

<td>4</td>

<td>4</td>

<td>16</td>

</tr>

<tr>

<td>5</td>

<td>5</td>

<td>125</td>

</tr>

<tr>

<td>6</td>

<td>6</td>

<td>36</td>

</tr>

<tr>

<td>7</td>

<td>7</td>

<td>49</td>

</tr>

<tr>

<td>8</td>

<td>8</td>

<td>64</td>

</tr>

<tr>

<td>9</td>

<td>9</td>

<td>81</td>

</tr>

<tr>

<td>10</td>

<td>10</td>

<td>100</td>

</tr>

<tr>

<td>11</td>

<td>11</td>

<td>121</td>

</tr>

<tr>

<td>12</td>

<td>12</td>

<td>144</td>

</tr>

</table>

</div>

<div class="calender">

<!-- Month calender -->

<h1>Month Calender</h1>

<table>

<tr>

<th>MON</th>

<th>TUE</th>

<th>WED</th>

<th>THR</th>

<th>FRI</th>

<th>SAT</th>

<th>SUN</th>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

</tr>

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

<td>14</td>

<td>15</td>

<td>16</td>

<td>17</td>

</tr>

<tr>

<td>18</td>

<td>19</td>

<td>20</td>

<td>21</td>

<td>22</td>

<td>23</td>

<td>24</td>

</tr>

<tr>

<td>25</td>

<td>26</td>

<td>27</td>

<td>28</td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</div>

</body>

</html>

mystyle.css


.monthcalender{

float:left;

padding: 20px;

}

.calender{

float: left;

padding: 20px;

}

.calender table,th,tr,td{

border: 1px solid red;

border-collapse: collapse;

}

.calender th{

background-color: orange;

padding: 10px;

color: green;

font-size: 20px;

font-weight: bold;

}

.calender td{

background-color: yellow;

padding: 10px;

font-size: 20px;

font-weight: bold;

color: blue;

}

0 0
Add a comment
Know the answer?
Add Answer to:
Overview The purpose of this assignment is to explore the manner in which CSS styles can...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align:...

    <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...

  • You will use your text editor to create a table and apply table styles. First, you...

    You will use your text editor to create a table and apply table styles. First, you insert a table element. Next, you add a table caption, table rows, table headers, and table data. Then, you create style rules to format the table. Work with the apply08.html file and the applystyles08.css file. You will also use professional web development practices to indent, space, comment, and validate your code. 3. In the apply08.html file, add a table element within the main element....

  • HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page,...

    HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page, use a background color of #CCCC99, and display text in arial or the browser default sans-serif font. Configure this table using CSS instead of obsolete HTML attributes. Place an e-mail link to yourself on the web page. Save the file as mytable.html. HERE IS THE CODE FOR 8.1: <!DOCTYPE html> <html lang="en"> <head> <title>Practice with Tables</title> <meta charset="utf-8"> </head> <body> <table border="1" > <caption>School...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • Can you please assist me with this HTML? Below is what I have but it isn't...

    Can you please assist me with this HTML? Below is what I have but it isn't working. Filename: jpf_sudoku.css /* Table Styles */ table.spuzzle { border-collapse: collapse; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; width: 90%; } table.spuzzle td { border: 5px outset gray; width: 33.3%; } table.spuzzle th { font color: gray; padding-right: 10px; padding-bottom: 10px; } /* Inner Table Styles */ table.subTable { border-collapse: collapse; width: 100%; } table.subTable td { box-shadow: 0px 0px 15px inset; border:...

  • Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...

    Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /* Date:           Today's Date --> September 22, 2019 /* Description:   Lab Number --> Lab04 /*doctype css*/ @import url(fonts/chuckfive.css); @import url(fonts/merriweather.css); body    { background-color: rgb(199,201,191);        } div { border: 1px solid black;        padding: 100px 100px 100px 100px;        background-color: gray; } nav { text-align: center;    color: rgb( 7,20,138); } header, footer   { background-color: rgb(199,201,199);        color:...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • I have to make a pixel art maker using javascript. HTML and CSS were already provided....

    I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...

  • Trying to understand java script.. The code provided prints out a game board of cells that...

    Trying to understand java script.. The code provided prints out a game board of cells that are 10 x 10.   I currnetly have it printed out so that it will print out pink squares. how can i create a click even on any of the pink squares that when they are clicked it will turn the square black...   then any square that is black when it is clicked it will change back to the color pink html/js code and css...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT