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
Program:
<!--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
- 2:21 m Ο 21% AlmaNet WE ARE HIRING Experienced Freshers Salesforce Platform Developer APPLY NOW SEND YOUR CV: Email: hr.almanet@gmail.com Contact: +91 6264643660 Visit: www.almanet.in Locations: India, USA, UK, Vietnam (Remote & Hybrid Options Available)arrow_forwardProvide a detailed explanation of the architecture on the diagramarrow_forwardhello please explain the architecture in the diagram below. thanks youarrow_forward
- Complete the JavaScript function addPixels () to calculate the sum of pixelAmount and the given element's cssProperty value, and return the new "px" value. Ex: If helloElem's width is 150px, then calling addPixels (hello Elem, "width", 50) should return 150px + 50px = "200px". SHOW EXPECTED HTML JavaScript 1 function addPixels (element, cssProperty, pixelAmount) { 2 3 /* Your solution goes here *1 4 } 5 6 const helloElem = document.querySelector("# helloMessage"); 7 const newVal = addPixels (helloElem, "width", 50); 8 helloElem.style.setProperty("width", newVal); [arrow_forwardSolve in MATLABarrow_forwardHello please look at the attached picture. I need an detailed explanation of the architecturearrow_forward
- Information Security Risk and Vulnerability Assessment 1- Which TCP/IP protocol is used to convert the IP address to the Mac address? Explain 2-What popular switch feature allows you to create communication boundaries between systems connected to the switch3- what types of vulnerability directly related to the programmer of the software?4- Who ensures the entity implements appropriate security controls to protect an asset? Please do not use AI and add refrencearrow_forwardFind the voltage V0 across the 4K resistor using the mesh method or nodal analysis. Note: I have already simulated it and the value it should give is -1.714Varrow_forwardResolver por superposicionarrow_forward
- Describe three (3) Multiplexing techniques common for fiber optic linksarrow_forwardCould you help me to know features of the following concepts: - commercial CA - memory integrity - WMI filterarrow_forwardBriefly describe the issues involved in using ATM technology in Local Area Networksarrow_forward
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
EBK JAVA PROGRAMMINGComputer ScienceISBN:9781337671385Author:FARRELLPublisher:CENGAGE LEARNING - CONSIGNMENT
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage- COMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L