Use style sheets (CSS) MCQs Quiz | Class 10

This quiz covers Class X Computer Applications (Code 165), Unit 4: Lab Exercises, focusing on the use of style sheets (CSS) for formatting and ensuring consistent design. Test your understanding of applying CSS to enhance web pages. Complete all 10 multiple-choice questions, submit your answers to see your score, and download a detailed PDF of your answers for review.

Understanding CSS: Styling Web Pages

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. It allows web developers to control the look and feel of web pages, including layout, colors, fonts, and more, separating content from presentation.

Key Concepts in CSS

  • Separation of Concerns: CSS promotes the separation of document content (HTML) from its presentation (CSS). This makes websites easier to maintain, more flexible, and allows for better accessibility.
  • Cascading Order: When multiple styles are applied to the same element, CSS determines which style wins based on specificity, importance, and source order.
  • Selectors: Used to “find” (or select) the HTML elements you want to style. Common selectors include element selectors (e.g., p), ID selectors (e.g., #header), class selectors (e.g., .button), and attribute selectors.
  • Properties and Values: Styles are defined using property-value pairs (e.g., color: blue;, font-size: 16px;).
  • External, Internal, and Inline Styles:
    • External CSS: Styles defined in a separate .css file, linked to the HTML document. Best practice for consistent design across multiple pages.
    • Internal CSS: Styles defined within a <style> tag in the HTML <head> section. Useful for single-page styles.
    • Inline CSS: Styles applied directly to an HTML element using the style attribute. Generally discouraged for maintaining consistency and separation.

Applying CSS for Formatting

CSS provides a powerful way to format almost every aspect of an HTML element:

  • Text Formatting: Properties like font-family, font-size, color, text-align, line-height, text-decoration, text-shadow.
  • Box Model: Every HTML element is considered a box. The box model describes how margin, border, padding, and the actual content are rendered.
    Component Description
    Content The actual content of the element, e.g., text, image.
    Padding Space between the content and the border.
    Border A line that goes around the padding and content.
    Margin Space outside the border, separating the element from other elements.
  • Layout and Positioning: Properties like display (block, inline, flex, grid), position (static, relative, absolute, fixed, sticky), float, clear, width, height, margin, padding. Flexbox and CSS Grid are modern layout modules.
  • Backgrounds and Borders: background-color, background-image, border-width, border-style, border-color, border-radius.

Achieving Consistent Design with CSS

Consistency is crucial for a good user experience. CSS helps achieve this by:

  • Centralized Styling: Using external style sheets allows you to define styles once and apply them across an entire website. Changing a single CSS file updates the design of all linked pages.
  • Class and ID Selectors: Applying common styles to multiple elements using class selectors (e.g., .button, .card) ensures uniformity. ID selectors target unique elements for specific styling.
  • CSS Frameworks: Libraries like Bootstrap or Foundation provide pre-defined components and styles, promoting consistency and faster development. (Though for CBSE, understanding raw CSS is key).
  • CSS Variables (Custom Properties): Define reusable values (e.g., colors, font sizes) that can be easily updated, ensuring a consistent theme.

Quick Revision Checklist

  • What is CSS used for? (Styling HTML)
  • What are the three ways to apply CSS? (External, Internal, Inline)
  • What are common CSS selectors? (Element, Class, ID)
  • What is the CSS Box Model? (Content, Padding, Border, Margin)
  • How does CSS help in consistent design? (Centralized styling, reusability)

Further Practice Questions

  1. Which property is used to change the background color of an element?
  2. What does the ‘C’ in CSS stand for?
  3. Which CSS property controls the text size?
  4. How do you select an element with the id “demo”?
  5. What is the default value of the ‘position’ property?

Author

  • CBSE Quiz Editorial Team

    Content created and reviewed by the CBSE Quiz Editorial Team based on the latest NCERT textbooks and CBSE syllabus. Our goal is to help students practice concepts clearly, confidently, and exam-ready through well-structured MCQs and revision content.