
Can you show me how to add padding, margin, and borders for elements and positioning elements using CSS? Within a CSS, add padding to main, aside, and footer elements of the page. Add a border to text headings in main and borders with rounded corners to the main and aside sections. Border can be partial or extend around the entire element. Add 0 margin to nav ul element. Add margins to all header elements as well as to heading elements in the main section and aside sections of the page. Make images in the main element float left, Make paragraphs in the "more" class clear left, and add a margin to image elements in the main section. In an HTML, add a png image to the page. In the css, position the png image it absolutely to the top left of the viewport window. If needed, add a z-index so the png image is always visible.
to generate a solution
a solution
- In the styles.css file, below the last style rule, add a new comment with the text, Media Query for Tablet Viewport. Below the comment, add a media query to target screen and print for a tablet viewport. Use a min-width: 481px. 1 Step 1 In the tablet media query, create a new style rule for the article element that sets the width to 43%, floats the element to the left, and sets a height of 160px. 2 In the tablet media query, create a new style rule for the footer selector that clears a float on the left Step 2 In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Desktop Viewport. Below the comment, add a media query to target a desktop viewport screen with a minimum width of 900px. 1 In the desktop media query, create a style rule for an article selector that sets the width to 27% and the height to 140px. 2 In the desktop media query, create another style rule for the article…arrow_forwardSetup Use your editor to open the ws_lincoln.html and ws_cloud.js. Enter your name and the date in the comment section of each file. Linking JS File Go to the ws_lincoln.html file in your editor. Link the page to the ws_cloud.css style sheet and the ws_stopwords.js and ws_cloud.js JavaScript files (in that order). Load the JavaScript files asynchronously. Study the contents of the file. Lincoln's speech is stored in a div element with the id "speech". The word cloud text will be placed in the aside element with the id "cloud". html---------------------------------------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <!-- New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 4 Word Cloud of Lincoln's 1st Inaugural Author: Date: Filename: ws_lincoln.html --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,…arrow_forwardComplete the following webpage assignment. Assignment Instructions: Design a webpage to simulate a Blog. The website must have a banner image and a featured image with multiple resolutions to be active at different resolution breakpoints just as discussed in this lesson. Include a jQuery script in your project to further enhance the user experience. Use one of the CDN libraries. The script is up to your discretion though you must be able to justify its use. The blog page must be aesthetically pleasing and follow a traditional blog structure. It may help to look at the many WordPress templates available on the net.arrow_forward
- In the styles.css file, add the ul selector to the CSS reset style rule. Remove the declaration for the margin property in the nav ul style rule. Modify the nav li style rule by changing the display value to block and add a top border that specifies a solid border width of 0.5px with the color value #f6eee4. My CSS nav li { display: block; font-size: 1.5em; font-family: Geneva, Arial, sans-serif; font-weight: bold; border-top: solid border;arrow_forwardCan you show me how to add a transition to top nav elements using Sublime Text Editor? Create style rules for a:hover and a:focus pseudo-elements that change the look of the nav bar. Choose background color, color, and font size. Create style rules for the a:active pseudo-elements. Choose the value of the margin-top, which should be 6px or more. Then, add a box shadow. Create the following transitions for for the <a> elements: change the background color, change the border-color, change the top, change the box-shadow, and set a reasonable duration for these changes(between .1 and .5s). You can optionally add transition-timing-function or a transition delay.arrow_forwardStay in the Heart of Sedona At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries. Luxurious Rooms Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, and balcony overlooking the red rocks. Refer to the image with code to match the element with the correct description. 1. Stay in the heart of Sedona heading 2, second largest text on this webpage 2. Luxurious Rooms heading 3, third level of text size on this webpage 3. At Casita Sedona Bed & amp; Breakfast ... paragraph, smallest text displayed on this webpage 4. 5.arrow_forward
- Please help me with this 1. Make the body of the page have a background of tiled “waves.png” images. This image is in the images folder. 2. Add padding (10px) to the entire body of the page. 3. Add a top and bottom margin (10px) as well as padding (10px) to the each movie description. 4. Change the background of each movie description to white, and the background colour for the box enclosing the page content to the following RGB values: R = 246, G = 212, B = 212. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Movie Recommendations</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1> Movie Recommendations </h1> <h2> Some Science Fiction Movies Worth Watching </h2> </header> <div class="movie"> <h2> Ghost in the Shell <span…arrow_forwardThe DIV element below the image has a width of 320px. After applying CSS styling, the DIV element becomes 350px wide (the same as the flower image above it) Using border, margin and padding, add to the DIV CSS styling that will make the DIV element 350px wide (You must use all three). div { width: 320px ..... }arrow_forwardCreate a button component and an h1 component using BEM CSS methodology.arrow_forward
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill EducationStarting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSONDigital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
- C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSONDatabase Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage LearningProgrammable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education





