CSS-Tutorial

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance and layout of web pages.

While HTML defines the structure of a webpage, CSS defines how that webpage looks, including:

  • Colors
  • Fonts
  • Sizes
  • Spacing
  • Borders
  • Layouts
  • Animations
  • Responsive design for mobile devices
Benefits of CSS

Benefits of CSS

✅ Makes websites attractive

✅ Separates design from content

✅ Reduces code duplication

✅ Improves website maintenance

✅ Enables responsive mobile-friendly designs

CSS Syntax

CSS consists of a selector, property, and value.

selector {
property: value;
property: value;
}

h1 {
color: blue;
font-size: 30px;
text-align: center;
}

PartDescription
h1Selector
colorProperty
blueValue
font-sizeProperty
30pxValue
Types CSS

There are 3 types of CSS:

1. Inline CSS

CSS is written directly inside an HTML element using the style attribute.

<p style=“color:red; font-size:20px;“>
Welcome to TrainingWorld
</p>

Advantages

  • Quick styling
  • Useful for testing

Disadvantages

  • Difficult to maintain
  • Not reusable

2. Internal CSS

CSS is written inside the <style> tag within the <head> section.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}

p {
font-size: 18px;
}
</style>
</head>
<body>

<h1>TrainingWorld</h1>
<p>Learn Web Development</p>

</body>
</html>

Advantages

  • Easy to manage for a single page
  • No separate CSS file needed

Disadvantages

  • Cannot be shared across multiple pages

3. External CSS (Recommended)

CSS is stored in a separate .css file and linked to HTML.

<head>
<link rel=“stylesheet” href=“style.css”>
</head>

h1 {
color: blue;
}

p {
font-size: 18px;
}

Advantages

  • Reusable across many pages
  • Easy maintenance
  • Faster website loading

Disadvantages

  • Requires an additional file
CSS Selectors

Element Selector

h1 {
color: blue;
}

Class Selector

.title {
color: green;
}

<h1 class=”title”>Welcome</h1>

ID Selector

#header {
color: red;
}

<h1 id=“header”>Welcome</h1>