CSS Fundamentals and Styling

TL;DR

CSS (Cascading Style Sheets) controls how your HTML looks, from colors and fonts to layout. It works by selecting HTML elements and applying style rules to them. Understanding the cascade and selector specificity helps you predict which styles will apply.

1. The Mental Model

Think of HTML as the blueprint for your house (the structure) and CSS as the interior designer (the look and feel). CSS takes the raw structural elements and makes them visually appealing, arranging them and adding colors, fonts, and more.

2. The Core Material

CSS lets you style your web pages. You write CSS rules that tell the browser how to display specific HTML elements.

2.1 How CSS Rules Work

Photo by Pixabay on Pexels

A CSS rule has two main parts: a selector and a declaration block.

• Selector: This chooses which HTML elements to style (e.g., all paragraphs, a specific ID, a class).
• Declaration Block: This contains one or more declarations, enclosed in curly braces {}. Each declaration is a property: value; pair, ending with a semicolon.

selector {
  property: value;
  another-property: another-value;
}

Example:
To make all paragraphs blue and centered:

p {
  color: blue;
  text-align: center;
}

2.2 Ways to Add CSS

Photo by Pixabay on Pexels

You can add CSS to your HTML in three main ways:

1. Inline Styles: Applied directly to an HTML element using the style attribute.

   • <p style="color: red;">This text is red.</p>
   • Pros: Quick for one-offs. Cons: Messy, hard to maintain, less powerful.

2. Internal Styles: Placed within <style> tags in the <head> section of an HTML document.

   • html <head> <style> h1 { color: green; } </style> </head>
   • Pros: Good for single-page styles. Cons: Not reusable across multiple pages.

3. External Stylesheets: The most common and recommended method. You link a separate .css file to your HTML document.

   • In style.css:
     css body { font-family: Arial, sans-serif; }
   • In index.html:
     html <head> <link rel="stylesheet" href="style.css"> </head>
   • Pros: Reusable, keeps HTML clean, easier to manage large projects. Cons: Requires an extra HTTP request (minor for modern sites).

2.3 Key CSS Selectors

Photo by Miguel Á. Padriñán on Pexels

Selectors are crucial for targeting specific elements.

• Element Selector: Targets all instances of an HTML element.
  • h1 { color: purple; } (targets all <h1> elements)
• Class Selector: Targets elements with a specific class attribute. Preceded by a dot ..
  • .my-class { background-color: yellow; }
• ID Selector: Targets a unique element with a specific id attribute. Preceded by a hash #.
  • #main-header { font-size: 3em; } (IDs should be unique per page)
• Descendant Selector: Selects an element that is a descendant of another element.
  • div p { margin-bottom: 10px; } (targets all <p> inside a <div>)
• Universal Selector: Selects all elements.
  • * { box-sizing: border-box; }

2.4 The Cascade, Specificity, and Inheritance

Photo by Karol Czinege on Pexels

These three concepts determine which styles apply when multiple rules could affect an element.

