Scribd
Upload
7 views20 pages

HTML CSS CheatSheet With Examples

This document serves as a comprehensive guide for learning HTML and CSS, targeting students and junior web developers. It covers fundamental topics such as document structure, text formatting, hyperlinks, images, lists, tables, forms, audio, video, semantic HTML, and various CSS concepts including selectors, box model, flexbox, grid layout, responsive design, transitions, and animations. The conclusion emphasizes the importance of regular practice and provides references for further learning.

Uploaded by

mpombezafrank
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 views20 pages

HTML CSS CheatSheet With Examples

This document serves as a comprehensive guide for learning HTML and CSS, targeting students and junior web developers. It covers fundamental topics such as document structure, text formatting, hyperlinks, images, lists, tables, forms, audio, video, semantic HTML, and various CSS concepts including selectors, box model, flexbox, grid layout, responsive design, transitions, and animations. The conclusion emphasizes the importance of regular practice and provides references for further learning.

Uploaded by

mpombezafrank
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/ 20

Introduction

Purpose: A guide for learning HTML & CSS from beginner to intermediate level with real examples and

outputs.

Audience: Students, self-taught learners, and junior web developers.


HTML Document Structure

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>
Text Formatting

<p>This is <b>bold</b> and <i>italic</i> text.</p>


Hyperlinks

<a href='https://www.google.com' target='_blank'>Visit Google</a>


Images

<img src='image.jpg' alt='Sample Image' width='300'>


Lists

<ul><li>HTML</li><li>CSS</li></ul><ol><li>Intro</li><li>Basics</li></ol>
Tables

<table border='1'><tr><th>Name</th><th>Age</th></tr><tr><td>John</td><td>30</td></tr></table>
Forms

<form>Name: <input type='text' name='username'><br><input type='submit' value='Submit'></form>


Audio

<audio controls><source src='audio.mp3' type='audio/mp3'></audio>


Video

<video width='320' height='240' controls><source src='movie.mp4' type='video/mp4'></video>


Semantic HTML

<article><header><h2>Post Title</h2></header><p>Post content</p><footer>Posted by

Admin</footer></article>
CSS Basics

<style>body { background-color: lightblue; } h1 { color: navy; font-size: 30px; }</style>


CSS Selectors

<style>.main { color: red; } #unique { font-weight: bold; }</style><p class='main'>Red Text</p><p

id='unique'>Bold Text</p>
Box Model

<style>div { margin: 10px; padding: 20px; border: 2px solid black; }</style><div>This is a box</div>
Flexbox

<style>.container { display: flex; } .box { width: 100px; height: 100px; margin: 10px; background: orange;

}</style><div class='container'><div class='box'></div><div class='box'></div></div>


Grid Layout

<style>.grid { display: grid; grid-template-columns: auto auto; gap: 10px; } .item { background: lightgreen;

padding: 20px; }</style><div class='grid'><div class='item'>1</div><div class='item'>2</div></div>


Responsive Design

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


CSS Transitions

<style>.box { width: 100px; height: 100px; background: red; transition: background 0.5s; } .box:hover {

background: blue; }</style><div class='box'></div>


CSS Animations

<style>@keyframes move { from {left: 0;} to {left: 100px;} } .animate { position: relative; animation: move 2s

infinite alternate; }</style><div class='animate'>Animated</div>


Conclusion

Practice regularly. Use DevTools. References:

- MDN Web Docs

- W3Schools

- CSS-Tricks

- FreeCodeCamp

You might also like