CBS Docs | CSS

1. The Basics: What exactly is CSS?

CSS stands for Cascading Style Sheets. Think of building a website like building a person: HTML is the skeleton that holds everything up, and CSS is the skin, clothes, and makeup! It tells the web browser exactly how your page should look.

If we only used HTML, every website on the internet would just look like a boring, black-and-white text document from the 1990s. By learning CSS, you are giving yourself the power to be an artist. You get to decide the colors, the spacing, the sizes, and where everything sits on the screen.

How to Add CSS to Your HTML

You can add style to your website in three different ways. The External CSS method is what the pros use, and it is what we will focus on as you grow as a developer!

Inline CSS: This is a quick, emergency style added directly inside a single HTML tag (using the style attribute). It gets very messy if you use it too much!
Internal CSS: This is a style block written inside the <style> tag at the very top of your HTML file (in the <head> section). It's okay for small, single-page projects.
External CSS (Best!): This is a completely separate .css file that you link to your HTML. It keeps your code super clean, and you can use one CSS file to style hundreds of HTML pages at once!

Linking Your CSS File

To use that separate CSS file, we have to tell our HTML file where to find it. We do this inside the <head> tag of the HTML document.

<head>
    <!-- This tells your HTML where to find its clothes! -->
    <link rel="stylesheet" href="style.css">
</head>

Line-by-line breakdown:

<link>: This tag creates a connection between your HTML and an outside file.
rel="stylesheet": This tells the browser the relationship. It says, "Hey, the file I am linking is a stylesheet."
href="style.css": This is the exact name and path of your CSS file.

How to Write CSS (The Syntax)

Writing a CSS rule is basically like giving a command to a specific part of your page. You pick a selector (who you want to style) and give it a declaration (what you want it to wear).

h1 {
    color: blue;
    font-size: 24px;
}

Line-by-line breakdown:

h1 {: The selector. This means we are targeting all main heading tags on the page. We open the curly brace to start our list of rules.
color: blue;: The property is color, and the value is blue. We always end a rule with a semicolon (;) so the browser knows the rule is finished.
font-size: 24px;: This rule tells the text to grow or shrink to exactly 24 pixels tall.
}: The closing curly brace tells the computer we are done styling the h1 tags.

In plain English: "Hey h1 tags! Turn blue and grow to 24 pixels tall!"

2. CSS Selectors (Target Practice)

Selectors are how you aim your styling at specific pieces of your HTML. Think of it like a mailing address for your code.

If you want to deliver a pizza (a specific style) to a specific house (an HTML element), you need a way to tell the delivery driver exactly where to go. That is what selectors do!

The Element Selector

This targets every single tag of that type on your whole page. It's like sending a letter to "Everyone named John."

p {
    line-height: 1.5; 
}

Line-by-line breakdown:

