📘 CSS Syntax – Long Answer Questions (CBSE Class 10 Social Sciences)

---

Medium Level (Application & Explanation)

---

Q1. Explain the basic structure of a CSS rule and its importance in styling a webpage.

Answer:

• A CSS rule consists of two main parts:
  • Selector: Specifies which HTML element the style will be applied to.
  • Declaration Block: Contains one or more property-value pairs inside curly braces { }.
• The syntax looks like:

  selector {
    property: value;
  }
  

• Each property defines the style feature you want to change, like color or font-size.
• The value tells the browser how to apply the property, for example, red, 18px, etc.
• Every declaration ends with a semicolon (;), and it is important to maintain it for proper functionality.
• This structure helps the browser understand exactly which elements to style and how, resulting in a well-designed and visually pleasing webpage.

---

Q2. What are the types of selectors in CSS that a Class 10 student should know? Explain with examples.

Answer:

• For Class 10, the main selector to learn is the Element Selector (also called Tag Selector).
• It targets all elements of a specific HTML tag to apply styles uniformly.
• Example:

  h1 {
    color: green;
  }
  

  This styles all <h1> headings to appear in green color.
• Another example is:

  p {
    text-align: center;
  }
  

  This centers the text in all paragraphs (<p> tags).
• Understanding selectors is fundamental in CSS because it decides which HTML parts receive the style rules.

---

Q3. How do property and value pairs work in CSS declarations? Provide a detailed explanation.

Answer:

• A property-value pair is the core of any CSS declaration.
• The property defines what aspect of the element you want to change, such as color or font-size.
• The value specifies the actual style or setting for that property, like blue for color or 16px for font size.
• The syntax follows this pattern:

  property: value;
  

• Example:

  p {
    color: red;
    font-size: 16px;
  }
  

• Here, color: red; changes the text color to red, and font-size: 16px; sets the font size to 16 pixels.
• Multiple property-value pairs can be written inside one declaration block to style multiple aspects of an element.

---

Q4. Describe the role of the declaration block in CSS syntax with an example.

Answer:

• The declaration block is the part of a CSS rule that contains all the declarations, written inside curly braces { }.
• It groups one or more property: value declarations that define styles for the selected HTML element.
• Each declaration is separated by a semicolon ;.
• Example:

  h2 {
    color: red;
    font-family: Arial;
    font-size: 20px;
  }
  

• This block styles every <h2> element with red color, Arial font, and font size 20 pixels.
• The declaration block is essential for applying multiple styles simultaneously to the selected elements.

---

Q5. Why is proper CSS syntax crucial? Outline the consequences of incorrect CSS syntax.

Answer:

• Proper CSS syntax ensures that styles are applied correctly to webpage elements.
• It makes sure the browser interprets the styles as intended.
• Correct use of curly braces { }, property names, values, and semicolons ; prevents errors in webpage formatting.
• If syntax is incorrect, such as missing semicolons or braces, styles may be ignored or misapplied, causing broken layouts or styling issues.
• Proper syntax also results in clean, readable, and maintainable code, which helps developers update or debug the site easily.

---

High Complexity (Analytical & Scenario-Based)

---

Q6. Suppose you want to style all paragraphs on a webpage with blue text, yellow background, and font size of 18px. Write the CSS rule for this and explain each part.

Answer:

• CSS rule:

  p {
    color: blue;
    background-color: yellow;
    font-size: 18px;
  }
  

• Explanation:

  • The selector p targets all paragraph (<p>) elements in the HTML document.
  • The declaration block { ... } contains three declarations.
  • color: blue; changes the text color inside paragraphs to blue.
  • background-color: yellow; sets the background of the paragraphs to a yellow color.
  • font-size: 18px; increases the size of the text in pixels to make it more readable and visible.
  • Each declaration ends with a semicolon to separate the rules and ensure the browser reads them properly.

---

Q7. Analyze how misunderstanding the role of selectors and declaration blocks could affect webpage design.

Answer:

• If selectors are misunderstood or wrongly used, styles may apply to wrong HTML elements or not apply at all.
• For example, using a class selector syntax instead of an element selector when the syllabus only covers element selectors leads to confusion and no effect on the webpage.
• Without correctly identifying the HTML element with a selector, other parts of CSS code become useless.
• Misusing declaration blocks — such as missing curly braces or semicolons — causes the browser to ignore some or all styles within that block.
• This leads to inconsistent design, broken layouts, or default browser styles taking over, damaging the overall look and user experience.
• Understanding these components ensures styles are applied precisely and the design is consistent.

---

Q8. Consider the following CSS snippet missing some syntax parts:

p
  color: green
  font-size 14px

Identify the errors and correct the CSS while explaining why each correction matters.

Answer:

• Errors identified:

  • Missing curly braces { } around the declaration block.
  • Missing colons : between font-size and 14px.
  • Missing semicolons ; at the end of declarations.

• Corrected CSS:

  p {
    color: green;
    font-size: 14px;
  }
  

• Explanation:

  • Curly braces { } enclose the declarations for the selected elements. Without them, the browser cannot understand where the block starts and ends.
  • The colon : is necessary to separate property and value; missing it makes the statement invalid.
  • Semicolons ; mark the end of each declaration; missing semicolons may cause browsers to ignore the next property.
  • Correct syntax ensures proper style application and prevents errors when rendering the page.

---

Q9. In a scenario where a webpage’s <h1> headings should appear green but only some headings appear green while others don't, what could be the possible CSS syntax or usage errors? How would you fix it?

Answer:

• Possible errors:

  • The selector might be incorrectly written (e.g., a typo in h1).
  • Missing or misplaced braces { } around declarations.
  • Missing semicolon ; after the color property.
  • Other CSS rules overriding the rule due to CSS specificity or inline styles.
  • The CSS file might not be correctly linked to the HTML file.

• Fixes:

  • Verify that the selector is correct: h1 { color: green; }
  • Ensure all syntax elements (braces, semicolons) are present.
  • Check the order and priority of CSS rules; use browser developer tools to debug styles.
  • Make sure the CSS file is properly linked with the correct <link> tag in the HTML <head>.
  • Clear browser cache to reload the latest CSS styles.

---

Q10. Evaluate why CSS syntax emphasizes the use of semicolons after each declaration, and describe the potential issues if semicolons are omitted.

Answer:

• The semicolon ; in CSS syntax acts as a separator between declarations within the declaration block.
• It tells the browser where one declaration ends and the next begins.
• Omitting a semicolon, especially between multiple property-value pairs, can cause the browser to fail to parse subsequent declarations correctly.
• This may result in:
  • Ignoring the next declaration(s)
  • Applying styles incorrectly or partially
  • Broken layout or missing styles on the webpage
• For the last declaration in a block, omitting the semicolon may still work in some browsers but is considered poor practice and can cause errors when adding more declarations later.
• Therefore, always including semicolons ensures clean, error-free, and future-proof CSS code.

---