01 CSS Basics
HTML describes content, while CSS controls how it looks. Link style.css in the head of index.html. Read each rule as: select these elements → change this property → use this value → the browser renders the result.
h1 { color: #1d4ed8; }
.site-title { font-size: 2rem; }
A CSS rule has a selector, a property, and a value. In .project-card { padding: 1rem; }, .project-card selects matching elements, padding names what changes, and 1rem is the value. The browser applies that rule and renders inner space around the content.
Link an external stylesheet once inside the head of index.html: <link rel="stylesheet" href="style.css">. The browser then reads both files.
↳Keep source files separate: Save changes in style.css, then refresh the browser unless Live Server refreshes it for you. A temporary edit in DevTools does not automatically save to your file.
Element selectors and class selectors<article class="project-card">
...
</article>
h1 { color: #1d4ed8; }
.project-card { padding: 1rem; }
body, nav, and h1 are element selectors. In HTML, class="project-card" names a reusable group; in CSS, .project-card selects elements with that class. The dot means “select this class.”
Typography and colorbody {
font-family: Arial, sans-serif;
line-height: 1.6;
background: #f4f7fb;
}
a { color: #1d4ed8; }
Use color, background, font-family, font-size, and line-height to make content readable before adding decoration.
02 The Box Model
Read one element from the inside out: content → padding → border → margin. Padding is space inside the border; margin is space outside it between neighboring elements.
.project-card { padding: 1rem; margin: 1rem 0; border: 1px solid #cbd5e1; }
The box model.card {
box-sizing: border-box;
padding: 1rem;
margin: 1rem 0;
border: 1px solid #cbd5e1;
border-radius: 0.75rem;
}
Read outward from content: padding creates space inside the border, the border is the edge, and margin creates space outside it between neighboring elements.
Margin — outer spaceBorder — edgePadding — inner spaceContent
03 Flexbox
Navigation links such as Home, About, and Projects naturally follow normal HTML flow. When you want them arranged as one navigation row, make their nav parent a flex container with display: flex. Its direct link children can then be arranged along a main direction: gap adds space between them, justify-content distributes them along that main direction, and align-items lines them up across it.
nav { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }
Build one Flexbox navigation rule step by stepnav { display: flex; }
nav { gap: 1rem; }
nav { justify-content: space-between; }
nav { align-items: center; }
Start with display: flex: nav becomes the flex container and its direct links can form a row. Add gap: 1rem for space between links. Then justify-content: space-between spreads them along the main axis, while align-items: center aligns them on the cross axis. The complete rule combines these decisions; the same HTML and stylesheet remain in use on a small screen.
↕ Cross axis — align-items lines links upHomeAboutProjects
↔ Main axis — justify-content distributes links 04 CSS Grid
Imagine several project cards: two in one row and two below them. Flexbox is useful when you are mainly arranging items along one direction; Grid is a useful beginner model when you want rows and columns. First make .projects-grid a grid container with display: grid, then use grid-template-columns: repeat(2, 1fr) for two equal columns. Here 1fr means one equal share of the available space, and gap adds space between cards.
.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
05 Responsive Design & DevTools
The same HTML and CSS file can produce a different layout when the viewport—the visible width of the browser page—changes. A matching @media rule applies only for that viewport; @media (max-width: 768px) means 768 pixels wide or narrower, not a new page. DevTools are browser tools that let you inspect the displayed HTML and CSS, then temporarily experiment before saving a useful correction in style.css.
@media (max-width: 768px) { nav { flex-direction: column; } }
DevTools: inspect, experiment, then save.project-card {
padding: 16px;
}
DevTools are tools built into your browser for viewing the displayed page. Right-click a project card and choose Inspect; the browser opens DevTools and selects that card in Elements, which shows the HTML. In Styles, find .project-card and temporarily change padding: 16px to padding: 32px. The inner space grows immediately. Computed shows the final value the browser is using. Refresh to remove the experiment, or copy the value you like into style.css, save it, and refresh. DevTools is for inspection and experimentation, not a replacement for your editor.
Read and debug CSS one deliberate step at a time
- Find the HTML elementStart with the exact element you want to style in
index.html or DevTools. - Find its selectorDecide whether an element selector such as
h1 or a class selector such as .project-card targets it. - Name one property and valueAsk what you are changing and what value you are giving it: for example,
padding: 1rem. - Confirm the stylesheet connectionCheck that
style.css is linked from index.html and that both files are saved. - Use DevTools as evidenceInspect the element and see whether the expected rule appears in Styles or another value is being applied.
- Keep experiments temporary until savedChange one small rule in DevTools to test an idea, then copy a useful change into
style.css. Refreshing removes DevTools-only changes.
Common CSS first steps
- DevTools changed my source fileDevTools is temporary. Put the final fix in
style.css, save it, and refresh the page. - The stylesheet is not connectedCheck that the
link is in head and that href="style.css" matches the saved file name. - The class selector does not match HTMLA rule such as
.project-card works only when the HTML has class="project-card". Check spelling exactly. - Forgetting the dot for a class selector
project-card selects an HTML element with that name; .project-card selects a class. - Confusing padding and marginPadding creates space inside the border around content. Margin creates space outside the border between elements.
- Inspecting the wrong elementUse Inspect to select the element you intended before deciding that a rule is missing or ignored.
- Treating a media query as a separate pageA media query changes which rules apply for a viewport. It does not create a second mobile HTML page.
