New Perspectives On Html5, Css3, And Javascript, Loose-leaf Version
6th Edition
ISBN: 9781337685764
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 5, Problem 17CP1
(a)
Program Plan Intro
To set the width of class size1 of comic book panel img elements to 100% within the media query style in the file gp_layout.css.
(b)
Program Plan Intro
To set the width of class size2 of comic book panel img elements to 60% within the media query style in the file gp_layout.css.
(c)
Program Plan Intro
To set the width of class size3 of comic book panel img elements to 40% within the media query style in the file gp_layout.css.
(d)
Program Plan Intro
To set the width of class size4 of comic book panel img elements to 30% within the media query style in the file gp_layout.css.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
Step 20: Mobile Styles
When the user views the page on a mobile device, we don't want the label elements to appear to the left of the input elements because that takes up too much horizontal space. We need to adjust our layout to be more vertical.
Create a media query for screens with a maximum width of 767 pixels. Inside the media query, add a rule for any label elements inside the form element with the id registration that removes the float, sets the width to 100%, and aligns the text to the left.
Add a rule inside the media query for any input element inside the form element with the id registration that removes the float and sets the width to 100%.
Because we set specific widths for the input elements that appear on a single row, we need to override those settings in the mobile view. Add a rule inside the media query for the input elements with the ids city, state, and zip inside the form element with the id registration that sets the maximum width to 100%.
Add a rule…
Add the table body section and within the table body, create the layout of the crossword puzzle subject to the following conditions:
The table will contain 9 rows and 8 columns.
Within each row will be a number of table data cells. If the cell is a blank cell shown in Figure 6–49, assign it the class name blank. If a blank cell covers multiple rows and/or columns, make that cell a spanning cell and adjust the number of cells in subsequent rows and columns accordingly to preserve the table layout.
Several cells contain numbers that will be used as crossword puzzle clues. Number the appropriate cells from 1 up to 26 to match the layout in Figure 6–49.
Your completed assignment should contain all of the following:
■ Your color scheme's name should be set as the table's header. It should have one
or more font styles applied to it to differentiate it from other text in the table.
▪ You should list each color name, with each cell having its color set as its
background color.
■ Include cells that give each color's hex value.
■ Include cells that give each color's rgb value.
▪ Include cells that give each color's hsl value.
▪ Your HTML table should be logically and properly constructed.
Chapter 5 Solutions
New Perspectives On Html5, Css3, And Javascript, Loose-leaf Version
Ch. 5.2 - Prob. 8QCCh. 5.2 - Prob. 9QCCh. 5.3 - Prob. 8QCCh. 5.3 - Prob. 9QCCh. 5 - Prob. 1RACh. 5 - Prob. 2RACh. 5 - Prob. 3RACh. 5 - Prob. 4RACh. 5 - Prob. 5RACh. 5 - Prob. 6RA
Ch. 5 - Prob. 7RACh. 5 - Prob. 8RACh. 5 - Prob. 9RACh. 5 - Prob. 10RACh. 5 - Prob. 11RACh. 5 - Prob. 12RACh. 5 - Prob. 13RACh. 5 - Prob. 14RACh. 5 - Prob. 15RACh. 5 - Prob. 16RACh. 5 - Prob. 17RACh. 5 - Prob. 18RACh. 5 - Prob. 19RACh. 5 - Prob. 20RACh. 5 - Prob. 21RACh. 5 - Prob. 22RACh. 5 - Prob. 23RACh. 5 - Prob. 24RACh. 5 - Prob. 25RACh. 5 - Prob. 26RACh. 5 - Prob. 1CP1Ch. 5 - Prob. 2CP1Ch. 5 - Prob. 3CP1Ch. 5 - Prob. 4CP1Ch. 5 - Prob. 5CP1Ch. 5 - Prob. 6CP1Ch. 5 - Prob. 7CP1Ch. 5 - Prob. 8CP1Ch. 5 - Prob. 9CP1Ch. 5 - Prob. 10CP1Ch. 5 - Prob. 11CP1Ch. 5 - Prob. 12CP1Ch. 5 - Prob. 13CP1Ch. 5 - Prob. 14CP1Ch. 5 - Prob. 15CP1Ch. 5 - Prob. 16CP1Ch. 5 - Prob. 17CP1Ch. 5 - Prob. 18CP1Ch. 5 - Prob. 19CP1Ch. 5 - Prob. 1CP2Ch. 5 - Prob. 2CP2Ch. 5 - Prob. 3CP2Ch. 5 - Prob. 4CP2Ch. 5 - Prob. 5CP2Ch. 5 - Prob. 6CP2Ch. 5 - Prob. 7CP2Ch. 5 - Prob. 8CP2Ch. 5 - Prob. 9CP2Ch. 5 - Prob. 10CP2Ch. 5 - Prob. 11CP2Ch. 5 - Prob. 12CP2Ch. 5 - Prob. 13CP2Ch. 5 - Prob. 14CP2Ch. 5 - Prob. 15CP2Ch. 5 - Prob. 16CP2Ch. 5 - Prob. 17CP2Ch. 5 - Prob. 18CP2Ch. 5 - Prob. 19CP2Ch. 5 - Prob. 20CP2Ch. 5 - Prob. 21CP2Ch. 5 - Prob. 1CP3Ch. 5 - Prob. 2CP3Ch. 5 - Prob. 3CP3Ch. 5 - Prob. 4CP3Ch. 5 - Prob. 5CP3Ch. 5 - Prob. 6CP3Ch. 5 - Prob. 9CP3Ch. 5 - Prob. 2CP4
Knowledge Booster
Similar questions
- Add the following comments to the tablet media query: Tablet Viewport: Show tab-desk class, hide mobile class Tablet Viewport: Style rules for nav area Add the following style rules below the "Show tab-desk class, hide mobile class" comment: Style rule for the tab-desk class selector that sets the display to a block. Style rule for the mobile class selector that sets the display to none.arrow_forwardTablet Media Query Next, you’ll define the layout for tablet and desktop devices. Create a media query for screen devices whose width is 481 pixels or greater. Within this media query, display the page body as a flexbox in row orientation with wrapping. Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by hiding this paragraph. Tablet Element Styles The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels. Tablet Navigation Lists For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule to display the top navigation list ul as a flexbox…arrow_forwardCreate a custom form based on the qryBalanceContacts query. Display all fields from the query in the form. Create your own design for the form. Add a label to the bottom of the Detail section that contains your first and last names. Change the label's font so that your name appears in bold, blue font. Change the BalanceDue text box format so that the field value is displayed in bold, red font. Save the form as frmBalanceContacts. Please show step by step how to do this in ACCESS.arrow_forward
- QUESTION: Row & Page Header Styles Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.) Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin. The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that: floats the navigation list on the left, sets the size of the left and right padding to 2%, sets the width of the navigation list to 30% of the width of the header. The hypertext links in the…arrow_forwardQUESTION: Row & Page Header Styles Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.) Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin. The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that: floats the navigation list on the left, sets the size of the left and right padding to 2%, sets the width of the navigation list to 30% of the width of the header. The hypertext links in the…arrow_forwardLook at the code given in table1, Write style rules for displaying the flexboxitems in the order shown in Figure 1. Where thewidth and height of each flexbox item is 50px and40px respectively. Each item has a 1px solid black color border and for the background color, the valueof the color is #4682B4,arrow_forward
- The table displays the five countries that earned the most medals in the 2022 Winter Olympics in Beijing. Hovering the mouse over the text on the expected webpage's top row makes the text orange. Add a new rule using the tr:nth-child(even) selector that makes every even tr child element have a lavender background color. Add a new rule using the th:hover selector that changes the th element's text color to orange when the mouse hovers over the element. <table> <caption>2022 Olympic Medal Counts</caption> <tr> <th>Country</th> <th>Gold</th> <th>Silver</th> <th>Bronze</th> <th>Total</th> </tr> <tr> <td>Norway</td> <td>16</td> <td>8</td> <td>13</td> <td>37</td> </tr> <tr> <td>ROC</td> <td>6</td>…arrow_forwardFirst Column: Merge column 1, column 2 and column 3. Set the background color as "blue" and align the contents to the right. Insert a Search Form. Insert a suitable input type to select items like SUBJECTS, COURSES, CV HELP and JOB MARKET. Set any name for the form field. Insert a suitable input type to enter the search text. Set any name for the text field and the maximum length is 40. Insert a submit button with a value SEARCH COURSES. • Set a form validation using JAVASCRIPT. If the form field (search) is empty. display an alert message and return false to prevent the form from being submitted.arrow_forward5arrow_forward
- Create a custom footer for the worksheet. In the left footer section, display the current Page Number using a Header and Footer element. In the center footer section, display the Sheet Name using a Header and Footer element. Switch back to Normal View if necessary.arrow_forwardCLL question Next within the form, create a field set with the ID deliveryInfo. Within this field set, add the following: A legend containing the text Delivery Options. A text area box with the ID addressBox and field name of delAddress containing the placeholder text Enter delivery address. A label containing the text Delivery time (leave blank for earliest delivery) associated with the delBox control. Add an input element with the ID delBox and field name delTime for storing delivery time values. Use a data type of “time” for the control.arrow_forwardStep 2 Below the tablet media query, add a new comment with the text, Media Query for Desktop Viewport. Below the comment, add a new media query that targets a screen with a minimum width of 769px and print. Within the desktop media query, add a new comment with the text, Desktop Viewport: Style rule for header. Below the comment, add a style rule for the header selector that sets the padding to 2%. Within the desktop media query, below the header style rule, add a new comment with the text, Desktop Viewport: Style rules for nav area. Below the comment, add a style rule for the nav li a selector that sets the padding to 0.5em on the top and bottom and 1.5em on the left and right. Add another style rule for the nav li a selector that uses the hover pseudo-class and sets the color to #373684 and the background-color to #e5e9fc. 2 Within the desktop media query, below the nav area style rules, add a new comment with the text, Desktop Viewport: Style rules…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:CengageCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L