HTML Fundamentals and Semantic Structure
This section covers the foundational elements of HTML, including document structure, semantic tags for meaningful content, and special characters for proper text rendering.
Document Declaration and Character Encoding
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
</html>
The `` declaration defines the document type. The lang attribute assists search engines and browser features like translation. The charset meta tag specifies the character encoding for the document.
Common Semantic Tags
<h1>Main Heading</h1>
<p>A paragraph of text.</p>
<strong>Important text</strong>
<em>Emphasized text</em>
<del>Deleted text</del>
Semantic tags like <header>, <nav>, <main>, <article>, <section>, and <footer> provide meaning to the structure of the content.
Special Characters and Symbols
| Character | Description | Entity |
|---|---|---|
| < | Less than | < |
| > | Greater than | > |
| & | Ampersand | & |
| © | Copyright | © |
Essential HTML Tags
Division and Span Elements
<div id="container">Block-level division</div>
<span class="highlight">Inline text span</span>
Ordered and Unordered Lists
<ol type="A" start="3">
<li>First item</li>
<li>Second item</li>
</ol>
<ul style="list-style-type: square;">
<li>Item one</li>
<li>Item two</li>
</ul>
Image and Anchor Tags
<img src="image.jpg" alt="Description" width="300" height="200">
<a href="https://example.com" target="_blank">External Link</a>
Tables and Forms
<table border="1" cellspacing="0">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
<form action="/submit" method="POST">
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<button type="submit">Submit</button>
</form>
CSS Styling and Layout Principles
CSS is used to control the presentation of HTML elements, including colors, spacing, and positioning.
CSS Selectors and Specificity
/* Universal Selector */
* { margin: 0; padding: 0; }
/* Type Selector */
p { color: blue; }
/* Class Selector */
.container { width: 80%; }
/* ID Selector */
#main { background: #fff; }
/* Descendant Selector */
nav ul li { display: inline-block; }
/* Child Selector */
div > p { font-weight: bold; }
/* Pseudo-class */
a:hover { text-decoration: underline; }
Selector specificity determines which styles are applied when multiple rules conflict. Inline styles have highest specificity, followed by IDs, classes, and type selectors.
Text and Font Properties
body {
font-family: "Arial", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
text-align: justify;
text-decoration: none;
}
Background and Border Styling
.banner {
background: url('bg.jpg') no-repeat center / cover;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
The Box Model
The CSS box model consists of content, padding, border, and margin. The box-sizing property controls how width and height are calculated.
.standard-box {
box-sizing: content-box; /* Default */
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
.border-box-example {
box-sizing: border-box; /* Includes padding and border in width */
width: 300px;
padding: 20px;
border: 5px solid black;
}
Positioning and Display
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
.absolute-box {
position: absolute;
top: 0;
right: 0;
}
.fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.inline-block-item {
display: inline-block;
width: 150px;
vertical-align: top;
}
Practical Layout Techniques
Floats and Clearing
.left-column {
float: left;
width: 70%;
}
.right-column {
float: right;
width: 30%;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
Flexbox for Modern Layouts
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.flex-item {
flex: 1 0 200px;
margin: 10px;
}
CSS Grid Layout
.grid-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
background: #eee;
padding: 20px;
}
Responsive Design with Media Queries
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
}
}
Advanced CSS Features
CSS Transitions and Animations
.animated-button {
transition: all 0.3s ease;
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
.animated-button:hover {
background: #0056b3;
transform: scale(1.05);
}
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.sliding-element {
animation: slideIn 0.5s ease-out;
}
CSS Custom Properties (Variables)
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--spacing-unit: 1rem;
}
.component {
color: var(--primary-color);
margin: var(--spacing-unit);
border: 2px solid var(--secondary-color);
}
CSS Filters and Blend Modes
.filtered-image {
filter: grayscale(50%) blur(2px);
mix-blend-mode: multiply;
}
HTML5 and CSS3 Enhancements
HTML5 Form Elements
<input type="email" name="user_email" required>
<input type="date" name="birthdate">
<input type="range" min="0" max="100" value="50">
<input type="color" name="fav_color">
CSS3 Advanced Selectors
/* Attribute selector */
input[type="text"] { border: 1px solid #ccc; }
/* Structural pseudo-class */
li:nth-child(odd) { background: #f9f9f9; }
/* UI state pseudo-class */
input:focus { outline: 2px solid blue; }
/* Negation pseudo-class */
div:not(.special) { opacity: 0.7; }
CSS Shapes and Clip-path
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
.polygon {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: #ffd166;
}