• Cascade: Refers to the order in which CSS rules are applied. Styles from multiple sources (browser default, user styles, author styles) are combined.
• Specificity: If multiple rules target the same element and same property, the browser uses specificity to decide which rule wins.
  • ID selectors (#id) are more specific than class selectors (.class).
  • Class selectors are more specific than element selectors (p).
  • Inline styles are the most specific (but generally avoided).
  • A simple way to remember: !important (most specific, avoid using it if possible) > Inline Styles > IDs > Classes > Elements > Universal.
• Inheritance: Some CSS properties (like color or font-family) are inherited by child elements from their parent elements. Other properties (like margin or border) are not.

Here's a simplified view of how style choices are made:

graph TD
    A["Does the element have inline style?"] -->|Yes| B["Apply inline style (most specific)"]
    A -->|No| C["Are there any ID selectors?"]
    C -->|Yes| D["Apply ID style"]
    D -->|Are there class selectors?| E["Apply class style"]
    E -->|Are there element/pseudo-element selectors?| F["Apply element style"]
    F -->|Are there universal selectors?| G["Apply universal style"]
    G -->|Any inherited properties from parent?| H["Apply inherited style"]
    H -->|Otherwise| I["Apply browser default style"]
    C -->|No| E
    E -->|No| F
    F -->|No| G
    G -->|No| H
    H -->|No| I

3. Worked Example

Let's style a simple card component.

First, our index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <h2 id="card-title">My Awesome Card</h2>
        <p class="card-description">This is a fantastic card showcasing CSS fundamentals. It has a title, description, and a button.</p>
        <button>Click Me!</button>
    </div>

    <div class="card another-card">
        <h2>Another Card</h2>
        <p>This card has a different background due to its extra class.</p>
        <button>Learn More</button>
    </div>
</body>
</html>

Now, our style.css:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex; /* Arranges cards side-by-side */
    gap: 20px; /* Space between cards */
    padding: 20px;
    background-color: #f4f4f4;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white; /* Default background for all cards */
}

.card h2 {
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

#card-title {
    color: #007bff; /* This will override the .card h2 rule due to ID's higher specificity */
}

.card-description {
    font-size: 0.9em;
    line-height: 1.5;
    color: #666;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

button:hover { /* Styles for when you hover over the button */
    background-color: #0056b3;
}

/* Specific style for the second card */
.another-card {
    background-color: #e0ffe0; /* This class rule will override the general .card background */
}

Explanation:
* The body sets a general font and uses Flexbox to arrange the cards.
* .card styles all elements with the card class, giving them a border, padding, shadow, and white background.
* .card h2 targets <h2> elements inside a .card.
* #card-title targets the <h2> with that specific ID. Its blue color overrides the gray from .card h2 because ID selectors are more specific than element selectors.
* .another-card targets the second card specifically and changes its background, overriding the background-color: white; from the .card rule because .another-card is applied after .card in the HTML (and is also a class selector, so equal specificity in this specific property, but wins by order).

4. Key Takeaways

• CSS defines the visual presentation of HTML elements, using selectors to target specific parts of your page.
• External stylesheets (.css files linked in HTML) are the best practice for maintainability and reusability.
• CSS rules consist of a selector and a declaration block with property: value; pairs.
• Understand element, class, and ID selectors, as they are your primary tools for targeting elements.
• The CSS cascade and specificity rules dictate which styles apply when there are conflicts.
• Inheritance allows child elements to adopt some styles from their parents, like font styles.

Common Mistakes to Avoid

• Forgetting semicolons: Each declaration must end with a semicolon. Missing one breaks the following declarations.
• Incorrect selector syntax: A dot for classes (.class), a hash for IDs (#id), and no prefix for elements (p).
• Overusing !important: It's a quick fix but makes your CSS hard to maintain and debug due to its high specificity.
• Ignoring the cascade: Not understanding why a style isn't applying often comes down to specificity or the order of your CSS rules.
• Putting all CSS inline: This makes your code messy, hard to change globally, and prevents browser caching of styles.

5. Now Try It

Create a new HTML file (my-portfolio.html) and an external CSS file (portfolio.css). In your HTML, make a div with the class profile-section. Inside it, add an <h2> for your name (e.g., "Jane Doe"), a <p> for a short bio, and an <a> tag for a link to your GitHub profile.

In your portfolio.css, style this section:
1. Give body a font-family and a light background-color.
2. Style .profile-section with a width of 500px, margin: 20px auto; (to center it), padding: 25px;, a border, border-radius, and box-shadow.
3. Change the color of the <h2> inside .profile-section to a dark blue.
4. Style the <p> inside .profile-section with a line-height of 1.6 and color.
5. Style the <a> tag to remove its text-decoration (the underline) and give it a different color.

What success looks like: You should have a neatly centered box with your name, bio, and a styled link, all styled from your external CSS file. The link should not have an underline.
```