Introduction to CSS

CSS, or Cascading Style Sheets, is the language that styles the look and feel of your websites. It controls things like colors, fonts, layout, and responsiveness, making your websites visually appealing and user-friendly. Without CSS, a webpage would be just plain text and images!

What is CSS?

CSS works by applying styles to HTML elements. Think of HTML as the structure of your website (the content) and CSS as the makeup. CSS rules are written in a specific format: a selector (which HTML element to style), a property (what you want to change, like color or font size), and a value (how you want to change it). For example, you might tell all the paragraph tags (<p>) to have a specific color.

Basic Example

Let’s see a simple example. We’ll style a heading tag (<h1>) to be blue. There are several ways to apply CSS. For this example, we’ll use internal CSS (within the <head> section of your HTML):


<!DOCTYPE html>
<html>
<head>
  <title>My First CSS Example</title>
  <style>
    h1 {
      color: blue; /* Sets the text color to blue */
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Explanation: In the <style> tags, we have a CSS rule. h1 is the selector (targeting all <h1> tags). color is the property, and blue is the value. The browser will render the “Hello, World!” heading in blue. This is a very simple example, but it shows the basic structure: selector { property: value; }.

Practical Usage

Let’s look at a more practical example, styling a button:


<!DOCTYPE html>
<html>
<head>
  <title>Button Styling</title>
  <style>
    .my-button { /* Using a class selector */
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="my-button">Click Me!</button>
</body>
</html>

Explanation: Here, we’re using a class selector (.my-button). We define a class called “my-button” in our CSS, and apply it to the <button> element using class="my-button". This allows us to style the button with a green background, white text, padding, and other properties. This is a more common way to style elements.

Key Takeaways

CSS is used to style the visual presentation of web pages.
CSS rules consist of selectors, properties, and values.
Selectors target specific HTML elements to apply styles.
You can use internal CSS (within <style> tags), external CSS files (linked via <link> tag), and inline CSS (inside HTML tags).
Classes are a common way to apply styles to multiple elements with the same styling.