XQA
Back to Web Development
2026-01-315 min read

CSS Reference (Web Development)

Learn CSS Reference (Web Development) step by step with clear examples and exercises.

Title: CSS Reference (Web Development)

Why This Matters

CSS, or Cascading Style Sheets, is an essential tool in web development that allows designers to separate the presentation of a website from its content. By understanding CSS, you can create visually appealing and responsive websites with ease. This lesson provides an in-depth exploration of CSS, focusing on practical applications, common mistakes, and interview-ready tips.

Prerequisites

Before diving into CSS, it's important to have a basic understanding of HTML (HyperText Markup Language). Familiarity with HTML tags like `, , , and common elements such as to , , and ` will help you grasp CSS more effectively. Additionally, having a good understanding of HTML document structure is crucial for applying CSS selectors accurately.

HTML Document Structure

HTML documents are organized into sections, each with its own purpose:

  1. DOCTYPE Declaration: Defines the version of HTML being used.
  2. ``: The root element that contains all other elements in an HTML document.
  3. ``: Contains metadata and links to external resources such as CSS files, scripts, and character encoding declarations.
  4. ``: Provides the title of the webpage, displayed in browser tabs and search engine results.
  5. ``: The main content area of the webpage, containing all visible elements that users interact with.

Core Concept

The Anatomy of a CSS Rule

A CSS rule consists of three main parts: selector, declaration block, and properties.

  1. Selector: This part identifies the HTML element(s) that the CSS rule applies to. For example, div selects all `` elements on the page.
  1. Declaration Block: Enclosed within curly braces {}, this block contains one or more declarations (property: value pairs). Each declaration represents a specific style property and its corresponding value.
  1. Properties: These are the visual attributes that can be styled using CSS, such as color, font, size, positioning, and layout.

External vs Internal Stylesheets

CSS rules can be applied in two ways: externally (in a separate .css file) or internally (within the HTML document).

  • External Stylesheet: A separate .css file containing multiple CSS rules is linked to an HTML document using the ` tag in the ` section. This approach allows for easier management and reusability of styles across multiple pages.
  • Internal Stylesheet: CSS rules can also be added directly within the ` tags in the or ` sections of an HTML document. This method is useful for testing or applying quick styling changes without modifying external files.

Worked Example

Let's create a simple CSS rule that changes the color and font size of all paragraphs (``) on a webpage using both internal and external stylesheets.

Internal Stylesheet Example

<!-- HTML file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My CSS Example</title>

<!-- Applying CSS rules internally -->
<style>
p {
color: blue; /* Changes the color of all <p> elements to blue */
font-size: 20px; /* Increases the font size of all <p> elements to 20 pixels */
}
</style>
</head>
<body>
<h1>My CSS Example Page</h1>
<p>This is a paragraph with default styling.</p>
<p>Another paragraph with default styling.</p>
</body>
</html>

External Stylesheet Example

First, create an external stylesheet (styles.css):

/* External CSS file */
p {
color: blue; /* Changes the color of all <p> elements to blue */
font-size: 20px; /* Increases the font size of all <p> elements to 20 pixels */
}

Then, link the stylesheet to your HTML file:

<!-- HTML file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My CSS Example</title>

<!-- Linking the external stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My CSS Example Page</h1>
<p>This is a paragraph with default styling.</p>
<p>Another paragraph with default styling.</p>
</body>
</html>

Common Mistakes

  1. Forgetting the semicolon (;): After each property and value pair, a semicolon is required to separate declarations within the declaration block.
  1. Missing curly braces: If only one declaration is present in the declaration block, some developers may forget to include the closing curly brace }.
  1. Incorrect selector syntax: CSS selectors should always end with a closing tag (e.g., div), and should not include the opening tag (e.g., `). Additionally, make sure to use proper element names when selecting HTML elements. For example, use body instead of `.
  1. Incorrectly targeting nested elements: To target a nested element, use a more specific selector that includes the parent element's tag and the child element's tag, separated by a space (e.g., div p selects all ` elements inside ` elements).
  1. Incorrectly using ID vs class selectors: ID selectors (#id) should be used to target specific HTML elements with unique ID attributes, while class selectors (.class) can be applied to multiple elements with the same class attribute.

Practice Questions

  1. Write a CSS rule that changes the background color of all `` elements to light grey (#D3D3D3) using an external stylesheet.
/* External CSS file */
body {
background-color: #D3D3D3;
}
  1. Create a CSS rule that makes all level-two headings (``) bold and centered within the page using an internal stylesheet.
<!-- HTML file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My CSS Example</title>

<!-- Applying CSS rules internally -->
<style>
h2 {
font-weight: bold; /* Makes all <h2> elements bold */
text-align: center; /* Centers all <h2> elements within the page */
}
</style>
</head>
<body>
<h1>My CSS Example Page</h1>
<h2>Level Two Heading</h2>
<!-- Add more <h2> elements as needed -->
</body>
</html>

FAQ

  1. Why should I use CSS instead of inline styling? Inline styling can make it difficult to maintain consistency across a website, as each element may have its own unique styling. CSS allows for centralized control over all styling elements, making updates and changes easier to implement.
  1. What is the difference between ID and class selectors in CSS? An ID selector (#id) targets a specific HTML element with a unique ID attribute, while a class selector (.class) can be applied to multiple elements with the same class attribute.
  1. How do I target an HTML element nested within another element using CSS? To target a nested element, use a more specific selector that includes the parent element's tag and the child element's tag, separated by a space (e.g., div p selects all ` elements inside ` elements).
  1. What are some best practices when writing CSS? Some best practices include using meaningful class names, keeping your CSS organized and modular, minimizing the use of inline styles, and following a consistent naming convention for variables, selectors, and properties. Additionally, it's important to write clean, reusable code that is easy to understand and maintain.
CSS Reference (Web Development) | Web Development | XQA Learn