Introduction to CSS and Styling

Introduction to CSS and Styling

HTML gives a webpage its structure, but structure alone does not create the visual experience users see on modern websites.

CSS, which stands for Cascading Style Sheets, is the language used to control the appearance and presentation of HTML documents.

With CSS, developers can control colors, fonts, spacing, borders, layouts, animations, responsive designs, and many other visual aspects of a website.

1. What Is CSS?

CSS is a stylesheet language used to describe how HTML elements should look and behave visually.

For example, HTML can create a heading:

<h1>Welcome to Dwallnet Technologies</h1>

CSS can change its color and size:

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

The HTML defines what the content is, while CSS defines how that content should look.

2. Why Do We Need CSS?

Without CSS, most webpages would appear as plain browser-rendered documents with very limited visual styling.

CSS allows developers to create:

• Professional websites.
• Responsive layouts.
• Navigation bars.
• Cards and dashboards.
• Buttons.
• Forms.
• Hero sections.
• Sidebars.
• Modern landing pages.
• Dark mode interfaces.
• Animations and transitions.

CSS is therefore one of the core technologies of front-end web development.

3. HTML, CSS and JavaScript

Modern websites commonly use three fundamental technologies:

Think of a webpage as a building:

• HTML is the structure.
• CSS is the appearance and interior design.
• JavaScript provides interactive behavior.

4. The Basic CSS Rule

A CSS rule normally consists of a selector and a declaration block.

selector {
    property: value;
}

Example:

p {
    color: blue;
}

In this example:

• p is the selector.
• color is the property.
• blue is the value.

5. CSS Selectors

A selector tells CSS which HTML elements should receive a style.

Example:

h1 {
    color: blue;
}

This selects all <h1> elements.

6. Element Selectors

An element selector targets HTML elements by their tag name.

p {
    color: #333;
}

h2 {
    font-size: 30px;
}

button {
    padding: 10px 20px;
}

Every matching element receives the specified styles.

7. Class Selectors

Classes allow developers to style specific groups of elements.

HTML:

<p class="highlight">
    This is important information.
</p>

CSS:

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

The dot before highlight tells CSS that it is a class selector.

8. ID Selectors

An ID selector targets an element with a specific ID.

HTML:

<section id="hero">
    ...
</section>

CSS:

#hero {
    background: black;
    color: white;
}

The hash symbol # identifies an ID selector.

IDs should generally be unique within a page.

9. Class vs ID

Classes are usually preferred for reusable styling.

10. CSS Properties

CSS properties control specific aspects of an element.

Examples include:

• color
• background
• font-size
• font-family
• margin
• padding
• border
• width
• height

Example:

h1 {
    color: navy;
    font-size: 42px;
}

11. CSS Values

A CSS property receives a value.

color: red;

Here:

• color is the property.
• red is the value.

Different properties accept different types of values.

12. Multiple CSS Declarations

A CSS rule can contain multiple declarations.

h1 {
    color: blue;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
}

Each declaration ends with a semicolon.

13. CSS Comments

CSS comments are written between /* and */.

/* Main heading styles */

h1 {
    color: blue;
}

Comments are ignored by the browser and are useful for organizing stylesheets.

14. Inline CSS

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

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

Although inline styles can be useful for quick tests, they are generally not the preferred approach for large websites because they make HTML harder to maintain.

15. Internal CSS

Internal CSS is written inside a <style> element in the HTML document’s head.

<head>

    <style>

        h1 {
            color: blue;
        }

        p {
            color: #333;
        }

    </style>

</head>

This can be useful for small standalone pages.

16. External CSS

External CSS is stored in a separate stylesheet file.

For example:

style.css

The HTML document links to it using:

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

This is usually the preferred approach for larger websites because one stylesheet can be shared across many pages.

17. A Simple External Stylesheet

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dwallnet Website</title>

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

</head>

<body>

    <h1>Dwallnet Technologies</h1>

    <p>
        Learn practical technology skills.
    </p>

</body>

</html>

CSS:

h1 {
    color: blue;
}

p {
    color: #444;
}

18. CSS Colors

CSS provides several ways to specify colors.

Named Colors

h1 {
    color: blue;
}

Hexadecimal Colors

h1 {
    color: #0066ff;
}

RGB Colors

h1 {
    color: rgb(0, 102, 255);
}

RGBA Colors

h1 {
    color: rgba(0, 102, 255, 0.8);
}

Hexadecimal and RGB values provide greater control over color selection.

19. Background Colors

The background-color property changes the background color.

body {
    background-color: #f5f7fb;
}

Individual sections can also have their own backgrounds.

.hero {
    background-color: #0b5ed7;
}

20. Text Color

The color property controls text color.

p {
    color: #333333;
}

When choosing text colors, ensure there is enough contrast between the text and background.

21. Font Size

The font-size property controls the size of text.

h1 {
    font-size: 48px;
}

p {
    font-size: 18px;
}

Common units include:

• px
• rem
• em
• %
• vw

22. Font Family

The font-family property specifies the typeface used for text.

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

A fallback font should normally be included.

23. Font Weight

The font-weight property controls how thick text appears.

h1 {
    font-weight: 700;
}

p {
    font-weight: 400;
}

Common numeric values include 400 for normal text and 700 for bold text.

24. Text Alignment

The text-align property controls horizontal text alignment.

h1 {
    text-align: center;
}

p {
    text-align: left;
}

