CSS Assignment – 1

Basic Questions

  1. Write HTML and CSS to change the background color of a <p> element to lightblue using inline CSS.
  2. Create an HTML file with an internal CSS block that changes the font color of all headings to green.
  3. Use an external CSS file to set the body background color to yellow.
  4. Apply the universal selector (*) to give all elements a margin of 5px.
  5. Use an element selector to make all <h1> tags red.
  6. Create a class .highlight that underlines text and apply it to two different <p> tags.
  7. Define an ID selector #main-title and apply it to a heading to change its font size to 30px.
  8. Use a grouping selector to apply the same color to <h1>, <h2>, and <h3>.
  9. Add a CSS comment above a style rule and check if it hides correctly.
  10. Create a link (<a>) and use the :hover pseudo-class to change text color when the mouse hovers.
  11. Use the :first-child pseudo-class to make the first <li> in a list bold.
  12. Add a :last-child pseudo-class style to make the last paragraph italic.
  13. Use an absolute unit (px) to give a heading a font size of 25px.
  14. Use a relative unit (em) to set paragraph font size relative to its parent.
  15. Apply vw unit to make a heading font size scale with the viewport width.
  16. Create two <div> elements and style the second one differently using the adjacent sibling selector (+).
  17. Use the child selector (>) to apply a color only to direct <li> children of a <ul>.
  18. Style all paragraphs that are siblings of an <h1> using the general sibling selector (~).
  19. Use rem unit for setting global font size and apply it across elements.
  20. Create three <p> elements and use inheritance by setting font-family on the <body> tag.

Intermediate Questions

  1. Create a navigation menu and apply different colors when links are in hover, visited, and active states using pseudo-classes.
  2. Apply different background colors to odd and even rows in a table using :nth-child() pseudo-class.
  3. Design an internal CSS style sheet that uses both ID and class selectors with different styles.
  4. Use two selectors combined (section p) to change color of <p> only inside <section>.
  5. Create a button and use :active pseudo-class to make it shrink slightly when clicked.
  6. Use grouping selectors to style both <p> and <span> tags with the same font.
  7. Define an external CSS file and link it using the <link> tag to a given HTML file with multiple sections.
  8. Style <h2> differently based on whether it is a child of a section or a child of an article.
  9. Create a simple card UI with fixed width and padding using absolute units (px, cm).
  10. Use relative units (%) to give an image 50% width of its parent.
  11. Create two nested containers and apply inheritance so that text inside inherits parent styles but overrides one property.
  12. Build a small HTML snippet where inline CSS overrides external CSS.
  13. Design a paragraph that changes color when you highlight text using the ::selection pseudo-element.
  14. Add a ::first-letter pseudo-element effect to style the first letter of a paragraph larger and bold.
  15. Use ::first-line pseudo-element to style the opening line of a text differently.
  16. Show an example where CSS specificity resolves conflict between inline, ID, and class styles.
  17. Create a webpage where header text uses vh to scale with viewport height.
  18. Create two divs side by side; apply general sibling selector (~) to style second if first exists.
  19. Demonstrate difference between em and rem by nesting multiple divs with text sizes.
  20. Style only <span> that are immediately after <strong> using adjacent sibling selector (+).

Advanced Questions

  1. Create a responsive webpage layout where headings use vw and vh units to scale with the browser window.
  2. Design a multi-level navigation menu using descendant selectors and pseudo-classes that highlight parent vs child items differently.
  3. Show an example of CSS specificity conflict with 3 elements styled using inline, class, and ID selectors, and explain which one wins.
  4. Build a profile card component where the first child, last child, and general siblings all have different styles.
  5. Demonstrate inheritance override by styling a parent font-family globally but overriding child font-size using em and rem.
  6. Create a list of 10 items and use advanced nth-child selectors (nth-child(2n+1), nth-child(3n)) to style differently.
  7. Apply both pseudo-elements (::before, ::after) to create decorative content around headings without changing HTML.
  8. Show an example where absolute units (px) break responsiveness but relative units (%, em, rem, vw, vh) fix it.
  9. Build small demo where using inline CSS, external CSS, and internal CSS together produces unexpected results if order of precedence is not understood.
  10. Demonstrate how specificity hierarchy works with complex selectors like ul li:first-child a.class#id.