Skip to content
preservelog

What, Why & How of CSS3

CSS3, or Cascading Style Sheets Level 3, is the latest evolution of the CSS standard. It brings a wide array of new features and improvements that make it easier for developers to create visually appealing and responsive web pages.

Overview of CSS3

Section titled “Overview of CSS3”

CSS3 builds on the foundations of CSS2, adding new modules and enhancing existing ones. It introduces a variety of new features such as advanced selectors, new properties, and media queries, which enable more sophisticated and dynamic styling of web pages. CSS3 is designed to work alongside HTML5, providing a richer and more flexible styling language for modern web development.

Setting Up Your Environment

Section titled “Setting Up Your Environment”

For creating and working with CSS files, you can follow the setup explained in HTML docs itself. Check it out here.

Creating Your First CSS3 File

Section titled “Creating Your First CSS3 File”

  1. Open your preferred text editor or IDE.

  2. Create a new file and name it styles.css. The .css extension indicates that this is a CSS file.

  3. Write some basic CSS rules. For example:

body {
  background-color: #e0e0e0;
  font-family: "Helvetica Neue", Arial, sans-serif;
}


h1 {
  color: #2c3e50;
  text-align: center;
}


p {
  font-size: 16px;
  color: #34495e;
}

  1. Save the file in your project directory.

  2. Link the CSS file to your HTML file. Open your HTML file (e.g., index.html) and add a link to the CSS file in the <head> section:

<!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>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first CSS example.</p>
  </body>
</html>
  1. Open your HTML file in a web browser to see the styles applied.