CSS

Introduction

CSS stands for Cascading Style Sheets. It is used to control the appearance and layout of web pages.

If HTML is the structure (the skeleton of a webpage), then CSS is the design (the skin and clothes).

HTML creates things like:

Headings
Paragraphs
Images
Buttons

CSS makes them:

Colorful
Properly spaced
Positioned nicely
Responsive on different screen sizes

Why Do We Need CSS?

Without CSS, websites look plain and unorganized.

HTML only gives structure:

<h1>Welcome</h1>
<p>This is my website.</p>

With CSS, we can make it look better:

h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 18px;
  color: gray;
}

Now the heading is blue and centered, and the paragraph has better styling.

How CSS Works

CSS works by selecting HTML elements and applying styles to them.

Basic CSS Syntax

selector {
  property: value;
}

Selector → The HTML element you want to style
Property → What you want to change (color, size, etc.)
Value → The style you want to apply

Example:

p {
  color: red;
}

This means:

"Make all paragraphs red."

Ways to Add CSS to HTML

There are three ways to use CSS:

1️⃣ Inline CSS (Inside an HTML Tag)

<p style="color: blue;">Hello World</p>

⚠️ Not recommended for large projects because it mixes design with structure.

2️⃣ Internal CSS (Inside <style> Tag)

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

Good for small websites.

3️⃣ External CSS

Create a separate file called style.css.

HTML file:

<link rel="stylesheet" href="style.css">

CSS file:

p {
  color: purple;
}

This keeps your code clean and organized.

Common CSS Selectors

1. Element Selector

h1 {
  color: red;
}

Targets all <h1> elements.

2. Class Selector

HTML:

<p class="intro">Hello</p>

CSS:

.intro {
  font-weight: bold;
}

Targets elements with class="intro".

3. ID Selector

HTML:

<h1 id="main-title">Welcome</h1>

CSS:

#main-title {
  color: blue;
}

Targets the element with id="main-title".

Common CSS Properties

1. Text Styling

p {
  color: black;
  font-size: 16px;
  font-family: Arial, sans-serif;
  text-align: center;
}

2. Background

body {
  background-color: lightgray;
}

3. Box Model

Every HTML element is a box. It has:

Content
Padding (space inside)
Border
Margin (space outside)

Example:

div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Simple Example Website

Here is a basic webpage styled with CSS:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My First CSS Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1 id="main-title">Welcome to My Website</h1>
  <p class="intro">This is a simple CSS example.</p>
  <div class="box">This is a styled box.</div>

</body>
</html>

CSS (style.css)

body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

#main-title {
  color: darkblue;
  text-align: center;
}

.intro {
  color: gray;
  font-size: 18px;
  text-align: center;
}

.box {
  width: 300px;
  padding: 20px;
  margin: 20px auto;
  border: 2px solid black;
  background-color: white;
  text-align: center;
}

Compilation of Entire Code

Below is everything combined into one HTML file using internal CSS:

Example Code:

<!DOCTYPE html>
<html>
<head>
  <title>My First CSS Page</title>
  <style>
    body {
      background-color: #f4f4f4;
      font-family: Arial, sans-serif;
    }

    #main-title {
      color: darkblue;
      text-align: center;
    }

    .intro {
      color: gray;
      font-size: 18px;
      text-align: center;
    }

    .box {
      width: 300px;
      padding: 20px;
      margin: 20px auto;
      border: 2px solid black;
      background-color: white;
      text-align: center;
    }
  </style>
</head>
<body>

  <h1 id="main-title">Welcome to My Website</h1>
  <p class="intro">This is a simple CSS example.</p>
  <div class="box">This is a styled box.</div>

</body>
</html>

CSS

Introduction

1. Text Styling

﻿﻿Compilation of Entire Code

Example Code:

CSS

All Courses

Compilation of Entire Code