CSS3 tutorial for beginners part 1

CSS3 is the latest evolution of Cascading Style Sheets, offering a variety of powerful features to create visually stunning and responsive websites. This tutorial will cover the basics of CSS3, including its syntax, selectors, and some of the new features that make modern web design so exciting.

1. What is CSS3?

CSS3 is the current standard for CSS and builds on previous versions by introducing new modules and capabilities. With CSS3, developers can create smoother animations, transitions, and responsive layouts, among many other enhancements.

2. Basic Syntax and Structure

A CSS rule consists of a selector and a declaration block. The selector targets HTML elements, while the declarations inside the block define how those elements should be styled.

selector {
  property: value;
  /* Additional declarations */
}

For example:

p {
  color: darkblue;
  font-size: 16px;
}

3. Using Selectors

CSS3 provides a range of selectors to target elements precisely:

/* Element selector */
h1 {
  font-weight: bold;
}

/* Class selector */
.highlight {
  background-color: yellow;
}

/* ID selector */
#main-title {
  font-size: 2em;
}

/* Attribute selector */
a[target="_blank"] {
  color: red;
}

4. New and Exciting Features in CSS3

4.1 Rounded Corners

.box {
  border-radius: 15px;  /* Rounds the corners */
}

4.2 Box Shadows and Text Shadows

.box {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

4.3 Transitions and Animations

.button {
  background-color: #008CBA;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #005f73;
}

4.4 Responsive Design with Media Queries

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

5. A Simple Example: Building a Stylish Box

The following example demonstrates a complete HTML snippet that uses CSS3 features such as rounded corners, shadows, and transitions:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stylish Box Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f0f0;
      padding: 20px;
    }
    .box {
      width: 300px;
      height: 200px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      margin: auto;
      padding: 20px;
      transition: transform 0.3s ease;
    }
    .box:hover {
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>Hello, CSS3!</h1>
    <p>This box scales up on hover.</p>
  </div>
</body>
</html>

6. Tips for Beginners

- Experiment with different properties and values to see their effects.
- Use browser developer tools to inspect and modify CSS on the fly.
- Practice building small projects to reinforce your learning.
- Explore responsive design by testing your layouts on various devices.

Back to main See all articles