Scribd
Upload
4 views3 pages

Week 1 HTML CSS Fundamentals

This document covers the fundamentals of HTML and CSS, including basic HTML structure, common tags, and CSS syntax. It explains how to apply CSS in different ways, the box model, display types, and key CSS properties. Additionally, it outlines a mini project to create a personal bio page using the learned concepts.

Uploaded by

deveshparihar45
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

Week 1 HTML CSS Fundamentals

This document covers the fundamentals of HTML and CSS, including basic HTML structure, common tags, and CSS syntax. It explains how to apply CSS in different ways, the box model, display types, and key CSS properties. Additionally, it outlines a mini project to create a personal bio page using the learned concepts.

Uploaded by

deveshparihar45
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Week 1: HTML & CSS Fundamentals

1. What is HTML?
HTML (HyperText Markup Language) is used to structure web pages.

Basic HTML Structure:

<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>

Common HTML Tags:

Tag Use

<h1>-<h6> Headings

<p> Paragraphs

<a> Links

<img> Images

<ul>, <ol>, <li> Lists

<div> Container

<span> Inline container

<form>, <input>, <label>, <button> Forms

2. What is CSS?
CSS (Cascading Style Sheets) styles the appearance of HTML elements.
CSS Syntax:

selector {
property: value;
}

Example:

h1 {
color: blue;
font-size: 36px;
}

3. Ways to Apply CSS


Inline: <h1 style="color:red;">Hello</h1>

Internal: <style> tag inside HTML <head>

External: Link to a .css file using <link rel="stylesheet" href="styles.css">

4. Box Model
Every element is a box: Content → Padding → Border → Margin

5. Display Types
Block: Takes full width (e.g. <div>, <p>)

Inline: Takes only needed space (e.g. <span>, <a>)

Inline-block: Like inline but allows width/height

6. Key CSS Properties


Property Example

color color: red;

background background: #000;

font-size font-size: 16px;


text-align text-align: center;

margin margin: 20px;

padding padding: 10px;

border border: 1px solid #ccc;

7. First Mini Project: Personal Bio Page


Create a static HTML page with:

- Your name and photo

- About section

- Hobbies list

- Contact email link

Tools to Use:
- Code Editor: https://code.visualstudio.com/

- Live Server Extension for preview

- HTML Validator: https://validator.w3.org/

You might also like