Skip to content
preservelog

What, Why & How of CSS3

CSS stands for Cascading Style Sheets, which is a stylesheet language used to define the presentation of structured documents and styling of a document written in a markup language.

Lets look at Wikipedia definition of Style sheet language

A style sheet language, or style language, is a computer language that expresses the presentation of structured documents. One attractive feature of structured documents is that the content can be reused in many contexts and presented in various ways. Different style sheets can be attached to the logical structure to produce different presentations.

CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility, since the content can be written without concern for its presentation; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

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.

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. Copy below snippets.

(will discuss ins and outs of the css in upcoming articles for now just copy past below the code to your file)

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 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>Preservelog tutorials</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.

This is what browser renders with CSS

With CSS

Same page looks like this without CSS

With out CSS

You can see how much of a difference few lines of CSS could do to enhance the website. Lets jump into how we make full use of the CSS3 in coming articles.