CSS Cascading Style Sheets Exercise Solutions | KalviGavani

CSS Cascading Style Sheets: Exercise Solutions

How to Use This Page

Read the Samacheer Kalvi textbook chapter first. Then use this page to revise: attempt the textbook questions on your own, then compare with the model answers below. Pay special attention to the Common Mistakes section and the Exam Checklist before your test.

---

Key Concepts (Quick Recap)

---

I. Choose the Correct Answer (MCQ)

Q1. Which symbol is used to select an element by its class in CSS?

(a) # (b) . (c) @ (d) &

---

Q2. Which type of CSS has the highest specificity?

(a) External CSS (b) Internal CSS (c) Inline CSS (d) All have equal specificity

---

Q3. The correct syntax for an external CSS link is:

(a) <css href="style.css"> (b) <link rel="stylesheet" href="style.css"> (c) <style src="style.css"> (d) <stylesheet link="style.css">

---

Q4. Which CSS property is used to change the text colour?

(a) font-color (b) text-color (c) color (d) foreground-color

---

Q5. In the CSS box model, which layer is closest to the content?

(a) Margin (b) Border (c) Padding (d) Outline

---

Q6. Which property is used to set the background colour of an element?

(a) bgcolor (b) background-color (c) bg-color (d) color-background

---

Q7. What does the font-size property accept as a value?

(a) Only pixels (b) Only percentages (c) Both relative and absolute units (d) Only colour values

---

Q8. Which selector targets all HTML elements?

(a) element selector (b) class selector (c) ID selector (d) universal selector

---

Q9. Which of the following is the correct CSS syntax?

(a) h1 {color:red;} (b) h1 = {color:red;} (c) {h1:color:red;} (d) h1.color = red

---

Q10. Which CSS property is used to make text bold?

(a) text-style (b) font-weight (c) text-bold (d) font-style

---

II. Very Short Answer Questions (2 Marks)

Q1. What is CSS?

---

Q2. What are the three types of CSS?

---

Q3. What is a CSS selector?

---

Q4. What is the difference between a class selector and an ID selector?

---

Q5. What is the CSS box model?

---

Q6. Write the syntax of a CSS rule.

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 24px;
}

The selector targets the element, and the declaration block (inside { }) contains one or more property-value pairs separated by semicolons.

---

Q7. What is the use of the text-align property?

---

Q8. What is the difference between padding and margin?

---

III. Short Answer Questions (3 Marks)

Q1. Explain the three ways of applying CSS to an HTML document with examples.

1. Inline CSS: Styles are written directly on the element using the style attribute.

<p style="color: red; font-size: 16px;">Hello World</p>

This method has the highest specificity but is hard to maintain for large projects because styles are scattered throughout the HTML.

2. Internal CSS: Styles are written inside a <style> tag in the <head> section.

<head>
  <style>
    p { color: red; font-size: 16px; }
  </style>
</head>

Useful for single-page styling but not ideal for multi-page websites since styles cannot be shared across pages.

3. External CSS: Styles are written in a separate .css file and linked via <link>.

<head>
  <link rel="stylesheet" href="style.css">
</head>

This is the best practice for maintainability, reusability, and browser caching.

---

Q2. Explain the concept of cascade and specificity in CSS.

Cascade is the algorithm CSS uses to resolve conflicts when multiple style rules apply to the same element. It determines which rule takes precedence based on three factors: 1. Importance — Rules with !important override normal rules. 2. Specificity — More specific selectors override less specific ones. 3. Source order — When specificity is equal, the last rule defined wins.

Specificity is a scoring system for selectors:

• Inline styles: weight 1000
• ID selectors: weight 100
• Class/attribute/pseudo-class selectors: weight 10
• Element/pseudo-element selectors: weight 1
• Universal selector (*): weight 0

Example: #nav .item (specificity 110) overrides .item (specificity 010). Even if .item appears later in the stylesheet, the higher-specificity rule wins.

---

Q3. Explain the CSS box model with a diagram description.

The CSS box model represents every element as a rectangular box with four concentric layers:

1. Content — The innermost area where text, images, or other content appears. Its dimensions are set by width and height properties. 2. Padding — Transparent space between the content and the border. Set by padding-top, padding-right, padding-bottom, padding-left or the shorthand padding. 3. Border — Surrounds the padding. Set by border-width, border-style, border-color or the shorthand border. 4. Margin — Transparent space outside the border that separates the element from neighbouring elements. Set by margin-top, etc., or the shorthand margin.

The total width of an element = content width + left padding + right padding + left border + right border + left margin + right margin.

Example:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

Total width = 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px.

---

Q4. List and explain any five commonly used CSS properties.

