Scribd
Upload
7 views3 pages

HTML Css Guide

The document provides a comprehensive guide to HTML and CSS, covering basic structure, common tags, forms, media, and semantic elements in HTML, as well as CSS application, selectors, box model, positioning, flexbox, grid, responsive design, transitions, and animations. It also includes styling tips and practice projects for hands-on experience. Additionally, it suggests tools for coding and organizing CSS effectively.

Uploaded by

Chigozirim Sorochi
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
7 views3 pages

HTML Css Guide

The document provides a comprehensive guide to HTML and CSS, covering basic structure, common tags, forms, media, and semantic elements in HTML, as well as CSS application, selectors, box model, positioning, flexbox, grid, responsive design, transitions, and animations. It also includes styling tips and practice projects for hands-on experience. Additionally, it suggests tools for coding and organizing CSS effectively.

Uploaded by

Chigozirim Sorochi
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

Complete HTML & CSS Guide

HTML (HyperText Markup Language)

1. Basics

- <!DOCTYPE html>: Declares the document type

- <html>, <head>, <body>: Structure

2. Common Tags

- <h1> to <h6>: Headings

- <p>: Paragraph

- <a href="">: Hyperlink

- <img src="" alt="">: Image

- <ul>, <ol>, <li>: Lists

- <div>, <span>: Containers

3. Forms & Inputs

<form action="/submit" method="post">

<input type="text" name="name">

<input type="submit" value="Send">

</form>

4. Media & Semantic Tags

- <video>, <audio>, <iframe>

- <header>, <footer>, <main>, <section>

5. HTML Attributes

- id, class, src, href, alt, style, name, value, type, placeholder

CSS (Cascading Style Sheets)

1. CSS Application

- Inline, Internal, External

2. Selectors
Complete HTML & CSS Guide

- Element: p {}

- Class: .class {}

- ID: #id {}

- Pseudo-class: a:hover {}

- Attribute: input[type="text"] {}

3. Box Model

- margin, border, padding, content

4. Positioning

- static, relative, absolute, fixed, sticky

5. Flexbox

.container {

display: flex;

justify-content: space-between;

align-items: center;

6. Grid

.container {

display: grid;

grid-template-columns: repeat(3, 1fr);

7. Responsive Design

@media (max-width: 600px) {

.box { width: 100%; }

8. Transitions & Animations

.box {
Complete HTML & CSS Guide

transition: background 0.3s ease;

@keyframes fade {

0% {opacity: 0;}

100% {opacity: 1;}

9. Styling Tips

- Use semantic HTML

- Use external CSS

- Start mobile-first

- Reuse classes

Practice Projects

1. Personal Portfolio

2. Landing Page

3. Blog Layout

4. Responsive Navbar

5. Form UI

6. Photo Gallery

7. Pricing Cards

Tools and Tips

- Code Editor: VS Code, Sublime

- DevTools: Inspect, Debug

- Formatters: Prettier

- Organize CSS: Layout, Components, Utilities

You might also like