HTML and CSS Master Guide
Uploaded by
yuktishree11HTML and CSS Master Guide
Uploaded by
yuktishree11HTML & CSS MASTER GUIDE
Complete Beginner to Intermediate Reference Guide
PART 1: HTML
Basic Structure
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Common Tags
Headings: <h1> to <h6>
Paragraph: <p>
Link: <a href='url'>
Image: <img src='[Link]'>
Lists: <ul>, <ol>, <li>
Containers: <div>, <span>
Semantic: <header>, <nav>, <main>, <section>, <article>, <footer>
Forms Example
<form>
<input type="text">
<input type="email">
<textarea></textarea>
<button>Submit</button>
</form>
PART 2: CSS
Syntax
selector {
property: value;
}
Selectors
p {}
.class {}
#id {}
div p {}
input[type="text"] {}
Box Model
Content -> Padding -> Border -> Margin
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Text & Fonts
p {
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
Flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
}
Grid
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
Positioning
.box {
position: relative;
top: 10px;
}
Transitions & Animations
button {
transition: all 0.3s ease;
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
Responsive Design
@media (max-width: 768px) {
body {
background: lightgray;
}
}
PART 3: MINI PROJECT
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
}
.card {
width: 300px;
padding: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="card">
<h2>Profile Card</h2>
<p>This is a simple HTML + CSS project.</p>
</div>
</body>
</html>