Cascading-Style-Sheets-tutorial-for-beginners-css

admin

2/14/2025

CSS Tutorial for Beginners

Go Back

CSS Tutorial for Beginners: Learn CSS Syntax, Selectors, and Styling

Updated: December 31, 2022 | By Computer Hope

What is CSS?

CSS (Cascading Style Sheets) is a powerful language used to style and design web pages. Developed by the World Wide Web Consortium (W3C) on December 17, 1996, CSS has become an essential tool for web developers. In this tutorial, you’ll learn:

  • What is CSS and why is it used?
  • How to write CSS
  • CSS syntax and selectors
  • Common CSS properties
  • Examples and tools for beginners
CSS Tutorial for Beginners

How to Write CSS

If you’re familiar with HTML, you’ll notice that CSS syntax is different. CSS is applied to HTML elements using selectors and style rules. Here’s how it works:

CSS Syntax:


selector {
  property: value;
}

Selector: Targets the HTML element (e.g., h1, p).

Property: Defines the style (e.g., color, font-size).

Value: Specifies the style value (e.g., red, 16px).

Methods to Apply CSS in HTML

There are three ways to apply CSS to HTML:

  1. Inline CSS: Directly within an HTML tag using the style attribute. 
    
<h1 style="color: blue;">Hello World!</h1>
  2. Internal CSS: Within a <style> tag in the <head> section. 
    
<head>
  <style>
    h1 { color: blue; }
  </style>
</head>
  3. External CSS: Linking an external .css file. 
    
<head>
  <link rel="stylesheet" href="styles.css">
</head>

CSS Comments

Comments in CSS are ignored by the browser and are useful for adding notes to your code. To write a comment, use /* and */:


/* This is a CSS comment */
h1 {
  color: blue; /* Change heading color to blue */
}

Why is CSS Used in Development?

CSS is used to:

  • Style web pages (colors, fonts, layouts).
  • Create animations and interactive elements.
  • Ensure responsive design for different screen sizes.

What is a CSS Selector?

A CSS selector targets HTML elements to apply styles. Common selectors include:

  • Element Selector: Targets HTML tags (e.g., h1, p).
  • Class Selector: Targets elements with a specific class (e.g., .my-class).
  • ID Selector: Targets a unique element with an ID (e.g., #my-id).

Common CSS Properties

Here are some essential CSS properties:

  • Text Properties:
    • color: Sets text color.
    • font-size: Defines text size.
    • text-transform: Changes text case (e.g., uppercase).
  • Layout Properties:
    • width and height: Set element dimensions.
    • margin and padding: Control spacing.
    • float and clear: Manage element positioning.
  • Background Properties:
    • background-color: Sets background color.
    • background-image: Adds a background image.
  • Border Properties:
    • border: Defines border style, width, and color.

Example: Basic CSS Code

Here’s an example of a simple HTML page with CSS:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My CSS Experiment</title>
  <style>
    h1 {
      color: blue;
      font-size: 36px;
    }
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first CSS example.</p>
</body>
</html>

Tools You Need to Work with CSS

To start working with CSS, you’ll need:

  • A text editor like Notepad, Visual Studio Code, or Sublime Text.
  • A modern web browser like Chrome, Firefox, or Edge.
  • A computer with at least 128 MB of RAM (though modern systems are recommended).

Conclusion

CSS is a fundamental skill for web developers, enabling you to create visually appealing and responsive websites. With this tutorial, you’ve learned the basics of CSS syntax, selectors, and properties, as well as how to apply styles to HTML elements. Whether you’re designing a simple webpage or a complex web application, mastering CSS is essential for delivering a great user experience.

Start experimenting with CSS today! Try creating your own styles, explore advanced properties like animations and gradients, and build responsive layouts using media queries. The more you practice, the more confident you’ll become in your web development skills.

Ready to take your skills to the next level? Check out our complete web development guide or explore more tutorials on W3Schools and MDN Web Docs.

Table of content