p {: We are selecting every single paragraph tag on the webpage.
line-height: 1.5;: This adds space between the lines of text making it much easier to read.

The Class Selector (.)

Want to style a specific group of things without affecting everything else? Give them a class! Classes start with a dot (.) in CSS and can be reused as many times as you want on different elements.

.highlight-text {
    background-color: yellow; 
}

Line-by-line breakdown:

.highlight-text {: The period means we are looking for a class attribute named "highlight-text".
background-color: yellow;: Any HTML tag that has this class will get a yellow background, just like a highlighter marker!

The ID Selector (#)

IDs are for unique, one-of-a-kind elements on your page. Like a student ID number, only one element can have it. IDs start with a hashtag (#) in CSS.

#main-header {
    text-align: center; 
}

Line-by-line breakdown:

#main-header {: The hashtag means we are targeting an HTML tag that has the exact id="main-header".
text-align: center;: This pushes whatever is inside that specific element directly to the middle of the screen.

Grouping Selectors

Save time by styling multiple things at once! Instead of writing the same code three times, just separate your selectors with a comma.

h1, h2, h3 {
    font-family: Arial, sans-serif; 
}

Line-by-line breakdown:

h1, h2, h3 {: This tells the browser to apply the following rules to all three of these heading tags at the exact same time.
font-family: Arial, sans-serif;: This changes the font. If the computer doesn't have Arial, it falls back to a standard sans-serif font.

3. Painting Your Website (Colors)

Time to add some life to your page! You can change the color of text, borders, and entire backgrounds. Without color, the web is pretty boring.

We use colors to guide the user's eye. A bright red button might mean "Delete", while a calm green button might mean "Save".

How to Talk About Colors

Computers understand colors in a few different languages. You can pick whichever one you like best!

Color Names: Simple English words. There are exactly 140 named colors in CSS (like red, blue, tomato, or dodgerblue).
HEX Codes: A 6-character secret code used heavily by designers (like #FF0000 for pure red, or #1e293b for dark slate). Don't worry, you never have to memorize these; we use color pickers to find them!
RGB: This stands for Red, Green, and Blue. It works by mixing those three light colors together on a scale from 0 to 255 (like rgb(255, 0, 0)).

p {
    color: #475569; 
}

Line-by-line breakdown:

color:: This specifically changes the color of the text (not the background).
#475569;: This is a Hexadecimal code that creates a nice, modern slate gray color instead of the harsh default black.

Backgrounds

You can paint the background solid, or even use a picture! This is how websites get big beautiful hero images at the top of their pages.

body {
    background-color: #f8fafc; 
    background-image: url('pattern.png'); 
    background-size: cover; 
}

Line-by-line breakdown:

background-color: #f8fafc;: Sets a soft off-white fallback color behind everything on the whole webpage.
background-image: url('pattern.png');: Tells the browser to load an image named 'pattern.png' and put it on the background.
background-size: cover;: This is a magic trick! It forces the image to stretch and scale perfectly so it covers the entire screen without looking squished.

4. The Box Model (Crucial!)

Here is a secret that will make CSS make total sense: Every single thing on a webpage is just a square box. Buttons are boxes, paragraphs are boxes, even circular images are actually just square boxes with rounded corners!

The "Box Model" is how we measure and space out those boxes. Think of it exactly like a framed picture hanging on a wall in your house.

The 4 Layers of a Box

Content: The actual stuff inside the box. In our analogy, this is the photograph itself.
Padding: The space inside the box to protect the content. This is like the white cardboard matting inside a picture frame that keeps the photo away from the wooden edges.
Border: The actual wall of the box. This is the wooden picture frame itself.
Margin: The personal space outside the box that pushes other boxes away. This is how much empty wall space you leave between this picture frame and the next one.

.my-box {
    width: 300px;
    padding: 20px;       
    border: 2px solid black; 
    margin: 50px;        
}

Line-by-line breakdown:

width: 300px;: We are forcing the content area of the box to be exactly 300 pixels wide.
padding: 20px;: This adds 20 pixels of comfortable breathing room inside the box, so the text doesn't touch the walls.
border: 2px solid black;: This draws a visible wall around our box. It is 2 pixels thick, a solid line, and colored black.
margin: 50px;: This creates an invisible forcefield outside the box, pushing all other elements on the webpage 50 pixels away so things don't get crowded.

5. Typography (Making Text Look Good)

Nobody likes reading ugly, cramped text. Good typography is usually what separates a beginner website from a professional one. It makes your website readable and pleasant to look at.

We have a bunch of tools in CSS to control exactly how our words look, from the font style down to the exact spacing between the letters.

The Big Four Font Rules

body {
    font-family: 'Inter', sans-serif; 
    font-size: 16px;                  
    font-weight: 400;                 
    line-height: 1.6;                 
}

Line-by-line breakdown:

font-family: 'Inter', sans-serif;: We are telling the browser to use a beautiful font called 'Inter'. The 'sans-serif' acts as a backup plan just in case 'Inter' fails to load.
font-size: 16px;: This sets the base size of all our normal text. 16px is the golden standard for reading on the web!
font-weight: 400;: This controls how thick the letters are. 400 is standard normal text, while 700 is a heavy bold font.
line-height: 1.6;: This creates vertical space between sentences. A value of 1.6 gives your paragraphs plenty of room to breathe, preventing eye strain.

Cool Text Tricks

a {
    text-decoration: none; 
}

h1 {
    text-transform: uppercase; 
}

Line-by-line breakdown:

a {: We are targeting all the link tags on the page.
text-decoration: none;: Links naturally have a blue underline. This rule completely strips that underline away for a cleaner look.
h1 {: We are targeting main headings.
text-transform: uppercase;: This forces the text to render in ALL CAPS on the screen, even if you typed it in lowercase in your HTML file!

6. Flexbox (Easy Layouts)

In the old days of the internet, putting two boxes next to each other was an absolute nightmare. We had to use crazy math and broken techniques. Now, we have Flexbox!

Flexbox is a magical tool for arranging items in a single row or a single column. Think of it like beads on a string; you can slide them, space them out, or bunch them together perfectly.

Turning on Flexbox

To use this magic, you have to find the parent container (the big box that holds the smaller items inside it) and put display: flex on it.

.navbar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;            
}

Line-by-line breakdown:

display: flex;: This flips the switch! The .navbar is now a flex container, and all the items inside it will immediately sit in a nice horizontal row.
justify-content: space-between;: This handles left-to-right spacing. It grabs the first item and pins it to the far left, grabs the last item and pins it to the far right, and spreads the rest out.
align-items: center;: This handles up-and-down spacing. It perfectly centers the items vertically so they don't look awkwardly tall or misaligned.

Spacing Things Out (Justify-Content)

flex-start: Everyone hugs the left wall (this is the default).
center: Everyone groups up tightly in the exact middle.
space-between: Pushes the first and last items to the edges, and spaces the rest evenly.
space-evenly: Perfectly equal gaps around every single item, like evenly spaced fence posts.

7. CSS Grid (Advanced Layouts)

If Flexbox is for making a single line of items, CSS Grid is for making a whole chessboard! It lets you build highly complex layouts with both rows and columns at the exact same time.

Grid is perfect for things like photo galleries, dashboard layouts, or the main structure of your entire webpage. You literally get to draw invisible lines on the screen and tell your boxes which cells to sit inside.

Building a Grid

.grid-container {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 20px; 
}

Line-by-line breakdown:

display: grid;: Just like Flexbox, we have to flip the switch on the parent container to turn Grid mode on.
grid-template-columns: 1fr 1fr 1fr;: This is where we draw the lines! We are telling the browser to chop the container into 3 perfectly equal vertical columns.
gap: 20px;: This puts a very neat 20px space between all the items, acting like a gutter so they don't touch each other.

Note: fr stands for "fraction". So 1fr 1fr 1fr means "divide the screen into 3 equal pieces!" If we wrote 2fr 1fr, the first column would be twice as big as the second!

8. Mobile-Friendly (Responsive Design)

Your website might look absolutely beautiful on a massive laptop screen, but what happens when someone opens it on a tiny iPhone? Without responsive design, it will look completely broken!

We use something called Media Queries to fix this. They act like smart sensors that detect the size of the user's screen and change our CSS rules on the fly to make things fit.

Writing a Media Query

Think of it like an "If-Statement" for screens. "IF the screen shrinks below 768 pixels wide, run this specific block of code instead."

/* 1. Default Laptop Style */
.sidebar {
    width: 250px;
    display: block;
}

/* 2. The Mobile Style Override! */
@media (max-width: 768px) {
    .sidebar {
        width: 100%; 
        display: none; 
    }
}

Line-by-line breakdown:

.sidebar { width: 250px; }: Normally, on a big screen, our sidebar is 250 pixels wide.
@media (max-width: 768px) {: The sensor activates! This tells the browser to only read the code inside these brackets if the screen is 768px wide or smaller (like a tablet or phone).
width: 100%;: We override the old rule! We stretch the sidebar to take up the full width of the tiny screen.
display: none;: Actually, sidebars take up too much room on phones. This rule hides it completely until the user taps a menu button to bring it back!

9. Making Things Move (Animations)

CSS lets you bring your website to life with smooth movements and fun hover effects! A static page is okay, but a page that reacts when you interact with it feels premium and modern.

We can use simple transitions for quick reactions, or full keyframe animations for longer, looping movements.

Hover Transitions (Smooth Changes)

Transitions act like a brake pedal; they make sudden changes happen smoothly over time. They are absolutely perfect for making buttons change color or grow slightly when you hover your mouse over them.

.btn {
    background-color: blue;
    transition: background-color 0.3s ease; 
}

.btn:hover {
    background-color: darkblue; 
}

Line-by-line breakdown:

transition: background-color 0.3s ease;: We place this on the normal button state. We are telling the browser: "If my background color ever changes, don't do it instantly. Take 0.3 seconds to ease into the new color."
.btn:hover {: This special :hover selector only activates when the user's mouse cursor is physically touching the button.
background-color: darkblue;: This is the new color we want. Because of the transition rule above, it will slowly fade from blue to dark blue!

Keyframe Animations (Mini-Movies)

For complex animations that happen automatically without clicking or hovering (like a loading spinner or text sliding onto the screen), we use @keyframes.

/* 1. Write the script for the movie */
@keyframes fade-in {
    from { opacity: 0; } 
    to { opacity: 1; }   
}

/* 2. Play the movie on an element! */
.welcome-text {
    animation: fade-in 2s forwards; 
}

Line-by-line breakdown:

@keyframes fade-in {: We are creating a new custom animation named "fade-in".
from { opacity: 0; }: This is frame 1 of our movie. The element starts completely invisible (opacity 0).
to { opacity: 1; }: This is the final frame. The element becomes fully solid and visible (opacity 1).
animation: fade-in 2s forwards;: Finally, we apply our movie to the .welcome-text class. We tell it to play "fade-in", make it last exactly 2 seconds, and the word forwards ensures it stays visible at the end instead of resetting!

Welcome to CSS Styling!

1. The Basics: What exactly is CSS?

How to Add CSS to Your HTML

Linking Your CSS File

How to Write CSS (The Syntax)

2. CSS Selectors (Target Practice)

The Element Selector

The Class Selector (.)

The ID Selector (#)

Grouping Selectors

3. Painting Your Website (Colors)

How to Talk About Colors

Backgrounds

4. The Box Model (Crucial!)

The 4 Layers of a Box

5. Typography (Making Text Look Good)

The Big Four Font Rules

Cool Text Tricks

6. Flexbox (Easy Layouts)

Turning on Flexbox

Spacing Things Out (Justify-Content)

7. CSS Grid (Advanced Layouts)

Building a Grid

8. Mobile-Friendly (Responsive Design)

Writing a Media Query

9. Making Things Move (Animations)

Hover Transitions (Smooth Changes)

Keyframe Animations (Mini-Movies)