Scribd
Upload
18 views11 pages

HTML & CSS Basics for Beginners

The document provides an introduction to HTML and CSS, explaining their definitions, purposes, and basic structures. It covers important HTML tags, CSS types, syntax, the box model, selectors, and responsive design techniques. The document concludes with a practice task to create a webpage incorporating various elements and CSS styling.

Uploaded by

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

HTML & CSS Basics for Beginners

The document provides an introduction to HTML and CSS, explaining their definitions, purposes, and basic structures. It covers important HTML tags, CSS types, syntax, the box model, selectors, and responsive design techniques. The document concludes with a practice task to create a webpage incorporating various elements and CSS styling.

Uploaded by

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

HTML & CSS Introduction

• • What is HTML?
• • What is CSS?
• • Why we use them?
• • Structure + Styling
What is HTML?
• • HyperText Markup Language
• • Creates structure of web pages
• • Uses tags and elements
Basic HTML Structure
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• Content here
• </body>
• </html>
Important HTML Tags
• • <h1> to <h6> (Headings)
• • <p> Paragraph
• • <img> Image
• • <a> Link
• • <table> Table
• • <form> Input form
What is CSS?
• • Cascading Style Sheets
• • Controls layout, colors, fonts
• • Makes site beautiful & responsive
Types of CSS
• 1. Inline CSS
• 2. Internal CSS
• 3. External CSS
CSS Syntax
• selector {
• property: value;
• }
• Example:
• p { color: red; font-size:20px;}
Box Model
• Element box contains:
• • Content
• • Padding
• • Border
• • Margin
Selectors
• • Element selector: p
• • Class selector: .class
• • ID selector: #id
Responsive Design
• • Websites adjust to screen
• • Media Queries in CSS
• Example:
• @media(max-width:600px){ body{font-
size:12px;} }
End & Practice Task
• ✅ Create a webpage with:
• • Heading & paragraph
• • Image
• • Table
• • CSS styling

• Good luck!

You might also like