2026-04-136 min read

Introduction to CSS

Q: How do I target specific elements with IDs or classes in my CSS?

To target elements by their ID, use the format `#myIdSelector`. For class selectors, use the format `.myClassSelector`. Remember to ensure that your HTML elements have unique IDs and appropriate class attributes for accurate styling.

Learn Introduction to CSS step by step with clear examples and exercises.

Why This Matters

In this tutorial, we will delve into the world of Cascading Style Sheets (CSS), a vital tool that enhances the visual aspect of web pages. By understanding CSS, you'll be able to create more engaging and attractive websites, making your mark in the digital landscape.

The Importance of Visual Appeal in Web Development

Websites that are visually appealing tend to have higher user engagement rates, as they provide a more enjoyable browsing experience. A well-designed website can also help establish a strong brand identity and create a lasting impression on visitors. CSS plays a crucial role in achieving this visual appeal by allowing developers to control various aspects such as layout, colors, fonts, and animations.

Moreover, mastering CSS is essential for excelling in web design competitions, job interviews, and real-world projects where visual appeal plays a crucial role. Additionally, understanding CSS will help you debug common issues that arise during the development process.

Prerequisites

Before diving into CSS, it's important to have a solid foundation in HTML. Familiarize yourself with basic HTML tags and their purposes, as they form the structure upon which we'll apply styles using CSS. It is also beneficial to understand the basics of HTML semantics, such as using appropriate elements for specific content types.

Understanding HTML Semantics

HTML semantics refer to the use of specific tags to indicate the meaning and purpose of the content they enclose. For example, ` is used for a website's header section, while ` is used for the footer. Using appropriate HTML semantics not only improves accessibility but also makes it easier to style your web pages using CSS.

Core Concept

Understanding CSS Syntax

CSS uses a specific syntax to define rules for styling HTML elements. A typical CSS rule consists of three parts:

Selector: This is the HTML element you want to style, such as div, p, or h1. CSS selectors can be simple or complex, allowing you to target specific elements based on their attributes, position in the DOM, and more.
Properties: These are the visual attributes you want to change, like color, font-size, and margin. CSS properties encompass a wide range of styles that can be applied to HTML elements, making it possible to create unique and visually appealing websites.
Values: These are the specific values for each property, such as red for color or 20px for font size. Values can be simple (e.g., colors, font families) or complex (e.g., gradients, animations).

Here's an example of a CSS rule:

h1 {
color: red;
font-size: 36px;
text-align: center; /* Adding a new property */
}

In this example, the selector is h1, and we're setting the color to red, the font size to 36 pixels, and the text alignment to center.

CSS Selectors

CSS selectors help you target specific HTML elements for styling. There are various types of selectors, including:

Element Selector: Selects all instances of a particular HTML element, such as h1 or p.
ID Selector: Targets a specific element with a unique ID attribute, like #myId.
Class Selector: Styles elements that have a specific class attribute, such as .myClass.
Attribute Selector: Selects elements based on the value of an HTML attribute, like [type="text"] for input elements with type "text".
Pseudo-classes: These are special selectors that target elements based on their state or user interaction, such as :hover, :focus, and :active.
Pseudo-elements: These are used to style specific parts of an HTML element, like ::before and ::after.

CSS Box Model

The CSS box model is essential for understanding how elements are laid out on a web page. It consists of four parts: content, padding, border, and margin. Understanding this model will help you create responsive designs that adapt to different screen sizes.

Worked Example

Let's apply some basic styles to an HTML document using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First CSS Example</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}

h1 {
color: navy;
margin: 20px;
text-align: center; /* Adding a new property */
}

p {
color: darkgray;
padding: 10px;
border: 1px solid black;
}

/* Adding a new class selector */
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="highlight">Welcome to My Website!</h1>
<p>This is a simple example of CSS in action.</p>
</body>
</html>

In this example, we've applied styles to the body, h1, and p elements. The body now has a light blue background color, and we've set Arial as the default font for the entire page. We've also styled the h1 element with navy text, added a center alignment, and created a new class selector called highlight. This class can be applied to any element to give it a yellow background color and bold font.

Common Mistakes

Forgetting to close CSS rules

Ensure that each CSS rule is closed properly using a semicolon (;) followed by an empty line or a new rule. Failing to do so can cause syntax errors and prevent your styles from being applied correctly.

Overlooking browser compatibility issues

Different browsers may handle certain CSS properties differently, so it's essential to test your designs across various browsers to ensure consistent rendering. You can use tools like Can I Use to check the support for specific CSS properties across popular browsers.

Ignoring the box model

Failing to account for the CSS box model can lead to layout issues and misaligned elements on your web pages. To avoid this, make sure you understand how content, padding, border, and margin contribute to the overall size of an HTML element.

Forgetting to clear floats

When using floating elements in your layout, it's essential to clear the float to prevent layout issues. This can be done using the clear property or by adding a clearing div with overflow: hidden.

Practice Questions

Style a div element with a red background, white text, and a font size of 24 pixels using inline styles.

<div style="background-color: red; color: white; font-size: 24px;">Your content here</div>

Write a CSS rule that selects all li elements within an unordered list (ul) and gives them a 10-pixel margin on all sides.

ul li {
margin: 10px;
}

Create a CSS class called highlight that applies a yellow background color and bold font to any element it's applied to.

.highlight {
background-color: yellow;
font-weight: bold;
}

Style the `` element with a fixed position at the top of the page, a height of 100 pixels, and a background color of navy blue.

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: navy;
}

FAQ

Q: Can I use multiple CSS files in one HTML document?

A: Yes, you can link to multiple CSS files within an HTML document by including separate `` tags for each file in the head section of your HTML document.

Q: What is the difference between inline, internal, and external stylesheets?

A: Inline styles are applied directly to individual elements using the style attribute; internal stylesheets are defined within the ` tags inside the head section of an HTML document; and external stylesheets are separate files linked to the HTML document using a ` tag in the head section. Inline styles should be used sparingly, as they can make your code harder to maintain and can lead to duplicated styles.

Q: How do I target specific elements with IDs or classes in my CSS?

A: To target elements by their ID, use the format #myIdSelector. For class selectors, use the format .myClassSelector. Remember to ensure that your HTML elements have unique IDs and appropriate class attributes for accurate styling.

Q: How do I create a media query in CSS?

A: Media queries allow you to apply different styles based on the characteristics of the device or browser viewing your web page. To create a media query, use the @media keyword followed by the desired media type (e.g., screen) and a set of conditions (e.g., min-width: 768px). Inside the media query, you can define styles that will only be applied when the specified conditions are met.

@media screen and (min-width: 768px) {
/* Styles for screens with a minimum width of 768 pixels */
}