Learn how HTML and CSS work together to create and design webpages.
Written by Admin Updated 20 min read
Learning Path
Create a webpage with HTML → Combine HTML and CSS → Learn CSS in detail
Introduction to HTML and CSS
HTML and CSS are two fundamental technologies used to create and design webpages.
HTML provides the structure and content of a webpage, while CSS controls its appearance and presentation.
In the previous tutorial, you learned how to create a basic HTML webpage. In this tutorial, you will learn how to add CSS to that webpage and make it look better.
What You Will Learn
- What HTML and CSS do
- How HTML and CSS work together
- Basic CSS syntax
- Inline, internal and external CSS
- How to connect CSS to HTML
- How to change colors, fonts and text alignment
- How to create a simple HTML and CSS project
Before You Start
You should know the basic HTML concepts before starting this tutorial.
If you are completely new to HTML, first complete:
How to Create a Basic Webpage1. What Are HTML and CSS?
HTML Creates the Structure
HTML stands for HyperText Markup Language.
HTML defines the content and structure of a webpage.
<h1>My Website</h1>
<p>Welcome to my website.</p>
<a href="https://example.com">Visit Website</a>CSS Controls the Appearance
CSS stands for Cascading Style Sheets.
CSS controls how HTML elements look.
h1 {
color: blue;
}Easy Way to Remember
HTML
Structure and content
CSS
Appearance and presentation
2. See an HTML Page Without CSS
Create a file named
index.html
and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>My Website</h1>
<p>Welcome to my website.</p>
<h2>About Me</h2>
<p>I am learning HTML and CSS.</p>
</body>
</html>Open the file in a browser. The page will display the content, but it will look very basic.
3. Add CSS to the Webpage
Now let's use CSS to change the appearance of the webpage.
h1 {
color: blue;
}
p {
color: gray;
font-size: 18px;
}The HTML content remains the same, but CSS changes how the content appears.
4. Understanding Basic CSS Syntax
A CSS rule generally looks like this:
selector {
property: value;
}For example:
h1 {
color: blue;
}| Part | Example | Purpose |
|---|---|---|
| Selector | h1 |
Selects the element |
| Property | color |
Specifies what to change |
| Value | blue |
Specifies the change |
5. Three Ways to Add CSS
5.1 Inline CSS
Inline CSS is written directly inside an HTML element.
<h1 style="color: blue;">
My Website
</h1>5.2 Internal CSS
Internal CSS is written inside a
<style> element.
<style>
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>5.3 External CSS
External CSS is stored in a separate CSS file.
<link rel="stylesheet"
href="style.css">6. Connect HTML and CSS
Create two files:
index.htmlstyle.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Website</h1>
<p>Welcome to my website.</p>
</body>
</html>style.css
h1 {
color: blue;
}
p {
color: orange;
font-size: 18px;
}Your project should now look like this:
my-website/
│
├── index.html
└── style.css7. Styling Text with CSS
Change Text Color
h1 {
color: blue;
}Change Background Color
body {
background-color: lightgray;
}Change Font Size
p {
font-size: 18px;
}Change Font Family
body {
font-family: Arial, sans-serif;
}Align Text
h1 {
text-align: center;
}8. Create Your First HTML + CSS Project
Let's create a simple personal webpage.
Project Structure
personal-website/
│
├── index.html
└── style.cssindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>My Personal Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Personal Website</h1>
<p>
Welcome to my personal website.
I am learning HTML and CSS.
</p>
<h2>About Me</h2>
<p>
I am learning how to create webpages using HTML
and style them using CSS.
</p>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Contact</h2>
<p>
Email: example@example.com
</p>
</body>
</html>style.css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: blue;
text-align: center;
}
h2 {
color: #333333;
}
p {
color: #555555;
font-size: 18px;
}
li {
font-size: 17px;
}9. Practice: Change the Webpage Yourself
Practice is one of the best ways to learn CSS. Try changing the examples yourself.
Change the heading color:
h1 {
color: green;
}body {
background-color: lightblue;
}p {
font-size: 20px;
}p {
text-align: center;
}10. Common Beginner Mistakes
If your HTML contains:
<link rel="stylesheet"
href="style.css">
your CSS file should be named
style.css.
If both files are in the same folder:
personal-website/
│
├── index.html
└── style.cssuse:
<link rel="stylesheet"
href="style.css">Correct:
h1 {
color: blue;
}Make sure every CSS rule has opening and closing braces.
11. HTML vs CSS
| HTML | CSS |
|---|---|
| Defines webpage structure | Controls webpage appearance |
| Creates headings | Changes heading appearance |
| Creates paragraphs | Changes text appearance |
| Creates links | Changes link appearance |
| Provides content | Provides styling |
12. What You Have Learned
In this tutorial, you learned how HTML and CSS work together.
- HTML creates webpage structure
- CSS controls webpage appearance
- Basic CSS syntax
- Inline CSS
- Internal CSS
- External CSS
- Connecting CSS to HTML
- Basic text and background styling
- Creating a simple HTML and CSS project
What's Next?
You now understand how HTML provides the structure of a webpage and how CSS changes its appearance.
The next step is to learn CSS in greater detail.
You will learn CSS selectors, the Box Model, spacing, positioning, Flexbox, CSS Grid, responsive design, media queries, transitions and animations.
Continue to CSS TutorialHTML and CSS Learning Path
Create a Basic Webpage
Learn the fundamentals of HTML and create your first webpage.
Start HTMLHTML and CSS
Learn how HTML and CSS work together.
You Are HereFrequently Asked Questions
!importantoverrides almost all rules.- Inline Styles (1000 points)
- IDs (e.g.,
#header) (100 points) - Classes (e.g.,
.btn), Attributes (e.g.,[type="text"]), & Pseudo-classes (e.g.,:hover) (10 points) - Elements (e.g.,
div,p) & Pseudo-elements (e.g.,::before) (1 point)
Method 1: Flexbox (Recommended)
.parent {
display: flex;
justify-content: center; /* Horizontal */
align-items: center; /* Vertical */
}.parent {
display: grid;
place-items: center;
}.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- Flexbox: 1-Dimensional layout system. Best for arranging elements along a single row or column (e.g., navigation bars, button sets).
- Grid: 2-Dimensional layout system. Best for structuring complex multi-row and multi-column web page layouts.
static: Default positioning following normal document flow.relative: Positioned relative to its normal position without removing it from document flow.absolute: Removed from document flow and positioned relative to its nearest non-static parent.fixed: Removed from document flow and anchored to the viewport window (doesn't move when scrolling).sticky: Behaves likerelativeuntil a specified scroll threshold is reached, then sticks likefixed.
display: none: Completely removes the element from the page rendering. It takes up no space in the layout.visibility: hidden: Hides the element visually, but it still reserves its space in the layout structure.
content-box), an element's total width is width + padding + border. Setting box-sizing: border-box forces padding and border to be included inside the defined width, preventing layout breakage:
* {
box-sizing: border-box;
}px: Fixed, absolute pixel value.em: Relative to thefont-sizeof its parent element.rem: Relative to thefont-sizeof the root (<html>) element (usually 16px).%: Relative to the parent container's dimension.vw/vh: Relative to 1% of the viewport's total width or height.
<head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">min-width breakpoints:
/* Base Mobile Styles */
body { font-size: 14px; }
/* Desktop Screens */
@media (min-width: 768px) {
body { font-size: 18px; }
}- Pseudo-classes (
:): Select elements based on a specific state (e.g.,:hover,:focus,:nth-child()). - Pseudo-elements (
::): Style a specific part of an element (e.g.,::before,::after,::first-letter).
- CSS Reset: Strips away all default browser styles (margins, paddings, list bullets) to a completely clean baseline.
- Normalize.css: Preserves useful default browser styles while fixing cross-browser rendering inconsistencies.
- Minify CSS files to remove extra whitespace and comments.
- Purge unused CSS rules from your final production stylesheet.
- Inline critical above-the-fold CSS and load non-critical stylesheets asynchronously.
- Avoid heavy
@importrules inside CSS files; use HTML<link>tags to enable parallel downloads.
Conclusion
HTML and CSS work together to create webpages. HTML provides the structure, while CSS provides the style.
If you have completed the previous HTML tutorial, this tutorial gives you the next step: taking a basic HTML webpage and applying CSS to it.
Keep experimenting with small changes to your HTML and CSS. Change colors, fonts, sizes and alignment, save the files, refresh the browser and observe the result.
Once you are comfortable with these basics, continue with the CSS Tutorial for Beginners .