Lesson 26: CSS Styling

Introduction

CSS stands for Cascading Style Sheets. It is used to control the appearance, layout, and presentation of HTML webpages.

HTML creates the structure of a webpage, while CSS makes that webpage attractive and organized.

For example:

HTML → Creates a heading
CSS → Changes its color, size, alignment, and spacing

<h1>DSD Education</h1>

With CSS:

h1 {
    color: #f97316;
    text-align: center;
    font-size: 36px;
}

Learning Objectives

After completing this lesson, students will be able to:

Understand the purpose of CSS.
Understand CSS syntax and selectors.
Apply CSS to HTML elements.
Use inline, internal, and external CSS.
Change colors, fonts, and text styles.
Control margins, padding, borders, and backgrounds.
Understand width and height.
Style links, lists, tables, and buttons.
Understand the CSS Box Model.
Create a basic styled webpage.

1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to style HTML documents.

CSS can control:

Text color
Font size
Font family
Background color
Borders
Spacing
Width and height
Alignment
Layout
Buttons
Tables
Images
Links

Example

<h1>Advanced Computer Applications</h1>
<p>Learn professional computer skills.</p>

CSS:

h1 {
    color: orange;
}

p {
    font-size: 18px;
}

2. HTML vs CSS

HTML	CSS
Creates webpage structure	Styles webpage
Creates headings	Changes heading appearance
Creates paragraphs	Controls paragraph styling
Creates buttons	Styles buttons
Creates tables	Styles tables
Creates forms	Styles forms
Provides content	Controls presentation

Simple rule:

HTML = Structure
CSS = Design

3. CSS Syntax

A CSS rule generally contains a selector, property, and value.

selector {
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 32px;
}

Here:

h1 → Selector
color → Property
blue → Value
font-size → Property
32px → Value

Each declaration normally ends with a semicolon ;.

4. Ways to Add CSS

There are three common ways to apply CSS.

4.1 Inline CSS

CSS is written directly inside an HTML element.

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

Advantage

Useful for applying a quick style to one specific element.

Disadvantage

It becomes difficult to maintain when many elements need styling.

5. Internal CSS

Internal CSS is written inside the <style> element, usually in the <head> section.

<!DOCTYPE html>
<html>

<head>

    <style>
        h1 {
            color: blue;
            text-align: center;
        }

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

</head>

<body>

    <h1>DSD Education</h1>
    <p>Welcome to our computer course.</p>

</body>

</html>

Internal CSS is useful when styling a single HTML page.

6. External CSS

External CSS is stored in a separate .css file.

For example:

index.html
style.css

HTML

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

CSS

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

p {
    font-size: 18px;
}

External CSS is generally preferred for larger websites because one stylesheet can be reused across multiple pages.

7. CSS Selectors

Selectors tell CSS which HTML elements should be styled.

Common selectors include:

Element selector
Class selector
ID selector
Universal selector
Group selector

7.1 Element Selector

Selects HTML elements by their tag name.

p {
    color: black;
}

This applies to all <p> elements.

7.2 Class Selector

A class selector starts with a period ..

HTML:

<p class="highlight">Important information</p>

CSS:

.highlight {
    color: red;
    font-weight: bold;
}

A class can be used on multiple elements.

7.3 ID Selector

An ID selector starts with #.

HTML:

<h1 id="main-heading">DSD Education</h1>

CSS:

#main-heading {
    color: blue;
}

An ID should normally identify one unique element within a page.

7.4 Universal Selector

The universal selector * selects all elements.

* {
    margin: 0;
    padding: 0;
}

It is commonly used for basic CSS resets.

7.5 Group Selector

Multiple selectors can be styled together.

h1, h2, h3 {
    color: #f97316;
}

8. CSS Comments

CSS comments are written as:

/* This is a CSS comment */

Comments help developers understand and organize their stylesheet.

9. CSS Colors

CSS allows different ways to specify colors.

Color Name

h1 {
    color: red;
}

HEX

h1 {
    color: #f97316;
}

RGB

h1 {
    color: rgb(249, 115, 22);
}

RGBA

