Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login

CSS3 Introduction

Welcome! This lesson introduces CSS3, explains why it is used, and shows how CSS makes web pages attractive and responsive.

1. What is CSS?

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

CSS helps developers separate the design of a website from its content.

  • Add colors to web pages.
  • Change fonts and text size.
  • Create beautiful layouts.
  • Add animations and transitions.
  • Make websites responsive.
HTML creates the structure of a webpage, while CSS designs it.

2. History of CSS

Version Released Description
CSS1 1996 Basic styling features.
CSS2 1998 Added positioning and media support.
CSS3 Modern Introduced animations, gradients, flexbox, grid and responsive design.
CSS3 is the latest widely used version and is supported by all modern browsers.

3. Why Use CSS?

Without CSS, every webpage looks plain and unformatted.

Benefits of CSS
  • Improves website appearance.
  • Reduces repeated HTML code.
  • Easy to maintain websites.
  • Loads pages faster.
  • Supports all screen sizes.
  • Provides consistent design across pages.
One CSS file can style hundreds of HTML pages.

4. Features of CSS3

  • Responsive Design
  • Flexbox Layout
  • CSS Grid
  • Animations
  • Transitions
  • Transforms
  • Gradients
  • Shadows
  • Rounded Corners
  • Media Queries
  • Variables
  • Filters
CSS3 provides modern tools for creating professional websites without JavaScript for many visual effects.

5. Advantages of CSS

Advantage Description
Easy Maintenance Edit one CSS file to update the design of the entire website.
Reusable Code The same stylesheet can be used on multiple pages.
Faster Loading External CSS files are cached by browsers.
Professional Design Create attractive and modern user interfaces.
Responsive Layout Websites automatically adapt to mobile, tablet and desktop devices.
Learning CSS is essential for every web developer because it controls the visual appearance of web pages.

6. Types of CSS

There are three ways to apply CSS to an HTML document.

Type Description Best Use
Inline CSS Applied directly inside an HTML element using the style attribute. Quick styling for a single element.
Internal CSS Written inside the <style> tag in the HTML document. Styling a single web page.
External CSS Written in a separate .css file and linked to HTML. Large websites with multiple pages.
Recommended: External CSS is the most commonly used method because it keeps HTML clean and makes maintenance easier.

7. CSS Syntax

The basic CSS syntax consists of a selector, a property, and a value.


selector {
    property: value;
}
Example

h1{
    color: blue;
    font-size: 40px;
}
Part Description
Selector Selects the HTML element.
Property Defines what you want to change.
Value Specifies the property setting.
Every CSS declaration ends with a semicolon (;).

8. CSS File Structure

A CSS file contains only CSS rules and is saved with the .css extension.


style.css

body{
    background:#f5f5f5;
}

h1{
    color:green;
}

p{
    font-size:18px;
}
Do not write HTML tags inside a CSS file.

9. Inline, Internal & External CSS

Inline CSS

<p style="color:red;">
Hello CSS
</p>
Internal CSS

<head>

<style>

p{
    color:blue;
}

</style>

</head>
External CSS

<head>

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

</head>
External CSS is the preferred method for professional websites because one stylesheet can control the design of many pages.

10. Your First CSS Program

HTML File

<!DOCTYPE html>
<html>

<head>

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

</head>

<body>

<h1>Welcome to CSS</h1>

<p>This is my first CSS program.</p>

</body>

</html>
style.css

body{
    background:#eef5ff;
}

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

p{
    font-size:20px;
    color:#444;
}
Output: The page will display a light blue background, a centered blue heading, and a gray paragraph with a larger font size.
Practice: Change the heading color, paragraph size, and background color to see how CSS affects the webpage.

11. Browser Support

CSS3 is supported by all modern web browsers.

Browser Support
Google Chrome ✔ Full Support
Mozilla Firefox ✔ Full Support
Microsoft Edge ✔ Full Support
Safari ✔ Full Support
Opera ✔ Full Support
Most CSS3 properties work perfectly in modern browsers.

12. Best Practices

  • Use External CSS whenever possible.
  • Keep your CSS code properly indented.
  • Use meaningful class names.
  • Avoid duplicate CSS code.
  • Group related properties together.
  • Use comments to organize large stylesheets.
  • Keep selectors simple.
  • Test your design on different browsers.
  • Write responsive CSS for mobile devices.
  • Use shorthand properties whenever possible.
Clean CSS makes websites faster, easier to maintain, and more professional.

13. Common Mistakes

Mistake Correct Practice
Missing semicolon (;) End every declaration with a semicolon.
Wrong selector Choose the correct element, class or ID.
Using Inline CSS everywhere Use External CSS for larger projects.
Poor indentation Format your code properly.
Duplicate styles Reuse classes whenever possible.
Avoid these mistakes to become a better front-end developer.

14. CSS Interview Questions

  1. What is CSS?
  2. What does CSS stand for?
  3. What are the three types of CSS?
  4. What is the difference between Inline and External CSS?
  5. What is a CSS selector?
  6. What is a CSS property?
  7. What is a CSS value?
  8. Why is CSS important?
  9. What are the advantages of External CSS?
  10. What is CSS3?
These questions are frequently asked in beginner web development interviews.

15. Lesson Summary

In this lesson you learned:
  • ✔ What CSS is
  • ✔ History of CSS
  • ✔ Features of CSS3
  • ✔ Advantages of CSS
  • ✔ Types of CSS
  • ✔ CSS Syntax
  • ✔ CSS File Structure
  • ✔ Browser Support
  • ✔ Best Practices
  • ✔ Common Mistakes
Congratulations! You have completed the CSS Introduction lesson. Continue with the next chapter to learn CSS Syntax in detail.

Quick Quiz

1. What does CSS stand for?

Computer Style Sheets
Cascading Style Sheets
Creative Style Sheets

← Previous Next →