CSS Assignment – 2

Basic Questions

  1. Create a <div> with some text and apply margin: 20px; to it.
  2. Add padding: 15px; to a paragraph and observe the effect.
  3. Give a heading a 2px solid black border.
  4. Create a box with border-style: dashed and border-color: red.
  5. Apply border-width: 5px; to a <div> and set a background-color.
  6. Experiment with margin-top, margin-bottom, margin-left, and margin-right individually.
  7. Apply different padding values on all four sides of a paragraph (padding: 5px 10px 15px 20px;).
  8. Style a <div> with box-sizing: content-box and compare its size to box-sizing: border-box.
  9. Set a paragraph font using font-family: Arial.
  10. Make a heading bold with font-weight: bold;.
  11. Italicize a sentence using font-style: italic;.
  12. Increase the font size of text to 20px.
  13. Change the color of a paragraph to darkblue.
  14. Use text-align: center; to align a heading.
  15. Add line-height: 2; to increase spacing between lines.
  16. Add extra space between letters using letter-spacing: 3px;.
  17. Add spacing between words with word-spacing: 10px;.
  18. Underline a piece of text using text-decoration: underline;.
  19. Indent the first line of a paragraph with text-indent: 40px;.
  20. Apply font size using em units and compare with px units.

Intermediate Questions

  1. Create two <div>s: one with margin: 0 auto; to center it horizontally.
  2. Design three boxes with different border styles (solid, dashed, dotted) side by side.
  3. Create a card layout where padding inside makes text not touch the border.
  4. Add a heading with a double border using border-style: double;.
  5. Compare differences between content-box and border-box with a fixed width and padding.
  6. Create text with Google Fonts (e.g., Poppins or Roboto) using a <link> from Google Fonts.
  7. Import a font using @import (custom font from Google).
  8. Use font-weight variations: light (300), normal (400), and bold (700).
  9. Style a block of text and demonstrate font scaling using % and em units.
  10. Create two paragraphs: one aligned justify and one aligned right.
  11. Add an example where large letter-spacing creates a special effect in heading.
  12. Make a text appear uppercase using CSS text-transform.
  13. Create a blockquote with font-style: italic; and increased line-height.
  14. Apply a shadow effect using only font properties (text-shadow).
  15. Use vh units for responsive font sizes that scale with the viewport.
  16. Create a “Read more” link with text-decoration: none;.
  17. Style one word in a sentence with a different font family using <span>.
  18. Experiment with negative text-indent to move first line left.
  19. Create a heading with increased word-spacing for letterpress effect.
  20. Apply both rem and em font sizes in nested elements to compare.

Advanced Questions

  1. Create three equal-width boxes inside a container and explain how margin and padding affect the layout in content-box vs. border-box.
  2. Make a responsive heading whose font size adjusts using clamp() with px, em, and vw.
  3. Build a full typography demo with: heading styled with Google Font, paragraph styled with custom imported font, different weights, and spacing.
  4. Create a pricing card UI where padding, border, and margin are clearly defined to look professional.
  5. Make a paragraph of justified text look like a newspaper column with line-height, letter-spacing, and word-spacing tuned.
  6. Create a box where top border is thick, right border is dotted, bottom border is double, and left border is solid.
  7. Build a responsive hero section with a heading that uses viewport units (5vw) and body text in rem. Test resizing.
  8. Create a demo comparing absolute font units (px, pt) with relative units (em, rem, vh) to show differences in responsiveness.
  9. Design a small personal bio section using custom Google Font + text shadow + spacing + underline hover effect.
  10. Demonstrate combining typography with box model: Style a block with padding, margin, border, custom font, letter-spacing, and centered alignment like a “quote card.”