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

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!