Scribd
Upload
6 views1 page

HTML CSS Step by Step Instructions2

The document provides step-by-step instructions for creating a simple webpage using HTML and CSS. It includes tasks such as adding headings, paragraphs, a navigation bar, buttons, and styling elements with CSS properties like flex layout, colors, and hover effects. The instructions guide the user through both the structure and design aspects of the webpage.

Uploaded by

Abel Ephrem
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views1 page

HTML CSS Step by Step Instructions2

The document provides step-by-step instructions for creating a simple webpage using HTML and CSS. It includes tasks such as adding headings, paragraphs, a navigation bar, buttons, and styling elements with CSS properties like flex layout, colors, and hover effects. The instructions guide the user through both the structure and design aspects of the webpage.

Uploaded by

Abel Ephrem
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML and CSS Step-by-Step Instructions

HTML Instructions

1. Add a level-one heading inside the body with the text: "this is my website".

2. Create a div with class name navbar. Inside it, add three paragraphs: home, about, contact.

3. Add a level-two heading below the navbar with the text: "this is linear gradient".

4. Add one paragraph below the h2, give it the ID name p2, and write any random text inside it

(enough for a paragraph).

5. Add an anchor element below the paragraph that links to Google and displays the text
"GOOGLE".

6. Add a button below the link with the text "click me".

7. Add a div with class name container. Inside it, create two div elements with IDs box1 and box2.
Write "box1" and "box2" inside them.

CSS Instructions

8. Target .navbar: apply flex layout, distribute items with space around, add a 2px dashed border,
and set border radius to 20px.

9. Target h1: align the text to center.

10. Target #box1: set width and height to 100px, background color yellow, top margin 100px,
bottom margin 50px, font size 30px, and 30px top padding.

11. Target #box2: set width and height to 100px, background color red, font size 30px, 30px top
padding, and 20px left padding.

12. Target .container: apply flex layout, set direction to column, align items to center, and set height
to 100vh.

13. Target #p2 and h2: apply a linear gradient background to the left using skyblue and white.

14. Target body: add background image "your image", set no-repeat, center position, fixed
attachment, and size cover.
(if the PC doesn't have img set the body to linear gradient with same colors as the h2 and #p2).

15. Add hover effects: anchor background turns blue on hover; button background turns blue on
hover.

16. Add active effects: anchor text turns red when active; button background turns red when active.

You might also like