1. color — Sets the text colour. Values can be named (red), hex (#FF0000), or rgb (rgb(255,0,0)). Example: color: #333333; 2. background-color — Sets the background colour of an element. Example: background-color: #f0f0f0; 3. font-size — Sets the size of the text. Accepts absolute (px, pt) and relative (em, %) units. Example: font-size: 16px; 4. margin — Sets the space outside an element's border. Shorthand: margin: 10px 20px 10px 20px; (top right bottom left). 5. text-align — Sets the horizontal alignment of text. Values: left, center, right, justify. Example: text-align: center;

---

Q5. What is inheritance in CSS? Give examples.

Inheritance in CSS means that certain properties applied to a parent element are automatically passed down to its child elements. Not all properties are inherited — generally, text-related properties inherit while box-related properties do not.

Inherited properties include: color, font-family, font-size, font-weight, text-align, line-height, visibility.

Non-inherited properties include: margin, padding, border, background-color, width, height, display.

Example:

body { color: blue; }

All text inside <p>, <h1>, <span>, and other elements within <body> will be blue unless overridden by a more specific rule. However, border: 1px solid black; on <body> will NOT apply a border to every child element.

---

Q6. Explain the difference between font-family and font-style properties.

font-family specifies the typeface (the visual design of the text). You can list multiple fonts as fallbacks separated by commas. The browser uses the first available font.

p { font-family: Arial, Helvetica, sans-serif; }

font-style specifies whether the text is normal, italic, or oblique. It does not change the typeface.

p { font-style: italic; }

In summary, font-family determines which font to use, while font-style determines how the font appears (normal, italic, or oblique).

---

IV. Long Answer Questions (5 Marks)

Q1. Explain the different types of CSS selectors in detail with examples.

CSS selectors are patterns used to select the HTML elements you want to style. The main types are:

1. Element (Type) Selector: Selects all elements of a given type.

p { color: blue; }

This styles every <p> element on the page. Specificity weight: 1.

2. Class Selector: Selects elements with a specific class attribute. Uses a dot (.) prefix.

.highlight { background-color: yellow; }

Can be applied to multiple elements: <p class="highlight">. Specificity weight: 10.

3. ID Selector: Selects a unique element with a specific id attribute. Uses a hash (#) prefix.

#header { font-size: 28px; }

Should be used only once per page since IDs must be unique. Specificity weight: 100.

4. Universal Selector: Selects all elements on the page.

* { margin: 0; padding: 0; }

Commonly used for CSS resets. Specificity weight: 0.

5. Descendant Selector: Selects elements nested inside a specific ancestor.

nav a { text-decoration: none; }

Targets all <a> tags inside a <nav> element. Specificity weight: sum of all selectors (e.g., nav a = 2).

6. Group Selector: Applies the same styles to multiple selectors separated by commas.

h1, h2, h3 { font-family: Arial; }

Each selector keeps its own specificity; they do not combine.

7. Pseudo-class Selector: Selects elements in a special state.

a:hover { color: red; }
a:visited { color: purple; }

Styles a link when the mouse hovers over it or when it has been visited. Specificity weight: 10.

---

Q2. Compare inline, internal, and external CSS. When would you use each?

When to use each:

• Inline CSS — Use sparingly for quick, one-off style changes or when working in environments where you cannot edit stylesheets (e.g., email HTML, CMS restrictions). Avoid for regular web development as it mixes presentation with content.

• Internal CSS — Use for single-page websites or when you need page-specific styles that differ from the site-wide stylesheet. Useful for testing styles before moving them to an external file.

• External CSS — This is the preferred method for most projects. It keeps HTML clean, allows styles to be reused across pages, and benefits from browser caching which improves page load speed. A single change in the .css file reflects across all linked pages.

---

Q3. Write CSS code to design a simple webpage layout with header, navigation, content, and footer sections.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Reset default margins */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body { font-family: Arial, sans-serif; }

    /* Header */
    #header {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: 20px;
    }

    /* Navigation */
    #nav {
      background-color: #34495e;
      padding: 10px;
      text-align: center;
    }
    #nav a {
      color: white;
      text-decoration: none;
      padding: 10px 20px;
    }
    #nav a:hover {
      background-color: #2c3e50;
    }

    /* Content */
    #content {
      padding: 20px;
      margin: 10px;
      background-color: #ecf0f1;
      min-height: 400px;
    }

    /* Footer */
    #footer {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="header"><h1>My Website</h1></div>
  <div id="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
  <div id="content">
    <h2>Welcome</h2>
    <p>This is the main content area.</p>
  </div>
  <div id="footer">&copy; 2026 My Website</div>
</body>
</html>

