HTML Styles - CSS - The Coding College

Welcome to The Coding College, your hub for learning coding and web development. In this tutorial, we will explore HTML Styles using CSS, a crucial step for creating beautiful and engaging web designs.

What Is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of HTML elements. CSS enhances the look and feel of a website by adding colors, layouts, fonts, and much more.

Why Use CSS for Styling?

Separation of Content and Design: HTML focuses on structure, while CSS handles styling.
Reusability: Apply styles across multiple pages with a single stylesheet.
Flexibility: Allows precise control over the appearance of web elements.

Ways to Apply CSS

CSS can be applied to HTML in three ways:

1. Inline CSS

Directly style an HTML element using the style attribute.

<p style="color: blue; font-size: 20px;">This paragraph is styled using inline CSS.</p>

2. Internal CSS

Write CSS inside a <style> tag in the <head> section of your HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This paragraph is styled using internal CSS.</p>
</body>
</html>

3. External CSS

Link an external stylesheet to your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This paragraph is styled using external CSS.</p>
</body>
</html>

In the styles.css file:

p {
    color: red;
    font-size: 22px;
}

CSS Syntax

A CSS rule consists of:

Selector: Specifies the HTML element to style.
Declaration Block: Contains one or more declarations, each consisting of a property and a value.

Example:

selector {
    property: value;
}

Basic CSS Properties

Text Color

p {
    color: blue;
}

Background Color

body {
    background-color: lightgray;
}

Font Style

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

Text Alignment

h2 {
    text-align: center;
}

Margins and Padding

div {
    margin: 20px;
    padding: 10px;
}

Practical Example: Styling a Web Page

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Styling Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
        }

        .header {
            color: #4CAF50;
            text-align: center;
        }

        .content {
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            margin: 20px auto;
            max-width: 600px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <h1 class="header">Welcome to CSS Styling</h1>
    <div class="content">
        <p>CSS makes it easy to create beautiful web pages. Start experimenting with colors, layouts, and fonts to see what you can create!</p>
    </div>
</body>
</html>

Benefits of External CSS

Efficiency: Write once, apply to multiple pages.
Maintainability: Easily update the style across your entire site.
Faster Load Times: Browsers can cache CSS files.

Explore More at The Coding College

CSS opens the door to endless possibilities for designing web pages. With these basics, you’re on the path to creating visually stunning websites.

HTML Styles – CSS