Ready to start your CSS adventure? In our last tutorial quest we learned some basic HTML elements. If HTML is the map of a webpage, you can think of CSS (Cascading Style Sheets) as your wardrobe or adventure armor. CSS is how to add color, spacing, fonts, and layout. In this tutorial, we’ll keep things simple: what CSS is, the three main ways to add it to a page, and a few common properties.
We’ll build on the HTML you just learned and add a little visual polish. Nothing fancy - just enough to see how CSS works.
What is CSS?
CSS tells the browser how your HTML should look. Using selectors, CSS gives rules to the HTML elements.
Example:
selector {
property: value;
}- The selector chooses which HTML elements to style (like h1, p, or button).
- A property changes something (like color or font-size).
- A value sets the specifics (like blue or 20px).
💡 A note on comments: In CSS, comments use /* */ and can span multiple lines.
/* This is a CSS comment
that can stretch across multiple lines. */Three Ways to Use CSS:
Note: we'll cover these options more fully in future tutorials, so don't stress about memorizing details! 😊
1. External stylesheet (recommended for “real” projects)
Link a separate .css file in your HTML’s <head>:
<link rel="stylesheet" href="styles.css">2. Internal stylesheet (great for practicing)
Write CSS inside a <style> tag in the same HTML file:
<style>
h1 {
color: teal;
}
</style>3. Inline style (okay on occasion)
Add a style attribute directly on an element:
<h1 style="color: teal;">Hello</h1>
Selectors: Targeting Specific Elements:
Selectors are like spells — you can cast them on everyone of a certain tag type (such as h1 or p), on a whole party wearing the same crest (.class), or on a single hero with a unique title (#id).
Classes
Classes let you group elements together and style them with the same rules. You add a class attribute in your HTML, then use a . (dot) in your CSS selector. Using the class name "highlight", here is an example:
<h1 class="highlight">Special Heading</h1>
<p class="highlight">This paragraph is also highlighted.</p>.highlight {
color: darkred;
background-color: #fce7f3;
}IDs
IDs are used when you want to uniquely identify one single element on a page such as a specific heading or button. You add an id attribute in your HTML, then use a # (hash) in your CSS selector. Using the id name "submitBtn", here is an example:
<button id="submitBtn">Submit</button>#submitBtn {
background-color: green;
color: white;
padding: 10px 16px;
}Only that one button on the page with the id="submitBtn" will have the styles of a green background color and white text.
When to Use Classes vs. IDs
-
Classes: reusable, can be applied to many elements.
-
IDs: unique, one per page (per ID). Use IDs sparingly.
💡 Tip: Classes are more common than IDs in CSS because of their reusability. Use classes when you want to style groups of elements consistently, and only use an ID if you really need to.
Common CSS properties:
- Colors: color, background-color
- Values can added using common color names like red, darkblue, teal, etc, hex codes such as #01303f, or rgb format rgb(14,165,233).
- Fonts: font-family, font-size, font-weight, line-height
- Spacing: margin (outside space), padding (inside space)
- Layout helpers: width, height, text-align
- Units: pixels (px) and relative units such as rem are common
Example:
html {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
h1 {
color: teal;
font-size: 2rem; /* relative unit */
}
p {
line-height: 1.6;
margin-bottom: 1rem;
}
a {
color: #2563eb; /* hex color */
text-decoration: none;
}
button {
padding: 10px 14px;
background-color: #e5e7eb;
color: #1f2937;
}
A Note About the Universal Selector
The universal selector is like casting a world-wide enchantment. It's powerful and should be used with caution so that you don't enchant things you don't want to. It matches every element. It’s handy for global resets or quick demos, but use it sparingly in production.
/* Apply the same font to everything (use with care) */
* {
font-family: Arial, sans-serif;
}
Practice Time!
Building off of the simple HTML template from the last tutorial, let's add some styling to our elements in the CSS tab within CodePen.
In CodePen, you can put HTML in the HTML panel and CSS in the CSS panel. CodePen hides the boilerplate (<!DOCTYPE html>, <html>, <head>, <body>) so you can focus directly on your HTML/CSS/JS. That’s why it’s great for testing and beginners.
See the Pen Get Stylish With CSS by Side Quest Studios (@sidequestxp) on CodePen.
💡 Tip: In serious projects, you'll move your CSS into a separate styles.css file and link it with <link rel="stylesheet" href="styles.css"> like we mentioned in example #1 earlier in this tutorial.
Bonus Tip: Basic Specificity
If two rules target the same element, the browser chooses based on specificity. In simple terms: inline styles > IDs > classes/attributes > tags.
You don’t need to memorize this yet, but it helps explain why a class rule might override a tag rule.
/* Both target h1, but the class is more specific */
h1 {
color: teal;
}
.title-strong {
color: purple;
}
/* In HTML: */
<h1 class="title-strong">This will be purple</h1>Summary
Congratulations adventurer! You just earned some XP and leveled up your knowledge with some basics about CSS!
- What CSS is and how it pairs with HTML
- Three ways to add CSS (external, internal, inline)
- Common properties for colors, fonts, spacing, and layout
- A quick overview of the universal selector and specificity
Next up, we’ll add some interactivity (real world magic!) to our elements with JavaScript!