RGBA can include transparency.

div {
    background-color: rgba(0, 0, 0, 0.5);
}

10. Background Properties

CSS can control the background of elements.

body {
    background-color: #f5f5f5;
}

Other background properties include:

background-image
background-repeat
background-position
background-size
background-attachment

Example:

.banner {
    background-image: url("banner.jpg");
    background-size: cover;
    background-position: center;
}

11. Text Styling

CSS provides several properties for styling text.

p {
    color: #333;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

Common Properties

Property	Purpose
`color`	Text color
`text-align`	Text alignment
`text-decoration`	Underline/decoration
`text-transform`	Uppercase/lowercase
`line-height`	Space between lines
`letter-spacing`	Space between characters
`word-spacing`	Space between words

12. Font Styling

CSS can control fonts.

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

h1 {
    font-size: 36px;
    font-weight: 700;
}

Common font properties:

font-family
font-size
font-weight
font-style
font-variant

Example:

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

13. Width and Height

CSS can control the size of elements.

.box {
    width: 400px;
    height: 200px;
}

Percentage values can also be used:

.container {
    width: 80%;
}

Modern layouts also commonly use:

max-width: 1200px;
min-height: 300px;

14. CSS Borders

Borders can be added around elements.

.box {
    border: 2px solid black;
}

Individual properties include:

border-width
border-style
border-color
border-radius

Example:

.card {
    border: 1px solid #ddd;
    border-radius: 10px;
}

border-radius is used to create rounded corners.

15. Margin

Margin creates space outside an element.

.box {
    margin: 20px;
}

Individual sides can be controlled:

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

16. Padding

Padding creates space between the content and the element’s border.

.box {
    padding: 20px;
}

Example:

.card {
    border: 1px solid #ddd;
    padding: 20px;
}

Margin vs Padding

Margin	Padding
Space outside the element	Space inside the element
Separates elements	Separates content from border
Outside border	Inside border

17. CSS Box Model

Every HTML element can be understood using the CSS Box Model.

+---------------------------+
|          Margin           |
|  +---------------------+  |
|  |       Border        |  |
|  |  +---------------+  |  |
|  |  |    Padding    |  |  |
|  |  | +-----------+ |  |  |
|  |  | |  Content  | |  |  |
|  |  | +-----------+ |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

The four main parts are:

Content
Padding
Border
Margin

18. `box-sizing`

A commonly used CSS rule is:

* {
    box-sizing: border-box;
}

With border-box, the declared width and height include the element’s padding and border.

This makes sizing easier to manage in many layouts.

19. Styling Links

HTML:

<a href="#">Visit Our Website</a>

CSS:

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

The :hover pseudo-class applies styles when the mouse pointer is over the link.

20. Styling Lists

ul {
    list-style-type: square;
}

ol {
    list-style-type: decimal;
}

CSS can also control spacing and positioning of list items.

li {
    margin-bottom: 8px;
}

21. Styling Tables

HTML:

<table>
    <tr>
        <th>Course</th>
        <th>Duration</th>
    </tr>

    <tr>
        <td>ADCA</td>
        <td>12 Months</td>
    </tr>
</table>

CSS:

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f97316;
}

22. Styling Buttons

HTML:

<button>Register Now</button>

CSS:

button {
    background-color: #f97316;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    opacity: 0.9;
}

CSS can make buttons more attractive and user-friendly.

23. Styling Images

img {
    max-width: 100%;
    height: auto;
}

This helps an image stay within its container.

For rounded images:

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

24. CSS Display Property

The display property controls how an element participates in layout.

Common values include:

display: block;
display: inline;
display: inline-block;
display: none;

Example:

span {
    display: inline-block;
}

display: none removes an element from the normal page layout.

25. CSS Position Property

The position property controls how an element is positioned.

Common values:

static
relative
absolute
fixed
sticky

Example:

.box {
    position: relative;
}

A positioned element can then be adjusted using properties such as:

top
right
bottom
left

26. CSS Pseudo-Classes

Pseudo-classes style elements according to a particular state.

Examples:

a:hover {
    color: red;
}

