Learn CSS Basics

CSS (Cascading Style Sheets) controls how your HTML looks. Explore key concepts below!

1. Adding CSS

Use <style> in the head, external files, or inline styles.

<!-- Inline --> <p style="color: blue;">Blue text</p> <!-- Internal --> <style> p { color: red; } </style> <!-- External --> <link rel="stylesheet" href="styles.css">
VS Code Tip: Type link and press Tab (Mac: Tab, Windows: Tab) to auto-generate a stylesheet link.

2. Colors

Change text and background colors with properties like color and background-color.

p { color: #ffffff; /* White text */ background-color: #000000; /* Black background */ }

Try it: Click to toggle colors!

Color Demo
VS Code Tip: Press Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows) to open the command palette—great for quick settings!

3. Fonts

Control text appearance with font-family, font-size, and font-weight.

h1 { font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; }

Try it: Click to toggle font!

Font Demo
VS Code Tip: Use Cmd + . (Mac) or Ctrl + . (Windows) to quick-fix suggestions (e.g., add missing semicolons).

4. Box Model

Every element is a box with margin, padding, border, and content.

div { margin: 20px; /* Outside space */ padding: 15px; /* Inside space */ border: 2px solid black; }

Try it: Click to toggle box model!

Box Demo
VS Code Tip: Hover over CSS properties and press Cmd (Mac) or Ctrl (Windows) to peek at definitions.

5. Selectors

Target elements with tag, class (.), or ID (#) selectors.

p { color: blue; } /* Tag */ .my-class { font-size: 18px; } /* Class */ #my-id { background: yellow; } /* ID */
VS Code Tip: Use Cmd + Shift + F (Mac) or Ctrl + Shift + F (Windows) to search across all files for selectors.

6. Positioning

Control layout with position (static, relative, absolute, fixed).

.box { position: absolute; top: 10px; left: 10px; }
VS Code Tip: Press Cmd + B (Mac) or Ctrl + B (Windows) to toggle the sidebar for more workspace.

Best Practices and CSS Variables

Writing clean, maintainable CSS is key. Here’s how to do it:

Best Practices

  • Use Meaningful Names: Classes like .button are better than .btn1.
  • Keep it DRY: Don’t Repeat Yourself—reuse styles with classes or variables.
  • Organize Files: Separate CSS into logical files (e.g., layout.css, theme.css).
  • Use Comments: Explain complex styles with /* comments */.
  • Minimize Specificity: Avoid overusing IDs or deep nesting (e.g., #main .section p).

CSS Variables (Custom Properties)

Variables make styles easy to update globally. Define them in :root for global scope.

:root { --main-color: #000000; --spacing: 20px; } p { color: var(--main-color); margin: var(--spacing); }

Why Use Variables?

  • Consistency: Change one value, update everywhere.
  • Theming: Easily switch between light/dark modes (like this site!).
  • Readability: Names like --main-color are self-explanatory.

Try it: This site uses variables! Check styles.css to see them in action.

VS Code Tip: Press Cmd + Shift + R (Mac) or Ctrl + Shift + R (Windows) to refactor variable names across your project.