CSS: Introduction MCQs Quiz | Class 10

This quiz covers Class X, Subject Computer Applications (Code 165), Unit 2: HTML, focusing on CSS: Introduction and the critical concept of Separation of style from content. Test your knowledge, submit your answers, and download a detailed PDF of your results for revision!

Understanding CSS: Introduction and Style Separation

Cascading Style Sheets (CSS) is a fundamental language for styling web pages. It works hand-in-hand with HTML, which provides the structure and content of a web page, while CSS dictates how that content should look – colors, fonts, layout, spacing, and more.

Why Separate Style from Content?

The concept of “Separation of style from content” is a cornerstone of modern web development and a best practice. It means keeping your HTML focused solely on the structure and meaning of your content, and your CSS focused solely on its presentation. Here’s why it’s crucial:

Maintainability: Changes to design can be made in one CSS file, affecting multiple HTML pages, without touching the content markup. This saves immense time and reduces errors.
Reusability: A single stylesheet can be used across an entire website, ensuring a consistent look and feel with minimal effort. You can even reuse styles for different projects.
Accessibility: By separating style, screen readers and other assistive technologies can more easily interpret the semantic structure of your content without being cluttered by presentation instructions.
Faster Loading: Browsers can cache external CSS files, leading to faster page load times on subsequent visits.
Flexibility: Different stylesheets can be applied for various devices (e.g., desktop, mobile, print) or user preferences, enhancing the user experience.

Ways to Include CSS

There are three primary ways to add CSS to an HTML document:

Inline Styles: Applied directly to an HTML element using the style attribute. This is generally discouraged for larger projects as it violates the principle of style separation.
```
<p style="color: blue; font-size: 16px;">This is a blue paragraph.</p>
```
Internal (Embedded) Styles: Defined within a <style> tag in the <head> section of an HTML document. Useful for single-page styles but still not ideal for site-wide consistency.
```
<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>
```
External Stylesheet: The most recommended method. Styles are written in a separate .css file and linked to the HTML document using the <link> tag in the <head> section. This perfectly embodies the separation of style from content.
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```

Comparison of CSS Inclusion Methods

Method	Description	Pros	Cons
Inline	Directly in HTML element’s `style` attribute.	Quick fixes, high specificity.	No separation, difficult to maintain, not reusable.
Internal	Within `<style>` tags in the HTML `<head>`.	Styles a single page, easy to see styles for a specific page.	No site-wide reuse, still mixes some style with content.
External	In a separate `.css` file, linked via `<link>`.	Best practice, full separation, maintainable, reusable, cacheable.	Requires an extra HTTP request (minor).

Quick Revision Checklist

CSS is for styling, HTML is for structure.
Separation of style from content improves maintainability, reusability, and accessibility.
Three ways to add CSS: inline, internal, external.
External stylesheets are the preferred method for most web development.
A basic CSS rule consists of a selector, property, and value (e.g., h1 { color: blue; }).

Practice Questions

Which CSS property is used to set the font size of text?
How can you select an element with the class name “highlight” in CSS?
What is the purpose of the ‘cascading’ in Cascading Style Sheets?
True or False: Inline styles always override external styles.
Write a simple CSS rule to make all paragraphs (`
`) have a text color of red.

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.

Your Result