Skip to content

Session 3 HTML and CSS

Jump to bottom
Maximiliano Militzer edited this page Apr 7, 2025 · 1 revision

Session 3: Make Stuff Beautiful with HTML and CSS

Overview

In this session, we'll learn how to create and style web pages using HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). HTML provides the structure of a webpage, while CSS controls its appearance and layout.

Learning Objectives

  • Understand the basic structure of an HTML document
  • Learn essential HTML elements and their purposes
  • Understand CSS selectors and properties
  • Apply styles to HTML elements
  • Create responsive designs

Topics Covered

1. Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of web pages.

HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

2. Essential HTML Elements

Text Elements

  • Headings: <h1> to <h6>
  • Paragraphs: <p>
  • Lists: <ul>, <ol>, <li>
  • Text formatting: <strong>, <em>, <span> 
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
</ul>
<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
</ol>

Links and Images

  • Links: <a href="url">link text</a>
  • Images: <img src="image.jpg" alt="description"> 
<a href="https://www.example.com">Visit Example.com</a>
<img src="cat.jpg" alt="A cute cat">

Structural Elements

  • Containers: <div>, <section>, <article>
  • Navigation: <nav>
  • Header and Footer: <header>, <footer> 
<div class="container">
    <header>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
        </nav>
    </header>
    <section>
        <h2>Section Title</h2>
        <p>Section content goes here.</p>
    </section>
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</div>

3. Introduction to CSS

CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements. It allows you to define styles for your web pages including layouts, colors, fonts, and more.

Ways to Include CSS

  1. Inline CSS: Using the style attribute
  2. Internal CSS: Using the <style> tag in the <head> section
  3. External CSS: Linking to an external CSS file using the <link> tag
<!-- External CSS -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- Internal CSS -->
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
</head>

<!-- Inline CSS -->
<p style="color: blue; font-size: 18px;">This is a paragraph with inline styles.</p>

4. CSS Selectors

CSS selectors define which HTML elements you want to style.

/* Element selector */
h1 {
    color: blue;
}

/* Class selector */
.highlight {
    background-color: yellow;
}

/* ID selector */
#header {
    height: 100px;
}

/* Descendant selector */
nav a {
    text-decoration: none;
}

/* Pseudo-class selector */
a:hover {
    color: red;
}

5. CSS Properties

CSS properties define the styles you want to apply to the selected elements.

/* Text properties */
p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    line-height: 1.5;
    text-align: justify;
}

/* Box model properties */
.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    margin: 10px;
    border: 1px solid black;
}

/* Background properties */
body {
    background-color: #f5f5f5;
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

6. Responsive Design with CSS

Responsive design ensures that your website looks good on all devices.

/* Media queries */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    
    h1 {
        font-size: 24px;
    }
}

/* Flexbox */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* CSS Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

Practice Exercises

  1. Create a simple personal webpage with HTML
  2. Style your webpage using CSS
  3. Make your webpage responsive for mobile devices
  4. Create a navigation menu with links
  5. Build a simple photo gallery

Additional Resources

Next Steps

Now that you know how to create and style web pages, you're ready to move on to Session 4: JavaScript Basics where you'll learn how to add interactivity to your web pages.

Clone this wiki locally