Chapters
HTML + CSS: Build Your First Web Page — A Beginner’s Practical Guide
📘 Chapter 3: Page Layout — Box Model, Display Properties, and Positioning
🧱 Introduction: Laying
the Foundation for Layout
So far, you’ve built structured HTML and styled it with CSS.
But web pages aren’t just about color and font—they’re about layout:
where content sits, how it flows, how it adjusts across devices.
This chapter dives into page layout fundamentals,
including:
- The CSS
Box Model
- display
types (block, inline, inline-block, flex)
- The
difference between static, relative, absolute, fixed, and sticky positioning
- Organizing
sections, cards, navbars, and more
- Techniques
to build responsive page structures
Mastering layout is a critical skill for front-end
development and design precision.
🧱 Part 1: The CSS Box
Model — Every Element is a Box
At the core of every element in HTML is the box model—which
governs its dimensions and space around it.
🔹 Box Model Components:
|
Part |
Description |
|
Content |
The actual text/image
inside the box |
|
Padding |
Space between
content and border |
|
Border |
Line around the
padding/content |
|
Margin |
Space outside
the element to separate it from others |
📦 Visualized:
rust
|<- margin ->|
|<-- border -->|
|<-- padding -->|
| Content |
🔸 Sample CSS
css
.box
{
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 30px;
}
✅ Use browser dev tools to see
padding, margin, and borders highlighted visually.
🖼️ Part 2: Understanding
display Property
The display property defines how an element behaves
in the layout flow.
🔹 Main Display Types:
|
Value |
Description |
Used For |
|
block |
Starts on a new line,
takes full width |
<div>,
<p>, <section> |
|
inline |
Stays in line
with text |
<span>,
<a>, <b> |
|
inline-block |
Like inline but
accepts height/width |
Button-style elements |
|
none |
Hides the
element |
Conditionally
visible UI |
🔸 Example:
css
.block
{
display: block;
}
.inline
{
display: inline;
}
HTML:
html
<p
class="block">Block Element</p>
<span
class="inline">Inline Element</span>
✅ Use inline-block for horizontal
buttons with paddings and sizes.
🎯 Part 3: Positioning —
Move It Where You Want It
CSS position property determines how elements are placed
on a page.
🔹 Positioning Types:
|
Value |
Behavior |
When to Use |
|
static |
Default flow |
Normal layout |
|
relative |
Moves element
relative to itself |
Minor
adjustments |
|
absolute |
Positions element relative
to nearest positioned parent |
Modals, dropdowns |
|
fixed |
Stays fixed
to viewport |
Sticky
headers, floating buttons |
|
sticky |
Switches between
relative and fixed |
Sticky navbars |
🔸 Code Sample:
css
.relative-box
{
position: relative;
top: 10px;
left: 20px;
}
.absolute-box
{
position: absolute;
top: 0;
right: 0;
}
.fixed-box
{
position: fixed;
bottom: 10px;
right: 10px;
}
HTML:
html
<div
class="relative-box">I'm shifted relative to myself.</div>
<div
class="absolute-box">I'm positioned absolutely.</div>
<div
class="fixed-box">I'm always in the corner.</div>
⚠️ Make sure to have a position:
relative parent when using absolute.
🔄 Part 4: Creating Page
Layouts with CSS
Let’s build a common layout:
- Header
- Navigation
- Sidebar
+ Main Content
- Footer
✅ HTML Structure:
html
<body>
<header>Site Header</header>
<nav>Navigation Bar</nav>
<main>
<aside>Sidebar</aside>
<section>Main Content</section>
</main>
<footer>Footer Area</footer>
</body>
✅ CSS Styling:
css
header,
footer {
background: #222;
color: white;
text-align: center;
padding: 1em;
}
nav
{
background: #444;
padding: 1em;
color: white;
}
main
{
display: flex;
gap: 20px;
}
aside
{
width: 25%;
background: #f0f0f0;
padding: 1em;
}
section
{
width: 75%;
background: #fff;
padding: 1em;
}
📐 Part 5: Best Practices
for Clean Layouts
- ✅
Use semantic elements like <main>, <aside>,
<footer>
- ✅
Keep layout styles separate from appearance styles (colors, fonts)
- ✅
Use percentages or flex for fluid layout instead of fixed px
- ✅
Add box-sizing: border-box; globally to make size math easier
css
*
{
box-sizing: border-box;
}
🧪 Part 6: Mini Projects
🔹 Card Layout
html
<div
class="card">
<img src="image.jpg">
<h3>Card Title</h3>
<p>Description</p>
</div>
css
.card
{
width: 300px;
border: 1px solid #ddd;
padding: 15px;
margin: 10px;
display: inline-block;
}
🔹 Sticky Navbar
css
nav
{
position: sticky;
top: 0;
background: white;
z-index: 10;
}
📊 Summary Table: Key
Layout Properties
|
Property |
Purpose |
Example |
|
display |
Flow control (block,
inline, flex) |
display: flex; |
|
position |
Element
placement |
position:
absolute; |
|
top, right, bottom,
left |
Offset from edge |
top: 20px; |
|
margin |
External
spacing |
margin: 10px; |
|
padding |
Internal spacing |
padding: 15px; |
|
box-sizing |
Size
calculation |
box-sizing:
border-box; |
📍 Chapter 3 Summary
You’ve now learned:
- How
the CSS box model controls space
- When
to use block, inline, and inline-block displays
- How
to position elements for fixed, floating, and layered layout
- Best
practices for layout structure and spacing
- How
to build real-world layouts using semantic tags and CSS
FAQs
Q1: What is the difference between HTML and CSS?
A: HTML (HyperText Markup Language) is used to structure the content of a webpage—such as text, headings, links, and images. CSS (Cascading Style Sheets) is used to style that content—like setting colors, fonts, spacing, and layout.
Q2: Do I need to install any special software to write HTML and CSS?
A: No special software is required. You can use any text editor like Visual Studio Code, Sublime Text, or even Notepad. All modern browsers can render your HTML and CSS code.
Q3: Can I build a complete website with just HTML and CSS?
A: Yes, you can build a static website using only HTML and CSS. However, for interactive elements like animations or forms with validation, you'll eventually need JavaScript.
Q4: How do I view my HTML page in a browser?
A: After saving your file with a .html extension, simply double-click it or right-click and select “Open with” → your browser (e.g., Chrome, Firefox, Edge).
Q5: What is the best way to apply CSS to an HTML page?
A: The best practice is to use an external CSS file (linked with a <link> tag in the HTML <head>). This makes your code modular, clean, and easier to maintain.
Q6: Is it better to learn HTML and CSS before JavaScript?
A: Yes. HTML and CSS provide the structural and visual foundation of web development. Learning them first helps you understand how websites are built before adding interactivity with JavaScript.
Q7: How can I make my website responsive using HTML and CSS?
A: Use CSS media queries, flexbox, and relative units like percentages or em/rem to make your layout adapt to different screen sizes (e.g., desktop, tablet, mobile).
Q8: Can I host my HTML + CSS website online for free?
A: Yes! Platforms like GitHub Pages, Netlify, and Vercel allow you to host static sites (HTML/CSS/JS) for free with custom domains and version control.
Q9: What’s the difference between class and id in CSS?
A: An id targets a unique element using #idname, while a class can be reused across multiple elements using .classname. IDs should be unique per page; classes can apply styles to multiple elements.
Q10: Where can I find design inspiration and examples for HTML/CSS projects?
A: Websites like CodePen, Dribbble, Frontend Mentor, and CSS-Tricks offer great examples, templates, and challenges to inspire and improve your front-end design skills.
Explore Other Libraries
Please allow ads on our site
Please log in to access this content. You will be redirected to the login page shortly.
Login
Comments(0)