20 Basic HTML and CSS Examples
This document provides 20 fundamental examples of HTML and CSS, ranging from basic
text formatting to layout structures. These examples are designed to help beginners
understand the core concepts of web development.
1. Basic Document Structure
The foundation of every HTML page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
2. Text Headings
HTML provides six levels of headings.
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
3. Paragraphs and Line Breaks
Structuring text content.
HTML
<p>This is a paragraph of text.</p>
<p>This is another paragraph
with a line break.</p>
4. Text Styling (Bold and Italic)
Applying basic emphasis to text.
HTML
<p><strong>Bold text</strong> and <em>italic text</em>.</p>
5. Hyperlinks
Connecting to other pages or websites.
HTML
<a href="[Link] target="_blank">Visit Google</a>
6. Unordered and Ordered Lists
Creating bulleted or numbered lists.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
7. Adding Images
Displaying images with alternative text.
HTML
<img src="[Link]" alt="Description of image" width="300">
8. Basic Tables
Organizing data in rows and columns.
HTML
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
9. Simple Form Input
Collecting user data.
HTML
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
10. Changing Text Color (CSS )
Using CSS to style text color.
HTML
<p style="color: blue;">This text is blue.</p>
<!-- Or in CSS file -->
<style>
.red-text { color: red; }
</style>
11. Background Colors
Setting background colors for elements.
CSS
body {
background-color: #f0f0f0;
}
.box {
background-color: yellow;
}
12. Font Families and Sizes
Customizing typography.
CSS
p {
font-family: Arial, sans-serif;
font-size: 18px;
}
13. Text Alignment
Aligning text within an element.
CSS
h1 {
text-align: center;
}
14. The Box Model (Padding and Margin)
Controlling space around elements.
CSS
.container {
margin: 20px;
padding: 15px;
border: 1px solid black;
}
15. Border Styling
Adding borders to elements.
CSS
div {
border: 2px dashed red;
border-radius: 10px;
}
16. Width and Height
Setting dimensions for elements.
CSS
.box {
width: 200px;
height: 100px;
}
17. Hover Effects
Changing styles when a user hovers over an element.
CSS
button:hover {
background-color: darkgray;
cursor: pointer;
}
18. Centering a Div (Flexbox)
A modern way to center content.
CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
19. Simple Grid Layout
Creating a basic grid structure.
CSS
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
20. Responsive Media Queries
Adjusting styles based on screen size.
CSS
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}