CSS Basics. Advice and tips for CSS beginners. Quiz

Discover foundational CSS techniques for effective web design, including responsive units, layout, and essential styling concepts. Perfect for those starting their CSS journey.

1. Choosing Color Schemes

   What is a useful way for a beginner to select harmonious color combinations for a website?

   1. Always use pure black and pure white for all design elements
   2. Depend only on browser default colors
   3. Pick colors by randomly selecting from a list
   4. Use an online color wheel to explore complementary and analogous colors

   Explanation: Using an online color wheel helps beginners understand and apply color theory, providing harmonious combinations such as complementary or analogous schemes. Randomly picking colors can result in clashing styles. Relying on browser defaults limits creativity and design control. Using only black and white is overly restrictive for most modern designs.

2. Understanding Measurement Units

   Which CSS unit is considered relative and adjusts based on another element's size?

   1. em
   2. in
   3. pt
   4. px

   Explanation: The 'em' unit is relative, scaling according to the font size of its containing element. 'px', 'in', and 'pt' are all absolute units; they remain the same regardless of parent sizes or user settings, making them less suitable for responsive designs.

3. Testing Responsiveness

   What is a practical method to check if a website layout is responsive?

   1. Always keep the browser window maximized
   2. Resize the browser window to different widths and observe how the layout adjusts
   3. Test only on a desktop monitor
   4. Use fixed pixel values for all elements

   Explanation: Resizing the browser confirms whether the layout adapts to various screen sizes, ensuring a responsive design. Keeping the window maximized or testing only on desktops does not simulate mobile or small screens. Relying solely on fixed pixel values prevents layouts from adapting to different devices.

4. Display vs. Positioning

   Which CSS property determines how elements are visually arranged in relation to their parent container?

   1. background
   2. display
   3. z-index
   4. color

   Explanation: The 'display' property defines the layout model used for elements (e.g., block, inline, flex). 'Color' and 'background' relate to styling, not layout. 'Z-index' manages stacking order, not the arrangement within the parent container.

5. Margin and Padding

   What is the main difference between CSS margin and padding?

   1. Margin is the space outside an element; padding is the space inside, between the content and the border
   2. Margin sets the element's width; padding sets the element's height
   3. Margin makes elements float; padding aligns elements to the left
   4. Margin changes text color; padding changes font size

   Explanation: Margin controls the space outside the element, affecting the distance between elements. Padding controls the space inside the element, between the content and its border. The other options confuse margin and padding with unrelated CSS functionalities.