HTML and CSS Examples

Explore various examples to enhance your understanding of HTML and CSS.

1. Basic HTML Structure

This example shows the basic structure of an HTML document, including the head and body sections.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Web Page</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>Welcome to my website.</p>
    </body>
</html>

Result:

Hello, World!

Welcome to my website.

2. Styling Text with CSS

Using CSS to change the color, size, and font of text within HTML elements.

<style>
    h2 {
        color: #4CAF50;
        font-size: 24px;
    }
    p {
        color: #333;
        font-family: Arial, sans-serif;
    }
</style>
<h2>Styled Heading</h2>
<p>This is styled text with CSS.</p>

Result:

Styled Heading

This is styled text with CSS.

3. Creating a Simple Form

HTML forms collect user input. Here is a basic form example with an input field and submit button.

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</form>

Result:

4. CSS Flexbox Layout

Using Flexbox to align items in a flexible container.

<style>
    .flex-container {
        display: flex;
        justify-content: space-around;
        background-color: #f0f0f0;
    }
    .flex-item {
        background-color: #4CAF50;
        padding: 20px;
        color: white;
        font-size: 20px;
    }
</style>
<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

Result:

Item 1
Item 2
Item 3

5. Responsive Design with Media Queries

Using media queries to change the layout based on the screen size.

<style>
    .responsive-box {
        background-color: #4CAF50;
        color: white;
        padding: 20px;
        font-size: 20px;
    }
    @media (max-width: 600px) {
        .responsive-box {
            background-color: #333;
            font-size: 16px;
        }
    }
</style>
<div class="responsive-box">Responsive Box</div>

Result:

Responsive Box

6. Adding Background Images

Use CSS to add background images to elements, setting position, size, and repeat options.

<style>
    .background-example {
        background-image: url('pv_code_logo.png');
        background-size: cover;
        height: 200px;
        color: white;
        text-align: center;
        padding: 70px 0;
    }
</style>
<div class="background-example">Background Image Example</div>

Result:

Background Image Example

7. Adding Borders to Elements

CSS allows you to add borders to HTML elements with various styles, colors, and sizes.

<style>
    .border-example {
        border: 2px dashed #4CAF50;
        padding: 20px;
        text-align: center;
    }
</style>
<div class="border-example">Dashed Border Example</div>

Result:

Dashed Border Example

8. Using Lists

HTML supports ordered and unordered lists, which are useful for grouping items.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Result:

  • Item 1
  • Item 2
  • Item 3
  1. First
  2. Second
  3. Third

9. Creating Tables

Tables are used to organize data in rows and columns.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>24</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>

Result:

Name Age
Alice 24
Bob 30

10. Adding Links

Links can be used to navigate to other pages or resources.

        <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

Result:

Visit Example

11. Adding Images

Images are added using the <img> tag, with attributes for size and description.

<img src="https://www.example.com/image.jpg" alt="Example Image" height="230" width="350">

Result:

Example Image

12. Creating Buttons

Buttons can be created with the <button> element, styled using CSS.

<button>Click Me</button>

Result:

Additional Resources