This example demonstrates the use of ID selectors, descendant selectors, pseudo-classes (:hover), the box model (padding, margin), background-color, text-align, and font-family properties.

---

Q4. Explain the CSS properties for text formatting with examples.

CSS provides several properties to control the appearance of text:

1. color: Sets the text colour using named colours, hex codes, or RGB values.

h1 { color: #333333; }
p { color: rgb(50, 50, 50); }

2. font-family: Specifies the typeface. Always provide fallback fonts ending with a generic family.

body { font-family: "Times New Roman", Times, serif; }
h1 { font-family: Arial, Helvetica, sans-serif; }

3. font-size: Sets the text size using absolute or relative units.

h1 { font-size: 28px; }
p { font-size: 1em; }
.small { font-size: 80%; }

4. font-weight: Controls the boldness of text. Values: normal, bold, bolder, lighter, or 100-900.

strong { font-weight: bold; }
h2 { font-weight: 700; }

5. font-style: Sets whether text is normal, italic, or oblique.

em { font-style: italic; }

6. text-align: Sets horizontal alignment. Values: left, center, right, justify.

h1 { text-align: center; }
p { text-align: justify; }

7. text-decoration: Adds visual decoration. Values: none, underline, overline, line-through.

a { text-decoration: none; }
.old-price { text-decoration: line-through; }

8. text-transform: Controls capitalization. Values: uppercase, lowercase, capitalize, none.

h1 { text-transform: uppercase; }
.name { text-transform: capitalize; }

9. line-height: Sets the vertical spacing between lines of text.

p { line-height: 1.6; }

10. letter-spacing: Controls the space between characters.

h1 { letter-spacing: 2px; }

---

Q5. Explain the background and border properties in CSS with examples.

Background Properties:

1. background-color: Sets the background colour of an element.

body { background-color: #f5f5f5; }
div.highlight { background-color: lightyellow; }

2. background-image: Sets an image as the background.

header { background-image: url("banner.jpg"); }

3. background-repeat: Controls how the background image repeats. Values: repeat, no-repeat, repeat-x, repeat-y.

header { background-repeat: no-repeat; }

4. background-position: Sets the starting position of the background image.

header { background-position: center top; }

5. background (shorthand): Combines all background properties.

header { background: #2c3e50 url("banner.jpg") no-repeat center top; }

Border Properties:

1. border-width: Sets the thickness of the border.

.box { border-width: 2px; }

2. border-style: Sets the style of the border. Values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.

.box { border-style: solid; }

3. border-color: Sets the colour of the border.

.box { border-color: #333333; }

4. border (shorthand): Combines width, style, and colour.

.box { border: 2px solid #333333; }

5. Individual side borders: You can set borders for each side separately.

.top-border { border-top: 1px dashed red; }
.bottom-only { border-bottom: 3px solid blue; }

6. border-radius: Creates rounded corners.

.rounded { border-radius: 10px; }
.circle { border-radius: 50%; }

---

Common Mistakes to Avoid

• Confusing class selector (.) with ID selector (#). Remember: dot for class, hash for ID.
• Forgetting the semicolon (;) at the end of each CSS declaration. Every property-value pair must end with a semicolon.
• Using font-color or text-color instead of color for text colour. The property is simply color.
• Using bgcolor (an HTML attribute) instead of background-color (the CSS property).
• Writing padding = 10px instead of padding: 10px — CSS uses a colon, not an equals sign.
• Applying inline styles heavily — they override everything and make maintenance difficult.
• Not understanding specificity: an ID selector (#id) always overrides a class selector (.class) regardless of order.
• Forgetting border-style — border-width and border-color alone will not display a border without also setting border-style.
• Using duplicate IDs on the same page — IDs must be unique; use classes for multiple elements.
• Mixing up font-style: italic with font-weight: bold — italic changes the slant, bold changes the thickness.

Exam Checklist

• [ ] Can define CSS and explain why it is used
• [ ] Can list and differentiate the three types of CSS (inline, internal, external)
• [ ] Can write correct CSS syntax: selector { property: value; }
• [ ] Know the difference between class, ID, element, universal, and descendant selectors
• [ ] Can explain the box model (content, padding, border, margin)
• [ ] Understand cascade, specificity, and inheritance
• [ ] Can write CSS for text styling (color, font-size, font-family, text-align)
• [ ] Can write CSS for background and border properties
• [ ] Know which CSS type to use in different scenarios
• [ ] Can trace specificity to determine which rule wins in a conflict
• [ ] Can distinguish between padding and margin
• [ ] Can use shorthand properties for margin, padding, border, and background
• [ ] Understand pseudo-classes like :hover and :visited
• [ ] Can create a simple webpage layout using CSS