Skip to content
Home Tutorials Roadmaps Courses
Log in Join free
Tutorials CSS What is CSS?
Introduction to CSS
What is CSS? CSS Selectors
Colors & Backgrounds
CSS Colors Backgrounds
Text & Fonts
Text Styling Web Fonts
Box Model
The Box Model Display & Positioning
Layout
Flexbox CSS Grid
Responsive Design
Media Queries Units & Sizing
Animations & Effects
Transitions & Transforms CSS Animations
Advanced CSS
Pseudo-classes & Pseudo-elements CSS Variables & Best Practices
CSS Beginner FREE

What is CSS?

Lesson 1 of 16 Beginner Interactive

CSS stands for Cascading Style Sheets. It controls how HTML elements look — colors, fonts, spacing, layout, and more.

Think of HTML as the structure of a house and CSS as the paint, decorations, and furniture.

Three Ways to Add CSS

  • Inline — directly on the element using style attribute
  • Internal — in a <style> tag in the head
  • External — in a separate .css file (recommended)

Basic Syntax

A CSS rule consists of a selector and a declaration block. The selector targets the HTML element, and the declarations set its styles.

  • Selector — targets the element(s) to style
  • Property — what aspect to change (e.g., color)
  • Value — the setting for the property (e.g., blue)

Syntax

CSS 
/* Selector + Declaration Block */
selector {
    property: value;
    property: value;
}

/* Example */
body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f5f5f5;
}

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

p.intro {
    font-size: 18px;
    line-height: 1.6;
}
Inline, Internal, and External CSS
HTML 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three Ways to Use CSS</title>
    <style>
        /* Internal CSS inside the <style> tag */
        h1 {
            color: navy;
            text-align: center;
        }
        .greeting {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>SukhNexus Academy</h1>
    <p class="greeting">Styled by internal CSS (.greeting sets color: green & font-size: 18px).</p>
    <p style="color: red; font-weight: bold;">Styled by inline CSS (style attribute uses color: red).</p>
    <!-- External CSS is loaded with: <link rel="stylesheet" href="styles.css"> -->
</body>
</html>
Try It Yourself
How CSS Works in HTML
HTML 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>How CSS Works in HTML</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f4fa;
        }
        h1 {
            color: #264de4;
            text-align: center;
        }
        p {
            color: #333333;
            font-size: 18px;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 4px;
        }
    </style>
</head>
<body>
    <h1>Hello, CSS!</h1>
    <p>This paragraph uses color: #333333 and font-size: 18px from the CSS.</p>
    <p class="highlight">The .highlight class applies background-color: #fff3cd and padding: 4px.</p>
</body>
</html>
Try It Yourself

Practice

1
Exercise

Change the background color of the body to light blue using internal CSS.

Answer 
<style>
body {
    background-color: lightblue;
}
</style>
2
Exercise

Create an external CSS file that makes all h1 elements red.

Answer 
/* style.css */
h1 {
    color: red;
}

Quick Quiz

1

What does CSS stand for?

CSS stands for Cascading Style Sheets.

2

Which method of adding CSS is recommended for large websites?

External CSS is recommended because it separates content from style, can be reused across pages, and is easier to maintain.

3

What is the correct CSS syntax to change the text color of a paragraph?

The correct property is "color", not "text-color" or "font-color".

Interview Questions

Inline CSS is applied directly to elements via the style attribute. Internal CSS is in a <style> tag in the head. External CSS is in a separate .css file linked via <link>. External CSS is recommended because it can be reused across pages and is easier to maintain.

Cascading means that CSS rules are applied based on specificity and order of declaration. When multiple rules target the same element, the browser determines which rule wins using the cascade algorithm — considering specificity, importance (!important), and source order.

Next Lesson
CSS Selectors