Hey fellow dev! Today, we’re diving into the amazing—yes, truly amazing—world of CSS. We’ll learn how to apply it to your HTML and make your website look spectacular!
What is CSS?
So, if you’ve worked with HTML before, you already know that it’s responsible for the structure of a web page. (If not, here’s an article to get you started.) However, things like styling, colors, font types, sizes, borders, and more can't be handled by HTML alone — and that’s where CSS comes into play.
CSS stands for Cascading Style Sheets. With CSS, you can control how your website looks. You can add brand colors, smooth animations, transitions, and much more — all by using CSS.
The main way CSS works is by selecting an HTML element on your page and applying specific styles to it—these styles are called rules. Here’s an example of what CSS might look like for a heading element:
h1 {
color: blue;
font-size: 32px;
}
Internal CSS vs External CSS: What's the Difference?
When it comes to adding styles, developers have a few choices for how they can apply them. There are three main ways to add styles to an HTML document: inline, internal, and external.
Let me demonstrate each one.
👉 Inline Inline styling simply means adding a style attribute directly to an HTML tag, and writing the necessary CSS rules inside it.
<p>Element with no CSS</p>
<h1 style="color: blue;">I have my own styles</h1>
As you can see, it’s called inline because the CSS rule is written inside the HTML tag itself.
👉 Internal This type of CSS can be applied to an entire single page of your website — but only to the page where the styles are defined. Here’s what it looks like:
<!DOCTYPE html>
<html>
<head>
<!--Other code-->
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>I have styles too!</h1>
</body>
</html>
As you can see, styles are added by placing a <style> tag inside the <head> section of your HTML document. All the styles you define there will be applied to the corresponding elements on that page only.
👉 External
And here is the last method of applying CSS to HTML. In this approach, you create a completely separate file with the .css extension, for example, style.css. Inside this file, you can specify rules for all the necessary elements. The syntax is similar to that of internal CSS.
/* style.css file */
h1 {
color: red;
}
One important thing to keep in mind: your HTML file does not know about the existence of your CSS file yet. So, you have to link it in your HTML file by adding a reference inside the <head> section:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>I am stylish too!</h1>
</body>
</html>
The href attribute specifies the path where your style.css file is located.
You can combine all of these methods together. We will talk about which styles take precedence later in the article. Personally, I always prefer using an external CSS file because it’s a cleaner way to work — it keeps HTML and CSS separate, which improves readability.
Selectors: Classes ids and tags.
Let’s talk about how we can actually select the necessary elements and apply styles to them. We use the word selectors to refer to elements represented in a stylesheet. There are multiple types of selectors:
👉 Tags (Element selectors)
👉 Classes
👉 IDs
👉 Universal selector
👉 Relative selectors
Tag Selectors Tags are the simplest type of selector — you just use the HTML tag name.
p {
border: 2px solid red;
}
span {
color: white;
}
Be careful when using tag selectors, because they will select all elements of that type on the page or website (depending on where you link your CSS), and all those elements will receive the same styles.
classes or IDs. These are HTML attributes that look like this:
<!-- HTML file -->
<p id="my-unique-paragraph" class="simple_class">Hey</p>
<a class="links">Link me 1</a>
<a class="links">Link me 2</a>
Now you can use class and ID selectors to apply styles to your page. Use # to refer to IDs and . to refer to classes:
#my-unique-paragraph {
color: white;
}
.links {
font-size: 15px;
}
When to use classes vs IDs?
The biggest difference is that you can have as many elements with the same class as you want, while IDs should be unique and used for only one element on the page.
Box Model and Basic Properties
So, let’s talk about the syntax of CSS. There are a few key components:
👉 A selector (such as a tag, ID, or class)
👉 A set of rules, which contain property-value pairs
Let’s look again at an example:
p {
font-size: 20px;
font-weight: bold;
color: black;
text-align: center;
margin: 20px;
padding: 30px;
border: none;
}
You might notice a few new properties, like margin and padding. These are part of the CSS Box Model.
The Box Model treats every element as a rectangular box made up of:
👉 Content (the text or element itself)
👉 Padding (space inside the border)
👉 Border
👉 Margin (space outside the border)
In the code above, we’re setting the margin to 20px and the padding to 30px, which controls the spacing outside and inside the element’s border, respectively.
I highly recommend experimenting with CSS styling. Here you can find a list of some of the most common properties you might find interesting
Also, I want to mention that CSS introduced Flexbox and Grid layouts, which make positioning elements much easier. I’ll be covering both topics in upcoming posts, so stay tuned for new content!
How CSS Decides What Styles to Apply?
Previously, I mentioned the three main ways to apply CSS rules to your HTML page. The thing is, each method has its own level of precedence. Even selectors like classes and tags follow a specific order of priority.
Let’s take a look at how this CSS hierarchy works. But to put it simply: the higher the precedence, the more likely that rule will be applied.
For example, an ID selector has higher precedence than a class selector.
So if a class sets the text color to black, but an ID sets it to blue — guess which one will be displayed?
That’s right: blue, because the ID rule overrides the class.
CSS Practice Exercise: Build and Style a Simple Profile Card
Use HTML and CSS to create and style a profile card that includes an image, name, job title, and a short description. This exercise helps you practice selectors, layout, fonts, spacing, and basic styling.
🧱 Step-by-Step Instructions
✅ Create an HTML structure with the following elements:
🗸 A container <div> with a class like .card
🗸 An image (<img>) for the profile picture
🗸 A heading (<h2>) for the name
🗸 A paragraph (<p>) for the job title
🗸 A second paragraph for a short bio
✅ Write CSS in a separate style.css file or inside a <style> tag:
🗸 Set the width and padding of the card
🗸 Add a background color and border radius
🗸 Center the text and image
🗸 Style fonts (size, color, weight)
🗸 Add margin and spacing between elements
🗸 Add a hover effect (e.g., change background or shadow)
Bonus Challenge
✅ Add a **button** that says “Contact” or “Follow” and style it with hover effects.✅ Use Flexbox to center content vertically and horizontally.
✅ Make the card responsive using media queries.
Happy styling! 🎨
💬 Comment Section