Common values include:

• left
• center
• right
• justify

25. Line Height

The line-height property controls the vertical space between lines of text.

p {
    line-height: 1.7;
}

Good line spacing can make long paragraphs easier to read.

26. Margin

Margin creates space outside an element.

h1 {
    margin-bottom: 20px;
}

You can specify individual sides:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Or use shorthand:

margin: 10px 20px 30px 40px;

27. Padding

Padding creates space between an element’s content and its border.

.card {
    padding: 20px;
}

Padding is commonly used to create comfortable spacing inside buttons, cards, forms, and sections.

28. Border

The border property adds a border around an element.

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

A border has:

• Width.
• Style.
• Color.

Example:

.box {
    border: 2px solid blue;
}

29. Border Radius

The border-radius property rounds corners.

.card {
    border-radius: 12px;
}

This property is commonly used in modern user interfaces.

30. The CSS Box Model

Every HTML element can be understood using the CSS box model.

The box model consists of:

1. Content
2. Padding
3. Border
4. Margin

Conceptually:

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

Understanding the box model is essential for controlling spacing and layout.

31. Box Sizing

The box-sizing property controls how an element’s width and height are calculated.

A common modern CSS rule is:

* {
    box-sizing: border-box;
}

With border-box, padding and borders are included within the declared width and height.

32. The CSS Cascade

The word “cascading” in CSS refers to the way styles are combined and resolved when multiple rules apply to the same element.

For example:

p {
    color: blue;
}

p {
    color: red;
}

Both rules target the same paragraph. The cascade determines which declaration wins based on factors such as importance, origin, specificity, and source order.

33. Basic Specificity

CSS selectors have different levels of specificity.

A simplified comparison is:

element selector
class selector
ID selector

For example:

p {
    color: black;
}

.text {
    color: blue;
}

#special {
    color: red;
}

An element with the ID special will generally receive the ID rule because it has greater specificity than the class and element rules.

34. Why External CSS Is Recommended

For professional websites, external stylesheets provide several advantages:

• Better organization.
• Reusable styles.
• Easier maintenance.
• Cleaner HTML.
• Better separation of structure and presentation.
• Potential browser caching benefits.

35. CSS Naming

Clear class names make stylesheets easier to understand.

Example:

.course-card {
    padding: 20px;
}

.course-card__title {
    font-size: 24px;
}

.course-card__button {
    padding: 10px 16px;
}

Developers can use different naming systems, but the important thing is to remain consistent.

36. Practical Example

HTML:

<div class="course-card">

    <h2 class="course-card-title">
        Web Development
    </h2>

    <p>
        Learn how to build modern websites.
    </p>

    <a href="#" class="course-card-button">
        Explore Course
    </a>

</div>

CSS:

.course-card {
    background: white;
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.course-card-title {
    color: #0757c8;
    font-size: 28px;
}

.course-card-button {
    display: inline-block;
    background: #0757c8;
    color: white;
    padding: 12px 18px;
    text-decoration: none;
    border-radius: 6px;
}

Practical Exercise

Create a simple Dwallnet Technologies landing page using HTML and CSS.

The page should contain:

1. A header.
2. A navigation menu.
3. A hero section.
4. A main heading.
5. A paragraph.
6. A call-to-action button.
7. Three course cards.
8. A footer.

Use an external stylesheet called style.css.

Apply:

• Background colors.
• Text colors.
• Font sizes.
• Margins.
• Padding.
• Borders.
• Border radius.

Code Challenge

Challenge: The following HTML page has no styling.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dwallnet Courses</title>

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

</head>

<body>

    <header>
        <h1>Dwallnet Technologies</h1>
    </header>

    <main>

        <section class="hero">
            <h2>Learn Technology Skills</h2>
            <p>
                Build practical skills for the digital world.
            </p>
            <a href="#" class="button">
                Enroll Now
            </a>
        </section>

        <section class="courses">

            <article class="card">
                <h3>Web Development</h3>
                <p>
                    Learn how to build websites.
                </p>
            </article>

            <article class="card">
                <h3>Data Analysis</h3>
                <p>
                    Learn how to work with data.
                </p>
            </article>

            <article class="card">
                <h3>Cyber Security</h3>
                <p>
                    Learn security fundamentals.
                </p>
            </article>

        </section>

    </main>

    <footer>
        <p>Dwallnet Technologies</p>
    </footer>

</body>

</html>

Create a style.css file that:

• Sets a professional page background.
• Styles the header.
• Creates a visually attractive hero section.
• Styles the button.
• Creates card-like course sections.
• Adds spacing around sections.
• Rounds the card corners.
• Styles the footer.

Starter CSS

* {
    box-sizing: border-box;
}

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

header {
    padding: 20px;
}

.hero {
    padding: 60px 20px;
}

.button {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
}

.courses {
    padding: 40px 20px;
}

.card {
    padding: 20px;
    margin-bottom: 20px;
}

footer {
    padding: 20px;
}

Lesson Summary

CSS is the language used to style and present HTML documents. You learned the basic CSS rule structure, selectors, properties, values, classes, IDs, colors, typography, margins, padding, borders, the box model, specificity, and the different methods of applying CSS.

You also learned why external CSS is generally preferred for larger websites and how CSS works together with HTML to create professional interfaces.

Key Principle: HTML provides structure, while CSS provides presentation. Keep structure and styling organized separately so your websites remain easier to maintain, expand, and improve.