CSS Basics

Introduction to CSS and Basic Styling Methods

In this class, students will learn what CSS is, why it is used, and how to apply basic styles to HTML elements using inline and internal CSS.

Class Objective

Understand what CSS is and why it is used
Apply basic styles to HTML elements
Use inline and internal CSS

Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets
CSS is used to style HTML webpages
It controls colors, fonts, spacing, layout, and appearance

Why CSS is Needed?

HTML creates structure
CSS makes webpages attractive and readable

CSS Syntax

Basic CSS structure:


selector {
    property: value;
}

Example:


p {
    color: blue;
}

CSS Methods

Inline CSS

Inline CSS is written inside an HTML tag using the style attribute.


<h1 style="color: red;">Welcome</h1>

Internal CSS

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


<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>CSS Basics</h1>
    <p>This paragraph is styled using CSS.</p>
</body>
</html>

Run Code

Common CSS Properties

Text Color


color: blue;

Background Color


background-color: lightgray;

Font Size and Font Family


font-size: 20px;
font-family: Arial;

Text Alignment


text-align: center;

Practice Task

Create an HTML page
Add internal CSS
Style one heading with color and center alignment
Style one paragraph with font size and font family
Add a background color to the page

Assignment

Create a webpage named style.html
Add at least one heading
Add two paragraphs
Use internal CSS for colors, font size, and alignment
Use inline CSS at least once

Previous Next