CIS 217 – Web Programming – Programming Assignment, External Stylesheets Review
ID: 3607401 • Letter: C
Question
CIS 217 – Web Programming – Programming Assignment, External Stylesheets
Review the attached example code that gives a short example of moving styles to an external file. You may also 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 assignment link.
Here's what I have so far:
My Home Page.html
<body>
<font size="5">
<pre>
<body>
<link href="Assignment 2 styles.css" rel="stylesheet" />
<h1>The Home Page for the Calendar and Multiplication chart.</h1>
<a href="My Calendar.html">My Calendar</a>
<a href="My Multiplication Table.html">My Multiplication Table</a>
<img src="Driving in the sunset.png" align="right" alt = "DRIVING IN THE SUNSET"
<address> My HCC email: mjackson33@owlmail.harford.edu
</body>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
My Calendar.html
<body>
<pre>
<body>
<link href="Assignment 2 styles.css" rel="stylesheet" />
<h1>My Calendar. Enjoy!!!</h1>
</body>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
line-height: 1;
margin: 50px;
}
div {
background: #9abab5;
border-radius: 15px;
box-sizing: border-box;
padding: 15px;
width: 500px;
}
header {
overflow: clear;
position: relative;
}
h2 {
font-family: sans-serif;
font-size: 20px;
font-weight: 700;
margin: 0 0 10px;
text-align: center;
}
table {
border-color: black;
background: #fffe;
border-collapse: collapse;
font-size: 20px;
width: 100%;
}
td {
border: 1px solid #ccc;
border-color: black;
color: #444;
line-height: 22px;
text-align: center;
}
tr:first-child td {
color: #222;
font-weight: 700;
}
.selected {
background: #f0951d;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
}
</style>
</head>
<body>
<div>
<header>
<h2>October 2017</h2>
</header>
<table>
<tr>
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>Th</td>
<td>F</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<a href="My Home Page.html">Back to My Home Page</a>
</body>
</html>
My Multiplication Table.html
<body>
<pre>
<body>
<link href="Assignment 2 styles.css" rel="stylesheet" />
<h1>My Multiplication Table. Enjoy!!!</h1>
</body>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
line-height: 1;
margin: 50px;
}
div {
background: #9abab5;
border-radius: 15px;
box-sizing: border-box;
padding: 15px;
width: 500px;
}
header {
overflow: clear;
position: relative;
}
h2 {
font-family: sans-serif;
font-size: 20px;
font-weight: 700;
margin: 0 0 10px;
text-align: center;
}
table {
border-color: black;
background: #fffe;
border-collapse: collapse;
font-size: 20px;
width: 50%;
}
td {
border: 1px solid #ccc;
border-color: black;
color: #444;
line-height: 22px;
text-align: center;
}
tr {
color: #222;
font-weight: 700;
}
.selected {
background: #f0951d;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
}
</style>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
<td>30</td>
<td>33</td>
<td>36</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
<td>40</td>
<td>44</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
<td>50</td>
<td>55</td>
<td>60</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
<td>60</td>
<td>66</td>
<td>72</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
<td>70</td>
<td>77</td>
<td>84</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
<td>80</td>
<td>88</td>
<td>96</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
<td>90</td>
<td>99</td>
<td>108</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
<td>120</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>44</td>
<td>55</td>
<td>66</td>
<td>77</td>
<td>88</td>
<td>99</td>
<td>110</td>
<td>121</td>
<td>132</td>
</tr>
<tr>
<td>12</td>
<td>24</td>
<td>36</td>
<td>48</td>
<td>60</td>
<td>72</td>
<td>84</td>
<td>96</td>
<td>108</td>
<td>120</td>
<td>132</td>
<td>144</td>
</tr>
</table>
</div>
<a href="My Home Page.html">Back to My Home Page</a>
</body>
</html>
Can you please make it so that all of the HTML style information code is converted into CSS style information code?
Explanation / Answer
Before giving the answer I wanna say you that you need to folow the standards while writting the code.
Html basic things.
1.Their should be only one head and body tags.
2.All the css,scripts ans links should be given in the head tag only. after head tag only body tag wil be opend.
Here I have moved your htmlstyle to the respected css and I have also formated your html code to satandard foramt.
My Home Page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="Assignment 2 styles.css" rel="stylesheet" />
<link href="home.css" rel="stylesheet" />
</head>
<body>
<h1>The Home Page for the Calendar and Multiplication chart.</h1>
<a href="My Calendar.html">My Calendar</a><br>
<a href="My Multiplication Table.html">My Multiplication Table</a>
<img src="Driving in the sunset.png" align="right" alt = "DRIVING IN THE SUNSET">
<address> My HCC email: mjackson33@owlmail.harford.edu</address>
</body>
</html>
home.css
body{
background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px;
background-color: slategray;
background-size:75px 100px;
font-family:Agency FB;
}
My Calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="Assignment 2 styles.css" rel="stylesheet" />
<link href="Calendar.css" rel="stylesheet" />
</head>
<body>
<h1>My Calendar. Enjoy!!!</h1>
<div>
<header>
<h2>October 2017</h2>
</header>
<table>
<tr>
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>Th</td>
<td>F</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<a href="My Home Page.html">Back to My Home Page</a>
</body>
</html>
Calendar.css
body {
line-height: 1;
margin: 50px;
background-color:#42f459;
font-family:Agency FB;
}
div {
background: #9abab5;
border-radius: 15px;
box-sizing: border-box;
padding: 15px;
width: 500px;
}
header {
overflow: clear;
position: relative;
}
h2 {
font-family: sans-serif;
font-size: 20px;
font-weight: 700;
margin: 0 0 10px;
text-align: center;
}
table {
border-color: black;
background: #fffe;
border-collapse: collapse;
font-size: 20px;
width: 100%;
}
td {
border: 1px solid #ccc;
border-color: black;
color: #444;
line-height: 22px;
text-align: center;
}
tr:first-child td {
color: #222;
font-weight: 700;
}
.selected {
background: #f0951d;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
}
My Multiplication Table.html
<!DOCTYPE html>
<html>
<head>
<!--<pre></pre>-->
<link href="Assignment 2 styles.css" rel="stylesheet" />
<link href="multiplication.css" rel="stylesheet" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>My Multiplication Table. Enjoy!!!</h1>
<div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
<td>30</td>
<td>33</td>
<td>36</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
<td>40</td>
<td>44</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
<td>50</td>
<td>55</td>
<td>60</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
<td>60</td>
<td>66</td>
<td>72</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
<td>70</td>
<td>77</td>
<td>84</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
<td>80</td>
<td>88</td>
<td>96</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
<td>90</td>
<td>99</td>
<td>108</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
<td>120</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>44</td>
<td>55</td>
<td>66</td>
<td>77</td>
<td>88</td>
<td>99</td>
<td>110</td>
<td>121</td>
<td>132</td>
</tr>
<tr>
<td>12</td>
<td>24</td>
<td>36</td>
<td>48</td>
<td>60</td>
<td>72</td>
<td>84</td>
<td>96</td>
<td>108</td>
<td>120</td>
<td>132</td>
<td>144</td>
</tr>
</table>
</div>
<a href="My Home Page.html">Back to My Home Page</a>
</body>
</html>
multiplication.css
body {
line-height: 1;
margin: 50px;
background-color:DeepSkyBlue;
font-family:Agency FB;
}
div {
background: #9abab5;
border-radius: 15px;
box-sizing: border-box;
padding: 15px;
width: 500px;
}
header {
overflow: clear;
position: relative;
}
h2 {
font-family: sans-serif;
font-size: 20px;
font-weight: 700;
margin: 0 0 10px;
text-align: center;
}
table {
border-color: black;
background: #fffe;
border-collapse: collapse;
font-size: 20px;
width: 50%;
}
td {
border: 1px solid #ccc;
border-color: black;
color: #444;
line-height: 22px;
text-align: center;
}
tr {
color: #222;
font-weight: 700;
}
.selected {
background: #f0951d;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
}
===============================================
If you need any clarification comment below i will answer you. happy to help you.
If you like the answer please give me Thumbs UP please.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.