CSSmarkup~5 mins

What is CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

CSS helps you make websites look nice and organized. It controls colors, fonts, and layout.

You want to change the color of text on a webpage.

You want to arrange pictures and text side by side.

You want to make your website look good on phones and computers.

You want to add space between elements so the page is easy to read.

You want to change the size or style of buttons and links.

Syntax

CSS

selector {
  property: value;
}

The selector chooses which part of the page to style.

Inside the braces, you write property and value pairs to set styles.

Examples

This makes all paragraphs have blue text.

CSS

p {
  color: blue;
}

This sets the main headings to be bigger and centered.

CSS

h1 {
  font-size: 2rem;
  text-align: center;
}

This styles elements with class 'button' to have a green background and white text with some padding.

CSS

.button {
  background-color: green;
  color: white;
  padding: 1rem;
}

Sample Program

This example shows a simple webpage styled with CSS inside the <style> tag. The heading is blue and centered. The paragraph text is dark gray and easy to read with spacing around it.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple CSS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 2rem;
    }
    h1 {
      color: #2a7ae2;
      text-align: center;
    }
    p {
      color: #333333;
      font-size: 1.2rem;
      max-width: 600px;
      margin: 1rem auto;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS makes websites look beautiful and easy to read by adding colors, spacing, and fonts.</p>
</body>
</html>

OutputSuccess

Important Notes

CSS stands for Cascading Style Sheets.

You can write CSS inside your HTML file or in a separate file.

Using CSS keeps your website neat and easier to change later.

Summary

CSS controls how a webpage looks.

It uses selectors and properties to style elements.

CSS helps make websites pretty and user-friendly.