What is First CSS stylesheet?

CSSmarkup~5 mins

First CSS stylesheet

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

CSS stylesheets help make web pages look nice and organized. They control colors, fonts, and layout.

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

You want to make headings bigger or smaller.

You want to add space around images or text.

You want to set a background color for your page.

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

Syntax

CSS

selector {
  property: value;
}

Selector chooses which HTML parts to style.

Property is what you want to change, like color or font size.

Examples

This sets the whole page background to light blue.

CSS

body {
  background-color: lightblue;
}

This makes all <h1> headings dark red and bigger.

CSS

h1 {
  color: darkred;
  font-size: 2rem;
}

This adds space above and below paragraphs and makes lines easier to read.

CSS

p {
  margin: 1rem 0;
  line-height: 1.5;
}

Sample Program

This example shows a simple webpage with a linked CSS file named styles.css. The CSS sets a light blue background, changes the font and colors, and styles the heading and paragraph for better readability.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My First CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first CSS stylesheet example.</p>
</body>
</html>

/* styles.css */
body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  color: #333333;
  padding: 1rem;
}
h1 {
  color: #00509e;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
p {
  font-size: 1.125rem;
  line-height: 1.6;
}

OutputSuccess

Important Notes

Always link your CSS file inside the <head> section using <link rel="stylesheet" href="filename.css" />.

Use readable font sizes with rem units for better accessibility.

Test your styles on different screen sizes to make sure your page looks good everywhere.

Summary

CSS stylesheets control how your webpage looks.

Use selectors to pick HTML elements and properties to style them.

Link your CSS file in the HTML <head> to apply styles.