Controlling HTML and CSS – Comprehensive
Lecture Notes
1. Introduction to HTML and CSS Control
HTML (HyperText Markup Language) provides the structure of a web page, while CSS
(Cascading Style Sheets) manages the presentation and styling. "Controlling" HTML and CSS
means manipulating their behavior, appearance, and responsiveness through proper structure,
styling, and dynamic interaction.
Define content layout
Apply visual styles
Make responsive designs
Enhance user experience
Sample Code: Basic HTML + CSS Integration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS Control</title>
<!-- Internal CSS -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Web Development</h1>
<p>This is a sample paragraph styled with CSS.</p>
</div>
</body>
</html>
This example shows how internal CSS controls the look of HTML elements. The body and
.container are styled for layout and appearance.
2. HTML Structure Control
Semantic HTML elements (<header>, <nav>, <main>, <section>, <article>, <footer>) improve
accessibility, SEO, and maintainability. Semantic HTML makes the page easier to understand for
both browsers and developers.
Sample Code: Semantic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a company focused on web innovation.</p>
</section>
<article>
<h3>Latest Blog Post</h3>
<p>This article discusses modern web design trends.</p>
</article>
</main>
<aside>
<h4>Sidebar</h4>
<p>Useful links and ads go here.</p>
</aside>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Each element has a clear role:
<header>: Top section with site title and navigation
<nav>: Site menu
<main>: Main content
<section>: Thematic grouping
<article>: Self-contained content
<aside>: Sidebar
<footer>: Bottom info
3. CSS Styling Control
CSS manages:
Colors, fonts, spacing
Layout (positioning, display)
Visual effects (shadows, transitions)
Responsive behavior
CSS can be applied:
1. Inline (directly in the HTML tag)
2. Internal (in <style> within <head>)
3. External (separate .css file, preferred)
Sample Code: External CSS Example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<h2>Styled Card</h2>
<p>This uses external CSS for styling.</p>
</div>
</body>
</html>
styles.css
.card {
width: 300px;
padding: 20px;
margin: 20px auto;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card h2 {
color: #2c3e50;
margin-top: 0;
}
.card p {
color: #7f8c8d;
line-height: 1.6;
}
HTML links to external CSS for clear separation of content and style—making consistent,
scalable styling easier.
4. CSS Selectors and Specificity
Selectors decide which HTML elements are styled, and specificity determines what happens if
multiple rules could apply.
Specificity hierarchy (highest to lowest):
1. Inline styles (style="...")
2. ID selectors (#id)
3. Class, attribute, and pseudo-class selectors (.class, [type="text"], :hover)
4. Element and pseudo-element selectors (p, ::before)
Sample Code: Selector Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selectors & Specificity</title>
<style>
/* Element selector */
p {
color: gray;
}
/* Class selector */
.highlight {
color: blue;
font-weight: bold;
}
/* ID selector */
#special {
color: red;
text-decoration: underline;
}
/* Attribute selector */
input[type="text"] {
border: 2px solid green;
padding: 5px;
}
/* Pseudo-class */
a:hover {
color: purple;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="highlight">This is highlighted.</p>
<p id="special" class="highlight">This is special (ID wins).</p>
<input type="text" placeholder="Text input">
<a href="#">Hover over me</a>
</body>
</html>
The #special ID overrides .highlight for color, due to higher specificity.
5. Layout Control: Flexbox
Flexbox helps align items in a row or column with dynamic spacing.
Key properties:
display: flex (container)
flex-direction: row/column
justify-content: horizontal alignment
align-items: vertical alignment
flex-wrap: allows wrapping
Sample Code: Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox Layout</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
background: #ecf0f1;
border-radius: 10px;
padding: 10px;
}
.flex-item {
background: #3498db;
color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
6. Layout Control: CSS Grid
CSS Grid allows precise, two-dimensional layouts using row and column definitions.
Key properties:
display: grid
grid-template-columns / rows
gap
grid-template-areas
Sample Code: CSS Grid
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
height: 100vh;
gap: 10px;
}
.header { grid-area: header; background: #e74c3c; }
.sidebar { grid-area: sidebar; background: #34495e; }
.main { grid-area: main; background: #bdc3c7; }
.footer { grid-area: footer; background: #2c3e50; }
.grid-container > div {
padding: 20px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
7. Responsive Design with Media Queries
Responsive design adapts websites for all device sizes. Media queries apply CSS rules based on
device characteristics.
Mobile-First: Start with mobile styles, then use min-width breakpoints for larger screens.
Sample Code: Responsive Media Queries
/* Mobile styles (default) */
.container {
width: 100%;
padding: 10px;
}
.menu {
flex-direction: column;
}
/* Tablet: 768px and up */
@media (min-width: 768px) {
.container {
width: 750px;
margin: auto;
}
.menu {
flex-direction: row;
}
}
/* Desktop: 1024px and up */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
.menu a {
margin-right: 20px;
}
}
<div class="container">
<nav class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
</nav>
</div>
8. Dynamic Control with JavaScript
JavaScript allows you to update HTML and CSS on the fly—altering content, styles, and classes
based on user actions.
Sample Code: Toggle Dark Mode
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic CSS Control</title>
<style>
body {
font-family: sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.light {
background: white;
color: black;
}
.dark {
background: #121212;
color: white;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body class="light">
<h1>Dynamic Theme Toggle</h1>
<button id="theme-toggle">Toggle Dark Mode</button>
<script>
const body = document.body;
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', () => {
if (body.classList.contains('light')) {
body.classList.replace('light', 'dark');
toggleButton.textContent = 'Toggle Light Mode';
} else {
body.classList.replace('dark', 'light');
toggleButton.textContent = 'Toggle Dark Mode';
}
});
</script>
</body>
</html>
9. CSS Variables (Custom Properties)
CSS variables (custom properties) enable easy theming and reuse of values.
Define with -- inside a selector or :root
Use with var(--variable-name)
Sample Code: CSS Variables
:root {
--primary-color: #3498db;
--secondary-color: #e74c3c;
--font-size: 16px;
--border-radius: 8px;
}
.button {
background: var(--primary-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: var(--border-radius);
font-size: var(--font-size);
cursor: pointer;
}
.button:hover {
background: var(--secondary-color);
}
<button class="button">Click Me</button>
10. Best Practices Summary
Practice Why It Matters
Semantic HTML Improves accessibility and SEO
External CSS Easier maintenance and caching
Mobile-First Better performance on mobile
CSS Classes Reusable and modular styling
Avoid !important Prevents specificity wars
Use Flexbox/Grid Modern, responsive layouts
Optimize Selectors Faster rendering
Conclusion
Controlling HTML and CSS involves:
Using semantic structure for clarity
Applying CSS for visual design
Leveraging Flexbox/Grid for layout
Making sites responsive with media queries
Adding interactivity using JavaScript
Following best practices for scalability
Next Steps:
Practice layouts with Grid and Flexbox
Experiment with dark mode toggles
Use CSS variables for easy theming
Test accessibility with browser tools
To save as PDF:
Copy this content into a word processor or Google Docs, format as needed, and export as
PDF.
Or, save as a Markdown (.md) or HTML file and print to PDF using your browser.