input:focus {
    border-color: blue;
}

button:active {
    transform: scale(0.98);
}

Common pseudo-classes include:

:hover
:focus
:active
:visited
:first-child
:last-child

27. CSS Specificity

When multiple CSS rules target the same element, CSS determines which rule has greater priority.

A simplified order is:

Inline styles > ID selectors > Class/attribute/pseudo-class selectors > Element selectors

Example:

p {
    color: black;
}

.text {
    color: blue;
}

#special {
    color: red;
}

If the same paragraph has both the class and ID, the ID rule generally has higher specificity.

28. CSS Units

CSS uses different units for measurements.

Absolute Unit

font-size: 20px;

Percentage

width: 80%;

Relative Units

font-size: 1rem;
width: 50vw;
height: 50vh;

Common units:

Unit	Meaning
`px`	Pixels
`%`	Percentage
`em`	Relative to font size of relevant parent
`rem`	Relative to root font size
`vw`	Viewport width
`vh`	Viewport height

29. Complete CSS Practical Example

Create two files:

index.html
style.css

`index.html`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ADCA Course</title>

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

<body>

    <header class="header">
        <h1>DSD Education</h1>
        <p>Advanced Diploma in Computer Applications</p>
    </header>

    <main>

        <section class="course-card">

            <h2>ADCA Course</h2>

            <p>
                Learn computer applications, MS Office,
                Internet, C Programming, HTML and CSS.
            </p>

            <h3>Course Subjects</h3>

            <ul>
                <li>Computer Fundamentals</li>
                <li>MS Word</li>
                <li>MS Excel</li>
                <li>Internet & Networking</li>
                <li>C Programming</li>
                <li>HTML & CSS</li>
            </ul>

            <button>Enquire Now</button>

        </section>

    </main>

    <footer>
        <p>© 2026 DSD Education</p>
    </footer>

</body>

</html>

`style.css`

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

.header {
    text-align: center;
    padding: 40px 20px;
    background-color: #f97316;
    color: white;
}

.header h1 {
    margin: 0 0 10px;
    font-size: 36px;
}

.header p {
    margin: 0;
    font-size: 18px;
}

.course-card {
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.course-card h2 {
    margin-top: 0;
    font-size: 30px;
}

.course-card li {
    margin-bottom: 8px;
}

button {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    background-color: #f97316;
    color: white;
    cursor: pointer;
}

button:hover {
    opacity: 0.9;
}

footer {
    text-align: center;
    padding: 20px;
}

Key Terms

CSS, Stylesheet, Selector, Property, Value, Class, ID, Inline CSS, Internal CSS, External CSS, Color, Background, Font, Border, Margin, Padding, Box Model, Display, Position, Pseudo-class, Specificity, CSS Unit

Search

Key Terms

Company

Platform

Subscribe

Search

ADCA

ADCA

Curriculum

Lesson 26: CSS Styling

Introduction

Learning Objectives

1. What is CSS?

Example

2. HTML vs CSS

3. CSS Syntax

4. Ways to Add CSS

4.1 Inline CSS

Advantage

Disadvantage

5. Internal CSS

6. External CSS

HTML

CSS

7. CSS Selectors

7.1 Element Selector

7.2 Class Selector

7.3 ID Selector

7.4 Universal Selector

7.5 Group Selector

8. CSS Comments

9. CSS Colors

Color Name

HEX

RGB

RGBA

10. Background Properties

11. Text Styling

Common Properties

12. Font Styling

13. Width and Height

14. CSS Borders

15. Margin

16. Padding

Margin vs Padding

17. CSS Box Model

18. box-sizing

19. Styling Links

20. Styling Lists

21. Styling Tables

22. Styling Buttons

23. Styling Images

24. CSS Display Property

25. CSS Position Property

26. CSS Pseudo-Classes

27. CSS Specificity

28. CSS Units

Absolute Unit

Percentage

Relative Units

29. Complete CSS Practical Example

index.html

style.css

Key Terms

Leave a Reply Cancel reply

Modal title

18. `box-sizing`

`index.html`

`style.css`