Module 3 Practice Questions

Instructions: Solve these questions yourself to reinforce your learning.

1. Explain the difference between inline, internal, and external CSS. Give an example of each.

2. Create a simple webpage with a header, navigation bar, and paragraph. Use colors, fonts, and borders to style it.

3. Draw a diagram of the CSS Box Model and explain each part.

4. Write CSS to center a div horizontally and vertically on a page using Flexbox.

5. Create a grid layout with 3 columns and 2 rows. Add background colors to each item.

6. Write CSS using pseudo-classes to change the color of links when hovered and visited.

7. Use a pseudo-element to add quotation marks before a blockquote.

8. Write a transition that smoothly changes a button’s background color and size on hover.

9. Create a keyframe animation that moves a square from left to right and back.

10. Write CSS to make a website responsive: adjust text size and container width for screens below 768px.

11. Explain the difference between Flexbox and Grid. Give a practical example of when to use each.

12. What is the purpose of box-sizing: border-box? How does it affect element sizing?

13. How do relative, absolute, fixed, and sticky positioning differ? Give examples of use cases.

14. Create a webpage using Google Fonts and style headings and paragraphs with different fonts.