Concept explainers
External Style Sheets:
- • External Style Sheets are used to change the entire look of the website by changing just one file.
- • This style sheet is a separate file linked to an HTML web page and is saved with “.css” extension.
- • External Style Sheets can be used to declare all the styles that are used on the website.
- • It should not contain any HTML tags.
Explanation of Solution
(a)
Filename: format1.css
<!--HTML Tag-->
<html>
<!--Head Tag-->
<head>
<!--Style Tag-->
<style>
<!--Alignment for body tag-->
body
{
background-color: #FFFFFF;
color: #000099;
font-family: Arial, Helvetica, sans-serif;
}
<!--Alignment for hyperlink tag-->
a
{
background-color: #CCCCCC;
}
<!--Alignment for header tag-->
h1
{
font-family: "Times New Roman", serif;
color: #FF0000;
}
<!--Close Tag-->
</style>
<!--Close Tag-->
</head>
<!--Body Tag-->
<body>
<!--Heading Tag-->
<h1>Practice with External Style Sheet</h1>
<!--Paragraph Tag-->
<p>This is an example of CSS code for an external style sheet that configures the text color to blue,backgorund color to be white and in the font family: Arial, Helvetica, or sans-serif.</p>
<!--Hyperlink Tag-->
<a href=google.com>Google</a>
<a href=yahoo.com>Yahoo</a>
<a href=notdoppler.com>Games</a>
<!--Close Tag-->
</body>
<!--Close Tag-->
</html>
Explanation:
The above program shows an external style sheet which include white background, blue color text and font used is Arial. The header portion <h1> is using the Times New Roman font with red text color and hyperlinks have a gray background.
Output:
Screenshot of the webpage
External Style Sheets:
- • External Style Sheets are used to change the entire look of the website by changing just one file.
- • This style sheet is a separate file linked to an HTML web page and is saved with “.css” extension.
- • External Style Sheets can be used to declare all the styles that are used on the website.
- • It should not contain any HTML tags.
Explanation of Solution
(b)
Filename: format2.css
Program:
<!--HTML Tag-->
<html>
<!--Head Tag-->
<head>
<!--Style Tag-->
<style>
<!--Alignment for body tag-->
body
{
background-color: #FFFF66;
color: #00FF00;
}
<!--Alignment for hyperlink tag-->
a
{
background-color:#FFFFFF;
}
<!--Alignment for header tag-->
h1
{
font-family: "Times New Roman",serif;
background-color: #FFFFFF;
color: #00FF00;
}
<!--Close tag-->
</style>
<!--Close tag-->
</head>
<!--Body tag-->
<body>
<!--Heading tag-->
<h1>Practice with External Style Sheet</h1>
<!--Paragraph tag-->
<p>This is an example of CSS code for an external style sheet that configures the text color to green,backgorund color to be yellow and in the font family: Arial, Helvetica, or sans-serif.</p>
<!--Hyperlink tag-->
<a href=”google.com”>Google</a>
<a href=”yahoo.com”>Yahoo</a>
<a href=”notdoppler.com>Games</a>
<!--Close tag-->
</body>
<!--Close tag-->
</html>
Explanation:
The above program shows an external style sheet, which includes yellow background and green text. The header portion <h1> uses Times New Roman font with white background and green text.
Output:
Screenshot of the webpage
External Style Sheets:
- • External Style Sheets are used to change the entire look of the website by changing just one file.
- • This style sheet is a separate file linked to an HTML web page and is saved with “.css” extension.
- • External Style Sheets can be used to declare all the styles that are used on the website.
- • It should not contain any HTML tags.
Explanation of Solution
(c)
Filename: moviecss1.html
Program:
<!--HTML Tag-->
<html lang="en">
<!--Head Tag-->
<head>
<!--Title Tag-->
<title>External Style Sheet</title>
<link rel="stylesheet" href="format1.css">
<!--Close Tag-->
</head>
<!--Body Tag-->
<body>
<!--Header Tag-->
<header><h1>Harry Potter</h1></header>
<!--Main Tag-->
<main>
<p>Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's struggle against Lord Voldemort, a dark wizard who intends to become immortal, overthrow the wizard governing body known as the Ministry of Magic, and subjugate all wizards and muggles (non-magical people). </p>
<!--Unordered List Tag-->
<ul>
<li>Harry Potter</li>
<li> Albus Dumbledore</li>
<li>Voldemort</li>
</ul>
<!--Division Tag-->
<div><a href=“ http://www.movie- page.com/1999/Matrix.htm”>Movie-Page.com</a></div>
<!--Close Tag-->
</main>
<!--Footer Tag-->
<footer><a href="mailto:webdevfoundations@hotmail.com">webdevfoundations@hotmail.com</a></footer>
<!--Close Tag-->
</body>
<!--Close Tag-->
</html>
Explanation:
The above program shows the creation of a web page titled “External Style Sheets”. It displays the movie name “Harry potter” inside the header tag <h1> and a description about the movie within the paragraph tag <p> </p>. The page also contains a hyperlink to the website about the movie.
Output:
Screenshot of the webpage
External Style Sheets:
- • External Style Sheets are used to change the entire look of the website by changing just one file.
- • This style sheet is a separate file linked to an HTML web page and is saved with “.css” extension.
- • External Style Sheets can be used to declare all the styles that are used on the website.
- • It should not contain any HTML tags.
Explanation of Solution
Filename – moviecss2.html
Program:
<!--HTML Tag-->
<html lang="en">
<!--Head Tag-->
<head>
<!--Title Tag-->
<title>External Style Sheet</title>
<link rel="stylesheet" href="format2.css">
<!--Close Tag-->
</head>
<!--Body Tag-->
<body>
<!--Header Tag-->
<header><h1>Harry Potter</h1></header>
<!--Main Tag-->
<main>
<p>Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's struggle against Lord Voldemort, a dark wizard who intends to become immortal, overthrow the wizard governing body known as the Ministry of Magic, and subjugate all wizards and muggles (non-magical people). </p>
<!--Unordered List Tag-->
<ul>
<li>Harry Potter</li>
<li> Albus Dumbledore</li>
<li>Voldemort</li>
</ul>
<!--Division Tag-->
<div><a href=“ http://www.movie- page.com/1999/Matrix.htm”>Movie-Page.com</a></div>
<!--Close Tag-->
</main>
<!--Footer Tag-->
<footer><a href="mailto:webdevfoundations@hotmail.com">webdevfoundations@hotmail.com</a></footer>
<!--Close Tag-->
</body>
<!--Close Tag-->
</html>
Output:
Screenshot of the webpage
Want to see more full solutions like this?
Chapter 4 Solutions
Basics of Web Design: Html5 & Css3
- Create a web page containing two images, where one image overlaps another image by using the z-index CSS property. Output:arrow_forwardCreate an external CSS file and attach it to the html document, you need to name the file with your first name and last initial. The only change you are allowed or need to make in the HTML file is the link to the attached CSS sheet. study the HTML file before starting note the ID and classes in the document. using only CSS to duplicate the layout of the sample image use position,grid or flex combination of layout methodsarrow_forwardBy using the program below: Kindly use CSS, Set the text color for the page to "red", and the text color for <h1> to "blue". <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>arrow_forward
- Create a simple, single-page website to display thumbnails of image files relating to a specific topic. These could be your own vacation photos, animal or nature images, favorite performers, athletes, etc. Images from copyrighted sources may be used for this purpose without permission, but should be credited as to their source. Size the thumbnails to maintain the correct aspect ratio (i.e., so that the images in the thumbs are not distorted), set the thumbs up as links to the actual image files, and organize the thumbnails. No hand written and fast answer with the explanationarrow_forwardHello, can someone write the code for me for an external css sheet for this html file layout. It has to be an external css. I can do all content within the formatted layout provided but I need help with the layout itself.arrow_forwardI am facing some issues while trying to position an image using CSS. In the first section (TITLE), I made a row with 2 elements, an text (meet new and ...) with 2 buttons, and an image. The position of the image is absolute, because I would like it to be superposed by the second section (see image). The problem is that if the position is absolute, I cannot manage to change the bottom, top and etc, because everytime I try to, even if I specify only 1px ou 1%, the image moves a lot. If I change the position to relative I can't manage to superpose the image with the second section. My question is : How do I manage to change the position of the image and still suporpose it with the second section page? Watch the video : https://youtu.be/HT8jEux_av0 link to the css file : https://pastebin.com/JQhUXrsg link to the html file : https://pastebin.com/wRJU3ESV the class of the image is title-image and the html section is : titlearrow_forward
- Design a basic wesbite layout for a restaurant with a home page, and about page, a menu page, and a contact page (with a form: form doesn't have to be useable!) PLUS a separate CSS file with style features. Use only HTML and CSS, no other formats.arrow_forwardCan someone tell me why my footer image isnt covering the whole bottom area and is instead leaving black areas around the perimeter? Also how do I decrease the padding so the header looks closer to the above table? <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><html> <body> <head> <meta charset="utf-8" /> <title>HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header-image"> <img src="Tardis.jpg" alt="Header Image" width="1060" /> </header> <table style="33%"> <tr> <th>Navigation</th> <th>Doctor Profile</th> <th>Image</th> </tr> <tr> <tr> <td> <ul> <li><a…arrow_forwardthis is what I have so far I need help with seperading the style sheet into three files:colors.cssformatting.csstransitions-animations.css and anythe else I may have missed <!DOCTYPE html><html> <head><title>Home Page</title><link rel="stylesheet" href="style.css"></head> <body><!--Added main tag--><main><!--Added nav tag--><nav><a href="index.html">Home</a><a href="contact.html">Contact</a><a href="about.html">About</a></nav><h1>Welcome to my (about me) site</h1><picture><source media="(min-width:650px)" srcset="./images/me3-650.jpg"><source media="(min-width:465px)" srcset="./images/me3-465.jpg"><img src="./images/me3.JPG" alt="ME" style="width:auto;"></picture> <h3>HI there this is one of my favorite songs down below.</h3><iframe width="420"…arrow_forward
- 4.4 Write a CSS rule that places a background image halfway down the page, tiling it horizon- tally. The image should remain in place when the user scrolls up or down.4.5 Write a CSS rule that gives all h1 and h2 elements a padding of 0.5 ems, a dashed border style and a margin of 0.5 ems.4.6 Write a CSS rule that changes the color of all elements containing attribute class = "greenMove" to green and shifts them down 25 pixels and right 15 pixels.arrow_forwardthis is what I have so far I need help with seperading the style sheet into three files:colors.cssformatting.csstransitions-animations.css <!DOCTYPE html><html> <head><title>Home Page</title><link rel="stylesheet" href="style.css"></head> <body><!--Added main tag--><main><!--Added nav tag--><nav><a href="index.html">Home</a><a href="contact.html">Contact</a><a href="about.html">About</a></nav><h1>Welcome to my (about me) site</h1><picture><source media="(min-width:650px)" srcset="./images/me3-650.jpg"><source media="(min-width:465px)" srcset="./images/me3-465.jpg"><img src="./images/me3.JPG" alt="ME" style="width:auto;"></picture> <h3>HI there this is one of my favorite songs down below.</h3><iframe width="420" height="345"src="https://www.bing.com/search?q=Nirvana%20-%20The%20Man%20Who%20Sold%20The…arrow_forwardWrite a css style like, the title is list, Declare a css rule with an id selector, set the font size to double, and display the text "work" apply the id selector to a <b> tag for the display of text "john"arrow_forward
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning