CSS Crash Course (For Absolute Beginners)

Introduction

• This is for absolute beginners—no overwhelming syntax dumps, just concepts you can imagine and understand through audio.
• Think of a website like a person:
  • HTML = the skeleton (bones) that give structure.
  • CSS = the appearance (flesh, hair, eyes, clothing).
  • JavaScript = the brain, allowing interactivity and thought.

What is CSS?

• CSS = Cascading Style Sheets.
• Controls how HTML looks—colors, fonts, spacing, layouts.
• Without CSS, a website looks like plain text and blocks. With CSS, it becomes polished, styled, and visually engaging.

Where does CSS go?

• CSS can be placed inside of its own files with the .css extension - these are referred to as stylesheets
• Nest it inside a <style> element in your HTML
• Placed inside a style attribute on your HTML element

How CSS works

• At a high level, CSS selects HTML elements and then styles them accordingly with spacing, layout, colors, positioning, and much more.
• In general, CSS selects HTML elements by their…
  • Tag name (ie all paragraph <p> tags)
  • Class Name
  • ID
  • Combination of these three
  • There are other ways to select elements, but they go beyond this basic introduction
• In general CSS styles elements by setting properties to specific values such as…
  • color - set to a hex value of a color
  • display - set to values such as none, block, and flex
  • margin - set to numeric values in px and other units
• CSS has a cascading effect, meaning that things “roll down the document”
  • For example, if you set the color of paragraphs to red, then later on you set it to blue - on the site the paragraphs will appear blue
  • There is some nuance here with a more advanced topic called CSS specificity
• CSS Specificity
  • In CSS, specificity is like a scoring system that decides which style “wins” if there’s a conflict.
  • Lowest specificity: Styles applied with element tags (like p, h1, div) are the weakest and can be easily overridden.
  • Medium specificity: Classes, attributes, and pseudo-classes (like .button, [type="text"], :hover) carry more weight than plain elements.
  • Highest specificity: IDs and inline styles are the strongest. An ID beats classes and tags, and inline styles beat almost everything unless you use !important.

Classes vs. IDs

• Classes and IDs are very common ways to select HTML elements - they are set via the HTML attributes class and id
  • Elements can have multiple classes, but only one ID
  • Classes can be used on several elements, IDs must be unique (only used once)
• You generally set classes and IDs to identifiable names, but for programmatic and organizational reasons that’s not always the case so the official rules are:
  • ID Attributes
    • Starting Character: Must start with a letter (a-z, A-Z).
    • Allowed Characters: Can include letters, digits (0-9), hyphens (-), underscores (_), colons (:), and periods (.) after the first character.
      • Note about colons and periods: general discouraged for compatibility with other tooling
    • Uniqueness: An ID value must be unique within the entire HTML document.
    • Spaces: Must not contain space characters.
  • Class Names
    • Starting Character: Must start with a letter, an underscore, or a hyphen.
    • Allowed Characters: Can contain letters, numbers, hyphens (-), and underscores (_).
    • Spaces: Should not contain spaces.
• Why prefer classes over IDs?
  • Reusability and consistency.
    • You can use classes on several elements that have like-styles (ie content boxes might have the class content-box)
    • If you need a variation (say, a red content box instead of blue), you can just add another class to the same element without breaking your existing code.
  • IDs can create specificity problems when overriding styles.
    • Due to the specificity score mentioned before
  • Classes keep your CSS flexible and maintainable.

CSS Through Time

• CSS has grown with the web.
  • Early CSS handled simple colors and text.
  • CSS3 introduced animations, transitions, and flexible layouts (like Flexbox and Grid).
  • Modern CSS adds features like container queries, subgrid, nesting, and scroll-linked animations.
• Important takeaway: CSS evolves, and what feels impossible today might be a standard property tomorrow.

Common Beginner CSS Mistakes

1. Overusing IDs instead of classes
   • Leads to overly specific selectors and hard-to-maintain code.
2. Not understanding the cascade
   • The “C” in CSS means rules cascade. Later styles can override earlier ones. Beginners often don’t realize why a style “isn’t working.”
3. Inline styles everywhere
   • Easy at first, but hard to maintain. External or internal stylesheets are better.
4. Not using reset or normalize CSS
   • Different browsers have default styling that can cause inconsistencies if not handled.
5. Forgetting about responsive design
   • Setting fixed widths (like width: 1000px) without considering mobile users.
6. Confusing position values
   • absolute, relative, and fixed often trip up beginners.
7. Not testing across browsers and devices
   • Assuming a site looks good everywhere just because it looks good in one browser.
8. Too much reliance on copy-paste
   • Beginners often grab snippets without understanding them, leading to messy code later.

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Scrimba Discount - Coding Courses!

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

• Click the link to take you to the Scrimba site
• A pop-up should appear on your screen with the discount amount and instructions on how to claim it
• Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.