Question: Open the code3-2_txt.html and code3-2_layout_txt.css files from the html03 c code2 folder. Enter your name and the date in each document and save the files
Open the code3-2_txt.html and code3-2_layout_txt.css files from the html03 c code2 folder. Enter your name and the date in each document and save the files as code3-2.html and code3-2_layout.css respectively.
2. Go to the code3-2.html file in your editor. Within the head section insert a link element linking the page to the code3-2_layout.css file. Study the contents of the file, taking note of the structure, element names, and element ids. Save your changes.
3. Go to the code3-2_layout.css file. Create a style rule for the header, footer, aside, article, and a (hyperlink) elements to set the padding space to 10 pixels and add a 3-pixel gray dashed outline.
4. Create a style rule for the body element that: a. Sets the width to 90% of the browser window, ranging from a minimum width of 640 pixels up to a maximum width of 1024 pixels. b. Sets the top/bottom margin to 30 pixels and the left/right margin to auto. c. Displays the body as a CSS grid. d. Creates six grid columns each with a width of 1fr. e. Creates five grid rows with widths of 50 pixels, 30 pixels, 1fr, 1fr, and 100 pixels. f. Adds a grid gap of 15 pixels.
5. Display the a (hyperlink) element as a block.
6. Set the size of the grid items as follows: a. Have the header element span from gridline 1 to gridline -1. b. Have the article#intro element span two rows and two columns. c. Have the article#main element two rows and three columns. d. Have the footer element span two columns.
7. Save your changes to the style sheet.
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
