CSS 1 💻 Introduction - KandZ

CSS (Cascading Style Sheets) is the language used to control the visual presentation of HTML documents. It allows you to style everything from colors and fonts to layouts and animations.

What is CSS?

CSS specifies how HTML elements should be displayed on screen, paper, or in other media. It separates content (HTML) from presentation (CSS), making websites easier to maintain and update.

Key Benefits:

Benefit	Description
Separation of concerns	Content and design are kept separate
Reusability	One CSS file can style multiple HTML pages
Consistency	Uniform design across an entire website
Flexibility	Easy to update and maintain

Three Ways to Use CSS

Method	Description	Example
Inline	CSS applied directly to an HTML element using the `style` attribute	`<h1 style="color:blue">Hello</h1>`
Internal	CSS defined inside the `<style>` element in the `<head>` section	`<style>h1 { color: blue; }</style>`
External	CSS defined in a separate `.css` file and linked with `<link>`	`<link rel="stylesheet" href="styles.css">`

1. Inline CSS

<h1 style="color:blue">CSS Introduction</h1>
<p style="font-size: 20px;">This is a paragraph.</p>

Pros: Quick and easy for single elements
Cons: Not reusable, hard to maintain

2. Internal CSS

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
        }
        h1 {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>This paragraph is red.</p>
</body>
</html>

Pros: Good for single-page sites
Cons: Not reusable across multiple pages

3. External CSS

<!-- HTML file -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- styles.css file -->
p {
    color: red;
}
span {
    color: green;
}

Pros: Reusable, easy to maintain, best practice
Cons: Requires an extra HTTP request

CSS Basic Syntax

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

selector {
    property: value;
    property: value;
}

Example:

p {
    color: red;
    font-size: 16px;
    margin: 10px;
}

Components:

Component	Description	Example
Selector	The HTML element(s) to style	`p`, `.class`, `#id`
Property	The style characteristic to change	`color`, `font-size`, `margin`
Value	The value assigned to the property	`red`, `16px`, `10px`

Common Selectors

Selector	Example	Description
Element	`p { }`	Selects all `<p>` elements
Class	`.myClass { }`	Selects elements with `class="myClass"`
ID	`#myId { }`	Selects the element with `id="myId"`
Attribute	`[ type="text" ] { }`	Selects elements with a specific attribute
Universal	`* { }`	Selects all elements
Grouping	`h1, h2, p { }`	Selects multiple elements

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Introduction</title>

    <!-- ====== INTERNAL CSS ====== -->
    <style>
        /* Element Selector */
        p {
            color: red;
            font-size: 18px;
        }

        /* Class Selector */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }

        /* ID Selector */
        #main-heading {
            color: blue;
            text-align: center;
            font-size: 2em;
        }

        /* Grouping Selector */
        h1, h2, h3 {
            font-family: Arial, sans-serif;
        }
    </style>

    <!-- ====== EXTERNAL CSS ====== -->
    <link rel="stylesheet" href="styles.css">

</head>
<body>

    <!-- ====== INLINE CSS ====== -->
    <h1 style="color:blue; text-align:center;">CSS Introduction</h1>

    <p>Cascading Style Sheets</p>

    <p class="highlight">This paragraph has a yellow background.</p>

    <span style="color: green;">Inline styled span</span>

    <div id="main-heading">Styled with an ID selector</div>

</body>
</html>

External CSS File (`styles.css`):

span {
    color: green;
    font-weight: bold;
}

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

.highlight {
    background-color: #ffc107;
    padding: 5px 10px;
    border-radius: 4px;
}

Quick Reference

Concept	Example	Description
Inline CSS	`<h1 style="color:red">`	Applied directly to an element
Internal CSS	`<style>h1{color:red;}</style>`	Defined in the `<head>`
External CSS	`<link rel="stylesheet" href="style.css">`	Linked from a separate file
Selector	`p { }`	Targets HTML elements
Property	`color`	What to change
Value	`red`	The new value
Declaration	`color: red;`	Property + Value

Best Practices

✅ Do This:

/* Use external CSS for maintainability */
<link rel="stylesheet" href="styles.css">

/* Use meaningful class names */
.button-primary { }

/* Group related properties */
h1 {
    color: blue;
    font-size: 2em;
    text-align: center;
}

❌ Don’t Do This:

/* Don't use inline CSS for styling multiple elements */
<h1 style="color:red">Title 1</h1>
<h1 style="color:red">Title 2</h1>
/* Use a class instead */

/* Don't use IDs for styling reusable components */
#button1 { }
#button2 { }
/* Use classes instead: .button { } */

/* Don't use vague class names */
.a { }
.b { }

Pro Tip: Always prefer external CSS for anything more than a single page. It makes your code cleaner, more maintainable, and faster to load (browsers cache external CSS files). Use classes for reusable styles and IDs only for unique elements!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!