Basics of Web Design: HTML5 & CSS3 (3rd Edition)
3rd Edition
ISBN: 9780133970746
Author: Terry Felke-Morris, Terry Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Expert Solution & Answer
Chapter 7, Problem 2RQ
Program Description Answer
Relative positioning is used to change the position of an HTML element marginally, relative to where it would else appear in usual flow.
Hence, the correct answer is option “A”.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Q6. By using the program below: Kindly Set the transparency/opacity of the <h1> element to "0.4".
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: red;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Q5. By using the program below: Kindly Set the background color for the page to "linen" and the background color for <h1> to "lightblue".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
By using the program below: Kindly Set the <p> to "italic", "20px" and "Verdana".
<!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>
Chapter 7 Solutions
Basics of Web Design: HTML5 & CSS3 (3rd Edition)
Knowledge Booster
Similar questions
- How do I add multiple floating images but keep them contained to the layout below like the guide image I have below? I have a floating image but it is just staying in the middle of the page. Also why is my footer image on the right instead of at the bottom where it should be? HTML <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>Flexbox Coding</title></head> <link rel="stylesheet" href="Style.css"> <body> <header class="header-image"> <img src="57mBcYi.jpeg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Link to Page 1</a></li> <li><a href="Page2.html">Link to Page 2</a></li> </ul> </div> <div>An country…arrow_forwardCreate another new text file and write the following codes. <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <h3> A White Header </h3> <p> This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! </p> </body> </html> Save this file with name MyExternalCSSdemo.html (Run and see the effect.) Create a new folder name – Tutorial -5 Create a two text file inside this folder and name – Tutorial -5.txt for HTML page and ExternalCSS.txt for CSS file Open Tutorial -5.txt as a sublime text (by right click on it) Following tasks to be completed to develop a web page using external CSS. 1. Create an External CSS which should have background colour ‘white’, Header H1 colour ‘black’ and paragraph colour ‘Red’ 2. Web page should have…arrow_forwardAdd a form on the checkout.html page that takes your name, email, phone number, and a credit card number. Use a regular expression to validate the email, phone number, and credit card. Existing code: checkout.html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 80px; height: auto; } </style> </head> <body> <div id="productsFromCart"> </div> <script> let items = localStorage.getItem("myItems") ? JSON.parse(localStorage.getItem("myItems")) : []; items.forEach((element,index) => { let products = ""; products += "<div id='product" + element.id + "' class='card'>"; products += "<img src='" + element.image + "' />"; products += "<h1>" + element.name + "</h1>"; products += "<p class='price'>" + element.price + "</p>"; products += "<p>" + element.category +…arrow_forward
- ⦁ Create a new blank spreadsheet⦁ Save the document as Lab 6.0⦁ Merge and center cells A1: I1 ⦁ In cell A1 Type: CIT 105 Lab 6.0⦁ Make the following changes to CIT 105 Lab 6.0 ⦁ Bold CIT 105 Lab 6.0⦁ Change the font size to 16⦁ Change the font color to red⦁ Merge and center cells A2:I2⦁ Make the following changes to A2⦁ Type EARNINGS in cell A2⦁ Bold EARNINGS⦁ In A3 type: Occupation⦁ In B3 type: Median Pay⦁ In F3 type: Income⦁ In I3 type: After Taxes⦁ In A4 type the name of the occupation you hope to obtain (HINT: use the one you researched on Occupation Outlook Handbook) (Data Analyst) ⦁ In B4 enter the median pay for that occupation on the Occupation Outlook Handbook⦁ In F4 enter: Yearly Pay⦁ In F5 enter: Monthly Pay⦁ In F6 enter: 2-WK Pay⦁ In F7 enter: 1-WK Pay⦁ In F8 enter: Daily Pay⦁ In F9 enter: Hourly Pay⦁ Merge and center A11:I11⦁ In A11 enter: Budget⦁ Bold Budget⦁ In A12:A21 create the list…arrow_forward(FBLM) Modify the example in Fig. 5.16 to use a vertical flexbox. Use HTML-CSS <!DOCTYPE html> <!-- Fig. 5.16: fblm.html --> <!-- Flexible Box Layout Model. --> <html> <head> <metacharset = "utf-8"> <title>Flexible Box Layout Model</title> <linkhref = 'http://fonts.googleapis.com/css?family=Rosario' rel = 'stylesheet' type = 'text/css'> <styletype = "text/css"> .flexbox { width:600px; height:420px; display: -webkit-box; display: box; -webkit-box-orient: horizontal; box-orient: horizontal; } .flexbox>div { -webkit-transition:1s ease-out; transition:1s ease-out; -webkit-border-radius:10px; border-radius:10px; border:2px solid black; width:120px; margin:10px-10px10px0px; padding:20px20px20px20px; box-shadow:10px10px10px dimgrey; }…arrow_forwardHere is a sample html file with a submit button. Now modify the style of theparagraph text through javascript code. Clicking on the button the font,font size, and color of the paragraph text will be changed.Sample HTML file :<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS DOM paragraph style</title></head><body><p id ='text'>JavaScript Exercises - w3resource</p><div><button id="jsstyle"onclick="js_style()">Style</button></div></body></html>arrow_forward
- Which code snipped should be used to display an inline style? 1) <styple>p { Margin- bottom: 0; } </style> 2) <link ref “stylesheet” style=”test/css” href = “style.css”> 3) <p style “padding-top: 1 rem”>paragraph 1</p> 4) <script>document.getElementsByTagName (“p”) (0). Style. Color =”blue”; </script>arrow_forwardWrite Css style rulesto layot text in 4 columns with a column gap of 25px , column rule of style solid , color blue and width 4pxarrow_forwardThis is my footer code for an HTML 5 page (part of my assignment), but the footer doesn't show up. It just displays the text. Not sure what the issue is. body > footer address { background-color: rgb(222,128,60); color: white; color: rgba(255, 255, 255, 0.7); font: normal small-caps bold 0.9em/3em Quicksand, Verdana, Geneva, sans-serif; text-align: center;}arrow_forward
- CSS Q1. By using the program below: Kindly change the color of the element with id="para1", to "red". <!DOCTYPE html> <html> <head> </head> <body> <h1>This is a Heading</h1> <p id="para1">This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> Q2. By 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> Q3. By using the program below: Kindly Change the color of all elements with the class "colortext", to "red". <!DOCTYPE html> <html> <head> </head> <body> <h1>This is a Heading</h1> <p>This is a…arrow_forwardI am trying to get the image styles for both page one and two, so all six images, from the html files to the css file. could someone help me as I am not allowed to have style elements on my html sheets, only css. HTML for PAGE 1: <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Flexbox Coding</title> <link rel="stylesheet" href="style.css"></head><body> <header class="header-image"> <img src="57mBcYi.jpeg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Link to Page 1</a></li> <li><a href="Page2.html">Link to Page 2</a></li> </ul> </div> <div> <ul> <li>An country demesne message it. Bachelor domestic extended doubtful as concerns at.…arrow_forwardBy using the program below: Kindly Change the color of all elements with the class "colortext", to "red". <!DOCTYPE html> <html> <head> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p class="colortext">This is another paragraph.</p> <p class="colortext">This is also a paragraph.</p> </body> </html>arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning