When building a website, HTML provides the structure but it’s CSS that brings it to life. CSS (Cascading Style Sheets) is the language used to control the appearance and layout of web pages. From adjusting fonts and colors to designing layouts and animations, CSS plays a key role in how users experience a website.
In modern web development, CSS is essential. A clean, visually appealing design not only attracts users but also improves usability and accessibility. If you want to become a full-stack web developer, enroll in one of our full-stack programs. A web developer course helps you build web applications and software. You can build the UI/UX and connect it to the database and the backend part of it.
This guide, CSS Basics: A Beginner’s Guide to Styling Web Pages, is designed for anyone just starting out with web design and development. You’ll learn what CSS is, how it works, and how to apply it to your own projects. By the end, you’ll have a solid foundation for styling web pages and taking your first steps into front-end development.
What is CSS?
CSS, or Cascading Style Sheets, is a stylesheet language used to describe the look and formatting of a document written in HTML. While HTML handles the structure and content of a web page, CSS defines how that content should appear from fonts and colors to spacing, layout, and more.
How CSS Works with HTML
HTML and CSS work together to build fully styled web pages. HTML creates elements like headings, paragraphs, images, and buttons. CSS then selects those elements and applies styles to them. For example, you can use CSS to make headings bold, change paragraph text to blue, or center images on the page.
Here’s a simple example:
<!-- HTML -->
<p class="intro">Welcome to my website!</p>/* CSS */
.intro {
color: blue;
font-size: 20px;
}In this example, the paragraph uses a class called intro, and the CSS applies a blue color and larger font size to that class.
Separation of Style from Content
One of the key benefits of CSS is that it separates style from content. This means you can keep your HTML clean and focused on structure, while your CSS file handles all the design rules. This separation makes your code easier to maintain, update, and reuse across multiple pages.
By using CSS effectively, developers can create consistent, professional-looking websites that are easier to manage and scale over time.
How CSS is Applied to Web Pages
There are three main ways to apply CSS to HTML: inline, internal, and external. Each method has its own use cases, advantages, and drawbacks. Let’s break them down with simple examples.
1. Inline CSS
Inline CSS is written directly inside an HTML tag using the style attribute.
Example:
<p style="color: red; font-size: 18px;">This is inline styled text.</p>Advantages:
- Quick and easy for small changes
- Doesn’t require an external file
Disadvantages:
- Not reusable
- Makes HTML cluttered and harder to read
- Difficult to maintain and update styles across multiple elements
2. Internal CSS
Internal CSS is written within a <style> tag inside the <head> section of an HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is internally styled text.</p>
</body>
</html>Advantages:
- Useful for single-page styling
- Keeps styles in one place for that specific file
Disadvantages:
- Still mixes style with content
- Not ideal for multi-page websites
- Less efficient than external CSS for larger projects
3. External CSS
External CSS uses a separate .css file, which is linked to the HTML file using a <link> tag in the <head> section.
Example:
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is externally styled text.</p>
</body>
</html>CSS (styles.css):
p {
color: green;
font-size: 18px;
}Advantages:
- Clean separation of content and style
- Reusable across multiple HTML pages
- Easier to manage and update styles in large projects
Disadvantages:
- Requires an additional file
- Slightly slower to load on the first visit due to file linking
CSS Syntax and Selectors
Understanding how to write CSS properly starts with knowing the syntax and how to use selectors to target HTML elements.
Basic CSS Syntax Structure
A CSS rule is made up of a selector and a declaration block.
-
selector { property: value; } Example: p { color: blue; font-size: 16px; }p is the selector (targets all <p> elements).
- color and font-size are properties.
- blue and 16px are the values.
- The entire { … } block is called the declaration block.
Common Selectors
1. Element Selector
Targets all HTML elements of a specific type.
h1 {
color: purple;
}All <h1> tags will be purple.
2. Class Selector
Targets any element with a specific class attribute. Classes begin with a . in CSS.
<p class="highlight">This is a highlighted paragraph.</p>.highlight {
background-color: yellow;
}All elements with class=”highlight” will have a yellow background.
3. ID Selector
Targets a unique element by its id attribute. IDs begin with # in CSS.
<p id="intro">Welcome to the site!</p>#intro {
font-weight: bold;
}Only the element with id=”intro” will be bold.
Grouping Selectors
You can apply the same style to multiple selectors by separating them with commas.
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}This rule applies the same font to all headings from <h1> to <h3>.
Nesting Selectors (Descendant Selectors)
You can target elements that are nested inside others.
<div class="content">
<p>This paragraph is inside a div.</p>
</div>.content p {
color: darkgreen;
}This targets <p> elements only inside elements with the class content.
Styling Text and Fonts
CSS gives you full control over how text looks on a web page. You can change fonts, adjust sizes, tweak spacing, and more all to improve readability and design consistency.
1. Changing Font Family, Size, and Weight
Font Family
You can set the typeface of your text using font-family.
body {
font-family: Arial, sans-serif;
}This sets the entire page to use Arial, and falls back to a generic sans-serif font if Arial isn’t available.
Font Size
Use font-size to control how big the text is.
h1 {
font-size: 32px;
}This makes all <h1> elements have a font size of 32 pixels.
Font Weight
Use font-weight to make text lighter or bolder.
strong {
font-weight: bold;
}Common values: normal, bold, lighter, or numeric (100–900).
2. Color and Text Alignment
Text Color
Set the text color using color.
p {
color: #333333;
}You can use named colors (red), hex codes (#ff0000), or RGB (rgb(255, 0, 0)).
Text Alignment
Control text alignment using text-align.
h2 {
text-align: center;
}Other options: left, right, and justify.
3. Line Height and Letter Spacing
Line Height
Improves readability by controlling vertical spacing between lines.
p {
line-height: 1.6;
}1.5–1.8 is a good range for body text.
Letter Spacing
Controls the space between characters.
h1 {
letter-spacing: 2px;
}Use this sparingly for emphasis or stylistic purposes.
Example Putting It All Together
p.intro {
font-family: Georgia, serif;
font-size: 18px;
font-weight: normal;
color: #444;
text-align: justify;
line-height: 1.6;
letter-spacing: 0.5px;
}<p class="intro">This is a styled paragraph with custom fonts and spacing.</p>Box Model Explained
In CSS, every HTML element is treated as a box. Understanding the box model is key to mastering layout and spacing on web pages.
The box model consists of four layers that surround the content:
1. The Four Parts of the Box Model
Content
The actual text or media inside an element.
Padding
Space between the content and the border. It pushes the border outward.
Border
The outline that wraps around the padding (and content).
Margin
The space outside the border it separates the element from other elements.
2. Visual Representation
Here’s a simple box model illustration using text (for now):
+——————————-+
| Margin |
| +————————+ |
| | Border | |
| | +——————+ | |
| | | Padding | | |
| | | +————+ | | |
| | | | Content | | | |
| | | +————+ | | |
| | +——————+ | |
| +————————+ |
+——————————-+
3. Example Code with Box Model Styling
<div class="box">Hello, Box Model!</div>.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
background-color: lightblue;
}In this example:
- Content width = 200px
- Padding = 20px on all sides adds space inside the box
- Border = 5px wide wraps the padding
- Margin = 30px adds space outside the box
Total width of the element = 200 + (20*2) + (5*2) = 250px
(The margin is outside this calculation it affects spacing with other elements.)
4. How Spacing Affects Layout
- Padding pushes the content inward, often used to add breathing room inside the element.
- Margin pushes the element away from others, controlling external spacing.
- Border can visually separate elements and also adds to the box’s total size.
- Misunderstanding these can lead to layout bugs like overlapping elements or unexpected gaps.
Understanding the box model helps you control how elements are spaced, aligned, and displayed making it a core concept in layout design.
Working with Colors and Backgrounds
CSS gives you flexible options to style your web pages with vibrant colors, eye-catching backgrounds, and beautiful gradients. Let’s break it down.
1. Color Formats in CSS
CSS supports several formats for defining colors. The most common are:
Hex Codes
A 6-digit combination of numbers and letters, starting with #.
color: #ff0000; /* red */
RGB (Red, Green, Blue)
Each color is defined by a value between 0–255.
color: rgb(255, 0, 0); /* red */
HSL (Hue, Saturation, Lightness)
More intuitive for design tweaks.
color: hsl(0, 100%, 50%); /* red */
You can also use named colors like blue, green, or orange.
2. Applying Background Colors and Images
Background Color
Easily add color to any element’s background:
div {
background-color: lightgray;
}Background Image
Use an image as the background:
-
body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }background-size: cover makes the image fill the screen.
- no-repeat prevents tiling.
- center centers the image.
3. CSS Gradients
Gradients create smooth transitions between two or more colors. No images needed!
Linear Gradient
div {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}This creates a left-to-right gradient from coral to peach.
Radial Gradient
div {
background: radial-gradient(circle, #6a11cb, #2575fc);
}A circular gradient from purple to blue.
You can also layer gradients over images for cool effects by stacking backgrounds:
div {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('image.jpg');
background-size: cover;
}Pro Tip: Use contrast wisely for readability. Light text needs a dark background and vice versa.
Positioning and Layout Basics
CSS offers powerful tools to control where elements appear on a page. From simple positioning to modern layout systems like Flexbox, you can design clean and structured layouts with ease. For an academic overview, check out the Rose-Hulman course on CSS layout basics, which covers floats, positioning, and Flexbox fundamentals:
1. CSS Position Property
The position property controls how an element is placed in the document.
Static (default)
div {
position: static;
}- Normal flow (default)
- Elements appear where they are in the HTML
- Can’t be moved with top, left, etc.
Relative
-
div { position: relative; top: 10px; left: 20px; }Moves relative to its original position
- Still takes up space in the layout
Absolute
div {
position: absolute;
top: 0;
left: 0;
}- Removed from normal flow
- Positioned relative to the nearest positioned ancestor (not static)
- If none exists, it’s positioned relative to the <body>
Fixed
div {
position: fixed;
bottom: 10px;
right: 10px;
}- Positioned relative to the viewport
- Stays in place even when the page scrolls (great for sticky menus or “Back to Top” buttons)
2. Flexbox Introduction
Flexbox is a modern CSS layout module designed for arranging items in one dimension (row or column).
Basic Flexbox Example
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>- justify-content: Controls horizontal spacing (e.g., center, space-between, flex-end)
- align-items: Controls vertical alignment (e.g., center, flex-start)
Flexbox is responsive and makes layouts much easier compared to older methods like floats.
3. Basic Layout Examples
Two-column Layout (Flexbox)
.layout {
display: flex;
}
.sidebar {
width: 30%;
background: #ddd;
}
.main {
width: 70%;
background: #f4f4f4;
}<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
</div>Centering with Flexbox
.center-box {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background: #eee;
}<div class="center-box">
<p>Centered Content</p>
</div>Perfect for centering text, buttons, or any content.
CSS Best Practices for Beginners
Learning CSS is more than just writing code it’s also about writing smart, efficient, and manageable styles. Here are some essential best practices every beginner should know.
1. Keep Your Styles Organized
A messy stylesheet makes it hard to debug or scale your site. Try to:
- Group related rules together (e.g., typography, layout, buttons).
- Use consistent indentation and spacing.
- Consider using a naming convention like BEM (Block Element Modifier) for clarity.
Example:
/* Header styles */
.header {
background-color: #fff;
padding: 20px;
}
/* Navigation styles */
.nav-item {
display: inline-block;
margin-right: 10px;
}If your CSS file grows too large, consider splitting it into multiple files and linking them when using tools like Sass or preprocessors.
2. Comment on Your CSS
Use comments to explain complex or important styles. It’ll help you and future developers understand the purpose of certain rules.
/* Center the content box */
.center-box {
display: flex;
justify-content: center;
align-items: center;
}Add section dividers if needed:
/* —————————
Footer Styles
—————————- */
3. Use Developer Tools for Testing
All modern browsers (like Chrome, Firefox, and Edge) come with built-in developer tools.
You can:
- Inspect elements and view applied CSS rules.
- Test style changes live in the browser.
- Debug layout issues (like box model problems).
- See which rule is being overridden.
Shortcut:
Right-click on any element and choose Inspect.
4. Avoid Overusing !important
The !important flag forces a style to override all others. While useful in rare cases, overusing it leads to messy, hard-to-maintain code.
/* Bad practice */
.button {
color: red !important;
}Better solution:
Use more specific selectors or adjust the cascade properly.
/* Better */
.container .button {
color: red;
}In conclusion, this guide on how to learn CSS teaches us how to work with colors, backgrounds, and gradients, and explores practical best practices to keep styles clean and efficient.
Now, the best way to get better is to experiment! Start applying what you’ve learned in your own web projects, play around with different styles, and don’t be afraid to experiment.
