Skip to main content

What is CSS? (Live Playground)

Cascading Style Sheets (CSS) is a language that defines the appearance of webpages by controlling the styling and layout of HTML elements. This tutorial explains the purpose of CSS, its advantages, and how it works with HTML to create visually appealing webpages.

CSS: A definition​

CSS stands for Cascading Style Sheets. It is a stylesheet language that describes how HTML elements should be displayed on the screen. CSS helps control the layout, colors, fonts, and other visual aspects of a webpage, making it an essential tool for web developers and designers.

The purpose of CSS​

The primary purpose of CSS is to separate the presentation (appearance) from the content (HTML) of a webpage. This separation leads to several benefits:

  • Easier maintenance: By keeping styles in a separate CSS file, developers can update the appearance of a site without touching the HTML content.
  • Consistency: CSS enables developers to apply styles globally across multiple pages, ensuring a consistent look and feel.
  • Faster loading times: Applying styles through CSS can result in smaller HTML file sizes, leading to faster loading times for webpages.
  • Accessibility: CSS allows developers to create websites that are accessible to users with disabilities or those using assistive technologies.

How CSS works with HTML​

CSS styles HTML elements by using selectors to target specific elements and applying properties to change their appearance. A simple example is changing the text color of a paragraph element:

HTML
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>
CSS
p {
  color: red;
}

In this example, the CSS file targets the <p> element using a selector (p) and sets the color property to red. The result is that the text in the paragraph will appear red.

Live Playground, Try it Yourself

Sample CSS code​

Here is a sample CSS code that demonstrates how to style various HTML elements:

CSS
/* Set the background color of the body element */
body {
  background-color: lightblue;
}

/* Style headings */
h1 {
  color: darkblue;
  text-align: center;
}

/* Style paragraph text */
p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Add a border to images */
img {
  border: 3px solid black;
}
Live Playground, Try it Yourself

Conclusion​

In this tutorial, you learned what CSS is, its purpose, and how it works with HTML to create visually appealing webpages. With this foundational knowledge, you can continue exploring CSS and start creating your own styles for your projects.