2025-12-045 min read

CSS Tutorial (Web Development)

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

Why This Matters

CSS is an essential web development language that allows developers to design and style websites. By separating presentation from content, it makes maintaining and updating website designs easier without modifying HTML code. CSS is crucial for creating visually appealing, responsive, and user-friendly websites.

Prerequisites

Before diving into CSS, you should have a basic understanding of:

HTML (Hypertext Markup Language): the standard markup language used to create web pages. Familiarize yourself with HTML tags and their meanings, as well as how they structure content on a webpage.
Browser's Developer Tools: Understanding how to use browser developer tools, specifically the inspector and console, is crucial for debugging CSS issues and understanding how styles are applied to your HTML elements.

Core Concept

CSS Syntax

CSS uses a key-value pair syntax to define styles for HTML elements. A basic CSS rule consists of three parts:

Selector: identifies the HTML element(s) to which the style applies. Example selectors include body, h1, and #id.
Property: defines the visual aspect being styled, such as color, font-size, or margin.
Value: sets the desired value for the property.

Here's an example of a simple CSS rule:

body {
background-color: lightblue;
}

In this example, the body selector applies a light blue background color to the entire webpage.

External and Internal Stylesheets

CSS can be linked to an HTML document using an external stylesheet or included within the HTML file as an internal stylesheet.

External Stylesheet

To link an external stylesheet, add a `` tag in the head section of your HTML file:

<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>

In this example, "styles.css" is the name of the CSS file that contains the styles for the webpage.

Internal Stylesheet

To include an internal stylesheet, add a `` tag within the head or body section of your HTML file:

<head>
<title>My Web Page</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>

In this example, the CSS rule is included directly in the HTML file.

Cascade and Specificity

The cascading nature of CSS means that multiple styles can apply to a single element, with some styles taking precedence over others based on specificity and source order. To override a style, you can create more specific selectors or include the rule later in the source order (CSS files are read from top to bottom).

Media Queries

Media queries allow you to apply different styles depending on the device's screen size or orientation. This makes it possible to create responsive designs that adapt to various devices and browsers.

@media only screen and (max-width: 600px) {
body {
background-color: lightpink;
}
}

In this example, the body will have a light pink background color on screens with a maximum width of 600 pixels.

Worked Example

Let's create a simple webpage with an HTML file and an external CSS file:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="header">Welcome to My Web Page!</h1>
<p class="intro">This is a paragraph.</p>
<ul>
<li><a href="#header">Back to top</a></li>
</ul>
</body>
</html>

styles.css

/* Default Styles */
body {
background-color: lightblue;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, sans-serif;
}

/* Specific Styles */
#header {
color: navy;
font-size: 2em;
}
.intro {
color: darkgray;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* Media Query */
@media only screen and (max-width: 600px) {
body {
background-color: lightpink;
}
h1 {
font-size: 1.5em;
}
}

In this example, the HTML file includes a link to an external CSS file named "styles.css". The CSS file contains rules for the body, h1, #header, .intro, and a elements. When you open the index.html file in a web browser, you'll see a light blue (or light pink on smaller screens) background with a navy-colored heading, dark gray paragraph text, and a back-to-top link that changes its appearance when hovered over.

Common Mistakes

1. Forgetting to link or include the stylesheet

Ensure that your HTML file links to an external CSS file or includes an internal CSS file correctly.

2. Using incorrect syntax

Make sure your CSS rules follow the correct syntax, with a selector, property, and value separated by a colon (:) and semicolon (;) at the end of each rule.

3. Not specifying units for measurements

Always include units when defining measurements in CSS, such as pixels (px), ems (em), or percentages (%).

4. Ignoring specificity

Be aware that specificity can affect which styles are applied to an HTML element, and use more specific selectors when necessary to override existing styles.

Practice Questions

Create a CSS rule to change the font size of all h2 elements on your webpage to 1.5em.

h2 {
font-size: 1.5em;
}

Create a CSS rule to give all links a red underline and remove the default blue color.

a {
color: black;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}

Create a CSS rule to add a 10-pixel margin around every paragraph on your webpage.

p {
margin: 10px;
}

Write a media query to change the background color of the body to light green for screens with a maximum width of 800 pixels.

@media only screen and (max-width: 800px) {
body {
background-color: lightgreen;
}
}

FAQ

Q: Can I use multiple stylesheets on one webpage?

A: Yes, you can link multiple external stylesheets or include multiple internal stylesheets in the same HTML file. Just ensure that they are properly ordered and specificity is considered when overriding styles.

Q: How do I target specific elements within an HTML file using CSS selectors?

A: You can use various types of selectors to target specific elements, such as ID selectors (#id), class selectors (.class), and element selectors (e.g., h1, p, etc.). Additionally, you can combine selectors using comma-separated lists or group them using curly braces ({}) to apply multiple styles to the same elements.

Q: How do I override a style rule in CSS?

A: To override a style rule, create a more specific selector or include the rule later in the source order (CSS files are read from top to bottom). You can also use !important to forcefully override a style rule, but be cautious as it may lead to unintended consequences and make debugging more difficult.

Q: How do I create reusable styles using CSS?

A: To create reusable styles, you can define classes or IDs in your CSS file and apply them to multiple HTML elements in your HTML document. This allows you to easily modify the appearance of several elements at once by updating the corresponding CSS rule. Additionally, you can use CSS variables (custom properties) to store frequently used values and make them easier to manage across your stylesheet.