The Basics of HTML and CSS | My New Hugo Site

Introduction

HTML and CSS are the foundational technologies for building websites. HTML provides the structure and content, while CSS handles the visual presentation and layout. Together, they form the backbone of web development.

What is HTML?

HTML (HyperText Markup Language) is a markup language used to structure content on the web. It uses elements called tags to define different parts of a webpage.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Here’s a Hugo-markdown document about the basics of HTML and CSS:

Common HTML Elements

Headings: <h1> through <h6> for different heading levels
Paragraphs: <p> for text content
Links: <a href="url">Link Text</a> for hyperlinks
Images: <img src="image.jpg" alt="Description"> for images
Lists: <ul> for unordered lists, <ol> for ordered lists
Divisions: <div> for grouping content
Spans: <span> for inline content

HTML Attributes

Attributes provide additional information about elements:

<a href="https://example.com" target="_blank">Visit Example</a>
<img src="photo.jpg" alt="A beautiful sunset" width="500">
<div id="header" class="container">Content here</div>

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It controls colors, fonts, layouts, spacing, and responsive design.

Three Ways to Add CSS

1. Inline CSS

<p style="color: blue; font-size: 16px;">This is blue text.</p>

2. Internal CSS

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

3. External CSS (Recommended)

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

CSS Syntax

CSS consists of selectors and declaration blocks:

selector {
    property: value;
    property: value;
}

CSS Selectors

Element Selector: Targets HTML elements

p {
    color: navy;
}

Class Selector: Targets elements with a specific class

.highlight {
    background-color: yellow;
}

ID Selector: Targets a unique element

#header {
    font-size: 24px;
}

Descendant Selector: Targets nested elements

div p {
    margin: 10px;
}

Common CSS Properties

Text Styling

.text-style {
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
}

Box Model

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    margin: 10px;
    border: 2px solid black;
}

Background and Colors

.styled-section {
    background-color: #f0f0f0;
    background-image: url('pattern.png');
    color: #333;
}

Layout

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

The Box Model

Every HTML element is represented as a rectangular box consisting of:

Content: The actual content (text, images)
Padding: Space between content and border
Border: A border around the padding
Margin: Space outside the border

.box-example {
    width: 200px;           /* Content width */
    padding: 20px;          /* Space inside */
    border: 5px solid red;  /* Border */
    margin: 15px;           /* Space outside */
}

Putting It All Together

Here’s a complete example combining HTML and 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>HTML & CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="site-header">
        <h1>My Website</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main class="content">
        <article>
            <h2>Welcome!</h2>
            <p>This is an example of HTML and CSS working together.</p>
        </article>
    </main>

    <footer class="site-footer">
        <p>&copy; 2026 My Website</p>
    </footer>
</body>
</html>

styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.site-header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

.site-header nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

.content {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

.site-footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 15px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

Best Practices

Use semantic HTML: Choose elements that describe their content (<header>, <nav>, <article>, <footer>)
Keep CSS separate: Use external stylesheets for maintainability
Use classes over IDs: Classes are reusable, IDs should be unique
Follow naming conventions: Use descriptive, lowercase names with hyphens
Comment your code: Help others (and future you) understand your work
Validate your code: Use W3C validators to check for errors

Next Steps

Now that you understand the basics, consider learning:

Responsive design with media queries
CSS Flexbox and Grid for advanced layouts
CSS animations and transitions
Modern CSS frameworks like Bootstrap or Tailwind
HTML5 semantic elements and accessibility

Conclusion

HTML and CSS are essential skills for anyone interested in web development. HTML provides the structure, CSS provides the style, and together they create the visual web experiences we interact with daily. Practice regularly, experiment with different properties, and build projects to solidify your understanding.

Next:
HTML in the real nutshel