Question

In the style rules for the mobile viewport, below the main style rule, add a new style rule for the section element that sets the background-color to #183440, the color to #fff, top margin to 4%, and padding to 3%.

Below the section style rule, create a new style rule for the article element that sets the top margin to 1% and padding to 2%.
Below the article style rule, create a new style rule for the aside element that sets the background-color to rgba(24, 52, 64, 0.3), padding to 2%, top margin to 1%, color to #183440, and a box-shadow with values of 4px 4px 10px #183440.

Answer 1

To add the specified CSS styles for a mobile viewport, include style rules for 'section', 'article', and 'aside' elements with the provided color, margin, and padding values within a style tag or CSS file.

Step-by-step explanation:

To add style rules for the mobile viewport in CSS, you will need to write appropriate style declarations inside a style tag or a CSS file. In your case, you want to set specific styles for the section, article, and aside elements. Here's how you can do it:

section {
background-color: #183440;
color: #fff;
margin-top: 4%;
padding: 3%;
}
article {
margin-top: 1%;
padding: 2%;
}
aside {
background-color: rgba(24, 52, 64, 0.3);
padding: 2%;
margin-top: 1%;
color: #183440;
box-shadow: 4px 4px 10px #183440;
}
Make sure to include these style rules in the appropriate section of your CSS, which could be within a media query if these styles are only meant for mobile viewports.