If you are just starting with web design and you want to make text bold, CSS gives you a clean and reusable way to do it. In this guide, I will show you how to make text bold using CSS, what the font-weight property means, and a few common patterns that make your HTML and CSS easier to maintain.
I will also share two complete HTML examples you can paste into a file and test right away. By the end, you will know exactly how to make text bold using CSS in the right way, without guesswork.
What “bold” means in CSS
In CSS, bold text is controlled by the font-weight property. You can set it with keywords or numbers:
- Keywords:
normal,bold,bolder,lighter - Numeric values:
100,200,300,400,500,600,700,800,900
Most system fonts guarantee at least 400 for normal and 700 for bold. When I write font-weight: bold;, it typically maps to 700. If a font does not include a specific weight, the browser picks the closest available weight. That is why font-weight: 600; may look the same as 700 in some fonts.
For example, this rule makes anything with class bold bold:
.bold { font-weight: bold; }
If I want to be precise, I can use a numeric weight:
.bold { font-weight: 700; }
Both do the job for most cases.
Quick rules of thumb
- Use
font-weight: 700;when you need a guaranteed bold look. - Use
font-weight: bold;when you are fine with the browser mapping it for you. - Use
bolderorlighterto make text relatively heavier or lighter than its parent. - Remember that
font-weightinherits. If a parent is bold, children are bold unless you reset them.
Example 1: Make text bold using font-weight CSS property
Paste this into a new file named example-1.html, then open it in your browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quick Bold Text Example - CSS font-weight</title>
<style>
:root {
--bg: #0b1020;
--card: #151b2e;
--text: #e7ebf3;
--muted: #a7b0c0;
--accent: #7aa2ff;
--border: #23304e;
}
html, body {
height: 100%;
background: var(--bg);
color: var(--text);
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
line-height: 1.6;
}
.demo-container {
max-width: 680px;
margin: 24px auto;
padding: 16px;
box-sizing: border-box;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
h1 {
font-size: 1.25rem;
margin: 0 0 8px 0;
letter-spacing: 0.2px;
}
p {
margin: 0.5rem 0 0 0;
color: var(--muted);
}
/* The only rule you need to make text bold */
.bold {
font-weight: 700;
color: var(--text);
}
/* Responsive tweaks for narrow screens */
@media (max-width: 420px) {
.card { padding: 14px; border-radius: 10px; }
h1 { font-size: 1.1rem; }
}
</style>
</head>
<body>
<div class="demo-container">
<div class="card">
<h1>How to Make Text Bold Using CSS</h1>
<p>
This is normal text, and this is
<span class="bold">bold text</span>
using the class <code>.bold</code>.
</p>
</div>
</div>
</body>
</html>
Output:
What to notice:
- The line
.bold { font-weight: 700; }is the core rule. - I used
<span class="bold">to bold only a piece of a sentence. You can attach that class to any inline or block element. - If you prefer the keyword form, replace
700withboldand it will work the same in most cases.
Semantics matter, strong vs b
HTML has <strong> and <b> elements. <strong> means important text; browsers render it bold by default. <b> is visual emphasis only, not meaning. I use <strong> when the word is important in the content. I use CSS classes when I want a visual style without implying importance.
If I want to control how <strong> looks, I can write:
strong { font-weight: 700; }
That keeps the semantic meaning and ensures a consistent weight.
Inheritance and scope, bold a section at once in CSS
Because font-weight inherits, I can bold an entire section with a single rule:
.callout { font-weight: 600; }
If I need to reset a part inside it back to normal:
.callout .reset { font-weight: 400; }
This is useful for sidebars or emphasis boxes where most text is bold, but a label or note should be normal.
Example 2: A complete page demonstrating multiple ways to make text bold using CSS
Paste this into example-2.html. It includes class-based bolding, semantic <strong>, numeric weights, and inheritance with a reset.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Make Text Bold Using CSS - Complete Demo</title>
<style>
:root{
--bg:#0b1020;
--surface:#111731;
--card:#151b2e;
--text:#e7ebf3;
--muted:#a7b0c0;
--accent:#93b1ff;
--border:#223055;
--chip:#1a2344;
--ok:#a6e3a1;
}
html,body{
height:100%;
margin:0;
background:var(--bg);
color:var(--text);
font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
line-height:1.6;
}
.container{
max-width:960px;
margin:24px auto;
padding:16px;
box-sizing:border-box;
}
.header{
background:linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
padding:18px 16px;
border:1px solid var(--border);
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
h1{
margin:0 0 6px 0;
font-size:1.5rem;
letter-spacing:0.2px;
}
.lead{
margin:0;
color:var(--muted);
}
.grid{
display:grid;
gap:16px;
grid-template-columns: repeat(12, 1fr);
margin-top:16px;
}
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
@media (max-width: 900px){
.col-6{ grid-column: span 12; }
.col-4{ grid-column: span 12; }
}
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:14px;
padding:16px;
box-shadow:0 8px 26px rgba(0,0,0,0.3);
}
.muted{ color:var(--muted); }
/* 1) Class-based bold */
.bold{ font-weight:700; }
/* 2) Numeric weights palette */
.fw-400{ font-weight:400; }
.fw-500{ font-weight:500; }
.fw-600{ font-weight:600; }
.fw-700{ font-weight:700; }
.fw-800{ font-weight:800; }
/* 3) Semantic control for strong and b */
strong{ font-weight:700; }
b{ font-weight:600; }
/* 4) Inheritance and resets */
.emphasis{ font-weight:600; }
.emphasis .reset{ font-weight:400; }
.badge{
display:inline-block;
padding:4px 8px;
border-radius:999px;
background:var(--chip);
border:1px solid var(--border);
color:var(--accent);
font-size:12px;
letter-spacing:0.3px;
}
.weights{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.weights .chip{
background:var(--chip);
border:1px solid var(--border);
border-radius:10px;
padding:10px 12px;
min-width:120px;
}
.weights .label{
font-size:12px;
color:var(--muted);
display:block;
}
ul{ padding-left:18px; margin:8px 0 0 0; }
li{ margin:4px 0; }
code{
background: #0f1530;
border:1px solid var(--border);
padding:2px 6px;
border-radius:6px;
font-size:0.95em;
}
.ok{ color: var(--ok); }
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>How to Make Text Bold Using CSS</h1>
<p class="lead">See class-based bold, numeric weights, semantics, and inheritance in one place.</p>
</header>
<section class="grid">
<article class="card col-6">
<span class="badge">1) Class-based bold</span>
<p class="muted">Apply <code>.bold</code> to any element when you want a bold style without changing semantics.</p>
<p>Normal text. <span class="bold">This sentence is bold with class .bold.</span> Normal again.</p>
<p class="muted">Rule used: <code>.bold { font-weight: 700; }</code></p>
</article>
<article class="card col-6">
<span class="badge">2) Semantic elements</span>
<p class="muted">Use <code><strong></code> for importance, use <code><b></code> for visual bold only.</p>
<p>Payment status: <strong class="ok">Paid</strong>. Label: <b>Beta</b> release.</p>
<p class="muted">Rules used: <code>strong { font-weight: 700; } b { font-weight: 600; }</code></p>
</article>
<article class="card col-12">
<span class="badge">3) Numeric weights palette</span>
<p class="muted">Your font may not include all weights. The browser picks the closest available.</p>
<div class="weights">
<div class="chip fw-400"><span class="label">400 normal</span>Make text bold using CSS? No, this is normal.</div>
<div class="chip fw-500"><span class="label">500 medium</span>Medium weight for subtle emphasis.</div>
<div class="chip fw-600"><span class="label">600 semibold</span>Stronger emphasis, still readable in long text.</div>
<div class="chip fw-700"><span class="label">700 bold</span>Clear bold emphasis for headings or key terms.</div>
<div class="chip fw-800"><span class="label">800 extra bold</span>Very heavy, use sparingly.</div>
</div>
</article>
<article class="card col-12">
<span class="badge">4) Inheritance and reset</span>
<p class="muted">The parent sets a base weight; a child can reset or change it.</p>
<div class="emphasis">
<p>This whole block is boldish because the parent has <code>.emphasis { font-weight: 600; }</code>.</p>
<p><span class="reset">This inline span is reset to normal with <code>.reset { font-weight: 400; }</code>.</span></p>
<ul>
<li>List items inherit the bold weight from the parent.</li>
<li><span class="reset">This item resets back to normal inside the list.</span></li>
</ul>
</div>
</article>
</section>
</div>
</body>
</html>
Key takeaways from this complete demo:
- The class
.bold { font-weight: 700; }is a reusable utility. I attach it to any element that needs bold styling. - With semantics,
strong { font-weight: 700; }ensures important text is bold and meaningful for screen readers. - The palette shows how
400, 500, 600, 700, 800look. If you do not see much difference between600and700, that is due to the current font’s available weights. - The
.emphasiswrapper bolds everything inside,.resetbrings a piece back to normal. This saves you from adding a bold class to every child.
Common mistakes and smart tips
- Do not assume every font supports all numeric weights. If
600looks like700, the font may not provide a separate600. - Use headings and
<strong>for meaning. Do not rely on bold alone to convey critical information. - Keep contrast in mind. Bold text still needs a readable color contrast against the background.
- Prefer a small utility class like
.boldin design systems. It keeps your HTML clean and consistent.
Closing thoughts
Making text bold using CSS is simple once you understand font-weight. Start with .bold { font-weight: 700; } for quick wins, use <strong> when the text is important, and remember that font-weight inherits. With these patterns, you will control emphasis precisely, your code will stay tidy, and your pages will look clear and consistent.
See also: How to Create Masonry Layouts Using CSS Without JavaScript
