• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Introduction

Next →

CSS stands for Cascading Style Sheets. It is a language used to control the appearance and layout of web pages written in HTML. While HTML defines the structure and content of a webpage, CSS decides how that content should look on the screen. Using CSS, you can change colors, fonts, spacing, alignment, and page layout, making websites visually appealing and user friendly. In this chapter, you will learn what CSS is, why it is important, how it works with HTML, and the different ways CSS can be applied to a webpage.

What Is CSS?

CSS is a stylesheet language that describes the presentation of an HTML document. It allows developers to apply styles consistently across multiple web pages. Instead of repeating the same styling rules again and again in HTML, CSS lets you write styles once and reuse them.

A CSS rule is made up of three main parts:

  • Selector – selects the HTML element to style

  • Property – defines what aspect of the element you want to change

  • Value – specifies the new style for that property

This structure makes CSS easy to read and maintain, even in large projects.

Why CSS Is Important?

CSS plays a vital role in modern web development. Without CSS, websites would look plain, cluttered, and difficult to navigate. Some key reasons why CSS is important include:

  • Improves the visual design of web pages

  • Separates content from presentation

  • Saves development time by reusing styles

  • Makes websites responsive on different devices

  • Improves accessibility and readability

  • Reduces HTML code duplication

  • Helps maintain consistency across pages

Professional websites rely heavily on CSS to create a clean layout, proper spacing, and attractive color schemes.

How CSS Works with HTML?

CSS works by targeting HTML elements and applying style rules to them. When a browser loads a webpage, it reads the HTML first to understand the structure. Then it reads the CSS rules and applies them to the matching elements before displaying the page.

For example, if a CSS rule targets all paragraph elements, the browser will apply that style to every <p> tag on the page.

Example

<p>This is a paragraph.</p>

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

In this example, the CSS rule changes the text color and size of the paragraph.

Understanding CSS Syntax

CSS follows a simple and logical syntax. Each rule starts with a selector, followed by a block of declarations enclosed in curly braces.

selector {
    property: value;
}

  • The selector chooses the element

  • The property defines what you want to style

  • The value sets how it should look

Multiple properties can be added to a single selector, each separated by a semicolon.

Types of CSS

There are three main ways to apply CSS to HTML documents.

Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute. This method affects only that specific element.

Example

<h2 style="color: red; text-align: center;">Welcome</h2>

Advantages

  • Quick to apply for small changes

  • Useful for testing or debugging

Disadvantages

  • Not reusable

  • Makes HTML code harder to read

  • Difficult to manage in large projects

Inline CSS is generally avoided in real-world projects.

Internal CSS

Internal CSS is written inside a <style> tag within the <head> section of an HTML document. It applies styles to all matching elements on that page.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f5f5f5;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>CSS Introduction example</p>
</body>
</html>

Advantages

  • Styles apply to a full page

  • Cleaner than inline CSS

Disadvantages

  • Styles cannot be reused on other pages

  • Increases page size

External CSS

External CSS is written in a separate file with a .css extension and linked to HTML using the <link> tag. This is the most recommended method.

Example

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

body {
    font-family: Arial, sans-serif;
}
h1 {
    color: navy;
}

Advantages

  • Reusable across multiple pages

  • Easy to update and maintain

  • Keeps HTML clean and readable

Disadvantages

  • Requires an additional file request

External CSS is the preferred choice for professional and large-scale websites.

The Meaning of “Cascading” in CSS

The word “cascading” means that multiple CSS rules can apply to the same element. The browser decides which rule to apply based on priority.

The general priority order is:

  1. Browser default styles

  2. External CSS

  3. Internal CSS

  4. Inline CSS

If two rules have the same priority, the one written last will be applied.

Basic CSS Properties

Some commonly used CSS properties include:

  • color – sets text color

  • background-color – sets background color

  • font-size – controls text size

  • font-family – defines font type

  • margin – space outside elements

  • padding – space inside elements

  • border – adds outlines to elements

  • text-align – aligns text

These properties form the foundation of CSS styling.

CSS Comments

Comments are used to explain CSS code and improve readability. They are ignored by the browser.

Example

/* This styles the main heading */
h1 {
    color: green;
}

Comments are helpful when working in teams or reviewing code later.

CSS and Responsive Design

CSS plays a major role in responsive web design. It allows webpages to adjust their layout based on screen size and device type. Using flexible units, layouts, and media queries, developers can create websites that look good on mobiles, tablets, and desktops.

Responsive design improves user experience and accessibility, making CSS an essential skill.

Common Beginner Mistakes in CSS

Beginners often make a few common mistakes while learning CSS:

  • Forgetting semicolons

  • Overusing inline CSS

  • Not understanding rule priority

  • Writing repetitive styles

  • Poor organization of CSS files

Avoiding these mistakes helps build clean and efficient stylesheets.

Summary of CSS Introduction

CSS is a powerful and essential language used to style HTML webpages. It controls colors, fonts, layouts, and spacing, making websites visually attractive and easy to use. By understanding CSS basics such as syntax, types of CSS, cascading rules, and common properties, you build a strong foundation for web development. Mastering CSS allows you to create responsive, accessible, and professional-looking websites that provide a better experience for users.

Practice Questions

Q1. Make a heading text red using inline CSS.

Q2. Change body background using internal CSS.

Q3. Change paragraph font size using class.

Q4. Use external CSS to color a paragraph blue.

Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top