CSS Assignment – 3

Basic Questions

  1. Apply a named color (like blue) to a heading.
  2. Use RGB format to color a paragraph.
  3. Apply HEX code (#ff6600) as text color.
  4. Give a <div> a background color (lightgray).
  5. Use RGBA to make text 50% transparent.
  6. Apply a background image to a <div>.
  7. Repeat a background image using background-repeat: repeat;.
  8. Set a background image to cover the whole container (background-size: cover;).
  9. Align a background image to the top left corner.
  10. Fix a background image with background-attachment: fixed;.
  11. Create a <span> and a <div> — give both borders and observe block vs inline behavior.
  12. Place 2 boxes side by side using display: inline-block;.
  13. Hide a paragraph using display: none;.
  14. Position a box relative and move it 20px down.
  15. Float an image to the right so text wraps around it.
  16. Clear a floating element using clear: both;.
  17. Create a container with display: flex; and 3 child boxes.
  18. Use justify-content: center; to center flex items horizontally.
  19. Use align-items: center; to center flex items vertically.
  20. Change the flex direction to column and stack items vertically.

 

Intermediate Questions

  1. Create a full-page background image that stretches perfectly with background-size: cover.
  2. Add two layered backgrounds (image + gradient).
  3. Create a button with transparent background and border.
  4. Set background position to top right for an image.
  5. Experiment with background-size: contain; vs cover; on the same image.
  6. Use linear-gradient background for a header section.
  7. Apply HSLA color with transparency for an overlay effect.
  8. Create paragraph text in three different color formats (HEX, RGB, HSL).
  9. Show the difference between display: block and inline for <div> and <span>.
  10. Create three inline-block boxes side by side.
  11. Build an element and hide it using display: none.
  12. Set one div with position: relative; and move it 20px right.
  13. Create a box absolutely positioned inside a relatively positioned parent.
  14. Fix a navigation bar at the top using position: fixed;.
  15. Create a sticky header that stays visible while scrolling using position: sticky;.
  16. Create a layout with one floating image on the left and text wrapping around it.
  17. Apply clear: both; to prevent float overlap.
  18. Show the difference between static (default) and relative positioning.
  19. Create boxes with different background colors to visually test margin-collapsing behavior.
  20. Create 4 divs with different display values: block, inline, inline-block, and none.

Advanced Questions

  1. Create a layered effect with two gradients + one image background.
  2. Use HSLA colors to build a dark overlay effect on an image header.
  3. Build a two-column layout using float properties only (no flex/grid).
  4. Create a sticky footer that always stays at the bottom of the page.
  5. Build a fixed navigation bar with transparent background that turns solid on hover.
  6. Create a hero section where the background image stays fixed while content scrolls.
  7. Create a responsive card layout using display: inline-block;.
  8. Design a centered modal (position: fixed;) that overlays page content.
  9. Build a flex container with 5 items, use justify-content: space-between; and align-items: center;.
  10. Reorder flex items using the order property to visually shuffle elements.