Scribd
Upload
43 views3 pages

HTML CSS Learning Guide

This document serves as a learning guide for HTML and CSS, covering the basics of HTML structure, common tags, and CSS styling techniques. It explains how to apply CSS through inline, internal, and external methods, along with key properties and advanced concepts like Flexbox and Grid for responsive design. The guide emphasizes the importance of practice in mastering web development skills.

Uploaded by

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

HTML CSS Learning Guide

This document serves as a learning guide for HTML and CSS, covering the basics of HTML structure, common tags, and CSS styling techniques. It explains how to apply CSS through inline, internal, and external methods, along with key properties and advanced concepts like Flexbox and Grid for responsive design. The guide emphasizes the importance of practice in mastering web development skills.

Uploaded by

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

HTML & CSS Learning Guide

# Introduction to HTML
HTML (HyperText Markup Language) is the backbone of web development. It structures web pages.

# Basic HTML Structure:


<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>

# Common HTML Tags:


- <h1> to <h6>: Headings
- <p>: Paragraphs
- <a href='link'>: Links
- <img src='image.jpg'>: Images
- <ul>, <ol>, <li>: Lists
CSS Basics & Styling

# Introduction to CSS
CSS (Cascading Style Sheets) is used to design and style web pages.

# Ways to Apply CSS:


1. Inline: <p style='color:blue;'>Hello</p>
2. Internal: Inside <style> in <head>
3. External: Linked via <link rel='stylesheet' href='style.css'>

# CSS Syntax:
selector {
property: value;
}

# Example:
h1 {
color: red;
font-size: 24px;
text-align: center;
}

# Key Properties:
- color: Text color
- background-color: Page background
- font-size: Text size
- margin, padding: Spacing
Advanced CSS & Responsive Design

# CSS Flexbox & Grid


## Flexbox:
.container {
display: flex;
justify-content: space-between;
}

## CSS Grid:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}

# Responsive Design (Media Queries):


@media (max-width: 600px) {
body {
background-color: lightgray;
}
}

CSS makes web pages attractive and responsive. Keep practicing!

You might also like