Mastering HTML and CSS Basics

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the core technologies for building websites. HTML provides the structure, while CSS adds style. This tutorial covers the basics of both HTML and CSS, helping you get started with web development.

1. Understanding HTML Structure

HTML uses tags to define elements on a webpage. Every HTML document starts with a <!DOCTYPE html> declaration, followed by the root <html> tag, and includes sections like <head> and <body>.

Basic HTML Structure:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This is my first webpage using HTML.</p>
    </body>
</html>

Explanation:

<head>: Contains metadata, including the title and links to external resources like stylesheets.
<body>: Contains the content of the webpage that will be visible to users.

2. Introduction to CSS Styling

CSS is used to style HTML elements by adding colors, fonts, layouts, and other visual properties.

Basic CSS Syntax:

selector {
    property: value;
}

Example: Changing the background color of the webpage.

body {
    background-color: lightblue;
}

3. Adding CSS to HTML

You can add CSS to HTML in three ways: inline, internal, and external.

Example: Internal CSS

<html>
    <head>
        <style>
            body {
                background-color: lightblue;
                font-family: Arial, sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This page is styled with internal CSS.</p>
    </body>
</html>

4. CSS Box Model

The CSS box model describes the rectangular boxes generated for elements. It consists of margins, borders, padding, and the content area.

Example: Adding padding and a border to a paragraph element.

p {
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

Conclusion: HTML and CSS are the building blocks of web design. HTML gives structure to your page, while CSS adds style. By learning the basics of both technologies, you can create simple, beautiful web pages. Practice is key to mastering web design!

WAFUTE

Search This Blog