This is what it is asking me to do: Using a text editor, create an external CSS
ID: 3755951 • Letter: T
Question
This is what it is asking me to do:
Using a text editor, create an external CSS file named mystyle.css and link each HTML document to the external stylesheet. Note: when applying color to your pages, you should be using the colors from the color palette you exported from coolors.co in Lesson 7. 1. Create a style for the body based upon the following information: a. Copy the existing inline background color style from your page and move the style to your external stylesheet. b. Remove the inline background color from each page. c. Change the default font family. 2. Create a style that groups the header and footer selectors within your external stylesheet: Page 2 of 3 a. Copy the existing inline text align style applied to the header and footer and move the style to your external stylesheet. b. Remove the existing inline text align style from the header and footer on each page. 3. Create a style that groups the navigation link visited state and navigation link unvisited state based upon the following information: a. Apply an appropriate background color, text color, font size, margin, and padding. b. Apply a style that will remove the underline that appears below each navigation link. 4. Create a style for the navigation link hover state that changes the background and text color. 5. Create a style for the first-level headings based upon the following information: a. Copy the existing inline background image and accompanying styles and move the styles to your external stylesheet. b. Remove the existing inline style from the first-level heading on the Index page. c. Apply appropriate padding between 50px to 100px d. Change the default font family. 6. Create a style for the second-level heading based upon the following information: a. Apply appropriate padding, font size, and text color b. Remove the existing inline style from the second-level headings on the Menu page. 7. Stylize the paragraph so that the text appears centered. a. Save the external stylesheet. b. You should notice that the paragraphs on the Menu page are not centered. Add a CSS comment near the paragraph style that explains why the paragraphs on the Menu page are not centered. 8. Create a style for the unordered list based upon the following information: a. Copy the existing inline list type style and move the style to your external stylesheet. b. Remove the existing inline style from the unordered list element on the Index page. 9. Create a style for the description term element (from the description list) based upon the following information: a. Apply bold styling. b. Apply an appropriate font size, background color, font color, and padding. c. Modify the margin to add space above and below the description term. 10. Create a style that centers only the images within the main section. 11. Create a parent child selector for the span element within the footer based upon the following information: a. Copy the existing inline font weight style and move the style to your external stylesheet. b. Remove the existing inline style from the span element in the footer on each page.
This is the page it wants me to create it from:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Jace Arthur David James">
<meta name="description" content="Come taste the tacos that everyone keeps talking about. JJ's tacos are the best of the best and we have the rating to back it up.">
<meta name="keywords" content="JJ's Tacos, tacos, homepage, food turck, mexican food">
<!-- Meta tags are important for several of reasons. Most important woud be the keyword meta that would indicate how people would be able to locate you through a search engine. It also describes a document such as author, date created, etc. You can also add value to the meta tag using the name attribute to add author, keywords, and descriptions. The author defines the develpore or writer of the page, keywords used to find the website when certian words are searched for, and description gives information about the page itself. -->
<title>
Home
</title>
</head>
<!-- Course Name: CIS133DA - Internet/Web Development Level I <br>
Class Number: 12423<br>
Lesson Number: 7<br> -->
<body>
<Header>
<h1>JJ's Tacos<br></h1>
<nav>
<a href="index.html">Home</a>
<a href="Menu.html">Menu</a>
<a href="Events.html">Events</a>
</nav>
</Header>
<main>
<h2>Main Content Area</h2>
<p> JJ's tacos will be closed this coming holiday. We will be spending time with family. Thank you for your understanding!</p>
<!-- I selected xx-large font size, with times new roman font, and red color to show the user urgency. This grabs the user's attention right away. I chose Times New Romas becuase I find it to be the most popular and easiest to read. I did not want to use a font the user could understand/read. It is also a websafe fond which is a font that can be found across all systems because it is preinstalled in the operating system. So the text will display properly no matter the interface being used. If a web safe font is not used it could cause issues with the statement and possibly not even display or display properly cause the user to miss the message. -->
<a><img src="Images/Food%20Truck.jpg" alt="Food Truck" width="300" height="200"></a>
<p><small>Retrieved from: <a href="https://fortcollinsfoodtrucks.com/place/"><em>Fort Collins Food Trucks</em></a></small></p>
<!-- The image is width="300" height="200", jpeg image file, and the size of the file is 322 KB -->
<p>I have selected to have a Taco Food Truck with the name JJ’s Tacos. Items that we sell are tacos in many varieties (Chicken, beef, steak, carnitas, and carne asada), Nachos, Burritos, Quesadillas, Fajita, and Churros. The Home page of the website will include just an overview of JJ’s tacos including the name, about us, location and customer satisfaction. The Menu Page will include all of our options and pricing of food, as well as, catering and combo deals. It will also include contact information for events and also locations of where the truck will be throughout the week. Lastly, the events page will have special events that we host, pictures of previous events, customer satisfaction, and contact information to book events. </p>
<p>Here at JJ’s tacos we serve the best tacos in all of the united states, heck some would even say the world. People come to visit our taco truck for great food, service, and community. Our food truck provides seated area where you can get to know your neighbors and community. We also provide complimentary chips and salsa with each of our orders. We also provide the widest range of salsa offered on a food truck. Ranging from mild all the way to user digression advised hot sauce. I promise you visit JJ’s tacos and you will never look at another taco the same. </p>
<h2>Special event catering available for:</h2>
<ul>
<li>Weddings</li>
<li>Birthday/Graduation Parties</li>
<li>Corporate Events</li>
<li>Concerts</li>
</ul>
</main>
<footer>
<p><span>Catering:</span> 623-999-0007<br>
<span>Orders: </span> 623-999-0008<br>
<!-- I used the tag <b></b> due to the fact that it would bold the word however it is not of importance. It will grab the attention of the viewer, but not throw them off of the information about the food truck and what we have to offer. -->
JAC2180368@maricopa.edu <br>
<a href="https://www.instagram.com/?hl=en"><img src="Images/Instagram.jpg" alt="Instagram" width="75" height="75"></a>
<a href="https://www.facebook.com/"><img src="Images/Facebook.png" alt="Facebook" width="75" height="75"></a>
<a href="https://twitter.com/?lang=en"><img src="Images/Twitter.png" alt="Twitter" width="75" height="75"></a> </p>
<!-- External linking is when you use the fill web address to the file or web page you are linking to. This type of linking is commonly utilized when linking to a file or web page on another website. Then there is internal linking which is you pointing to files stored in the same location as the HTML file you are coding. THis type of link is used for linking to files on your own domain/website. This can make creating links within your HTML code easy as it allows you to just link to the file and not have to worry about the domain or protocal information. -->
<p><small>Copyright ©2018 by <mark>Jace Arthur David James</mark></small></p>
</footer>
</body>
</html>
P.S I can not seem to understand external stylesheets this is my last hope. This is not my major or anything just a class I need to continues on my degree. Any help is appreciated. Thank you so much.
Explanation / Answer
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Jace Arthur David James">
<meta name="description" content="Come taste the tacos that everyone keeps talking about. JJ's tacos are the best of the best and we have the rating to back it up.">
<meta name="keywords" content="JJ's Tacos, tacos, homepage, food turck, mexican food">
<!-- Meta tags are important for several of reasons. Most important woud be the keyword meta that would indicate how people would be able to locate you through a search engine. It also describes a document such as author, date created, etc. You can also add value to the meta tag using the name attribute to add author, keywords, and descriptions. The author defines the develpore or writer of the page, keywords used to find the website when certian words are searched for, and description gives information about the page itself. -->
<title>
Home
</title>
</head>
<!-- Course Name: CIS133DA - Internet/Web Development Level I <br>
Class Number: 12423<br>
Lesson Number: 7<br> -->
<body>
<Header>
<h1>JJ's Tacos<br></h1>
<nav>
<a href="index.html">Home</a>
<a href="Menu.html">Menu</a>
<a href="Events.html">Events</a>
</nav>
</Header>
<main>
<h2>Main Content Area</h2>
<p> JJ's tacos will be closed this coming holiday. We will be spending time with family. Thank you for your understanding!</p>
<!-- I selected xx-large font size, with times new roman font, and red color to show the user urgency. This grabs the user's attention right away. I chose Times New Romas becuase I find it to be the most popular and easiest to read. I did not want to use a font the user could understand/read. It is also a websafe fond which is a font that can be found across all systems because it is preinstalled in the operating system. So the text will display properly no matter the interface being used. If a web safe font is not used it could cause issues with the statement and possibly not even display or display properly cause the user to miss the message. -->
<a><img src="Images/Food%20Truck.jpg" alt="Food Truck" width="300" height="200"></a>
<p><small>Retrieved from: <a href="https://fortcollinsfoodtrucks.com/place/"><em>Fort Collins Food Trucks</em></a></small></p>
<!-- The image is width="300" height="200", jpeg image file, and the size of the file is 322 KB -->
<p>I have selected to have a Taco Food Truck with the name JJ’s Tacos. Items that we sell are tacos in many varieties (Chicken, beef, steak, carnitas, and carne asada), Nachos, Burritos, Quesadillas, Fajita, and Churros. The Home page of the website will include just an overview of JJ’s tacos including the name, about us, location and customer satisfaction. The Menu Page will include all of our options and pricing of food, as well as, catering and combo deals. It will also include contact information for events and also locations of where the truck will be throughout the week. Lastly, the events page will have special events that we host, pictures of previous events, customer satisfaction, and contact information to book events. </p>
<p>Here at JJ’s tacos we serve the best tacos in all of the united states, heck some would even say the world. People come to visit our taco truck for great food, service, and community. Our food truck provides seated area where you can get to know your neighbors and community. We also provide complimentary chips and salsa with each of our orders. We also provide the widest range of salsa offered on a food truck. Ranging from mild all the way to user digression advised hot sauce. I promise you visit JJ’s tacos and you will never look at another taco the same. </p>
<h2>Special event catering available for:</h2>
<ul>
<li>Weddings</li>
<li>Birthday/Graduation Parties</li>
<li>Corporate Events</li>
<li>Concerts</li>
</ul>
</main>
<footer>
<p><span>Catering:</span> 623-999-0007<br>
<span>Orders: </span> 623-999-0008<br>
<!-- I used the tag <b></b> due to the fact that it would bold the word however it is not of importance. It will grab the attention of the viewer, but not throw them off of the information about the food truck and what we have to offer. -->
JAC2180368@maricopa.edu <br>
<a href="https://www.instagram.com/?hl=en"><img src="Images/Instagram.jpg" alt="Instagram" width="75" height="75"></a>
<a href="https://www.facebook.com/"><img src="Images/Facebook.png" alt="Facebook" width="75" height="75"></a>
<a href="https://twitter.com/?lang=en"><img src="Images/Twitter.png" alt="Twitter" width="75" height="75"></a> </p>
<!-- External linking is when you use the fill web address to the file or web page you are linking to. This type of linking is commonly utilized when linking to a file or web page on another website. Then there is internal linking which is you pointing to files stored in the same location as the HTML file you are coding. THis type of link is used for linking to files on your own domain/website. This can make creating links within your HTML code easy as it allows you to just link to the file and not have to worry about the domain or protocal information. -->
<p><small>Copyright ©2018 by <mark>Jace Arthur David James</mark></small></p>
</footer>
</body>
</html>
P.S I can not seem to understand external stylesheets this is my last hope. This is not my major or anything just a class I need to continues on my degree. Any help is appreciated. Thank you so much.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.