The Invisible Girl — CSS Stylist

Who Is Sue Storm?

Susan Storm Richards was a brilliant young scientist and the only woman among the four crew members when a cosmic storm struck their experimental spacecraft. The radiation that transformed her gave her the power to bend light itself — making objects, and herself, completely invisible.

Originally called the Invisible Girl when she debuted in Fantastic Four #1 (1961), Sue was later renamed the Invisible Woman in 1985 to reflect her growth from sidekick to the most powerful member of the team. She controls force fields, turns objects invisible, and shields her teammates from harm.

“I don’t become invisible. I make the light invisible.” — Sue Storm Richards, Fantastic Four

Her Powers & Abilities

Sue Storm’s powers are far more than a parlor trick. In later years she was revealed to be arguably the most powerful member of the Fantastic Four — her force fields can crush objects from the inside or shield her team from nuclear blasts.

Superhuman Abilities

• Renders objects and herself completely invisible
• Projects nearly indestructible invisible force fields
• Shapes force fields into any form — platforms, shields, projectiles
• Psychokinetic manipulation of light and invisible energy

Skills Beyond Her Powers

1. Doctorate-level expertise in genetics and biochemistry
2. Combat-trained hand-to-hand fighter
3. Tactical strategist — often the team’s most effective planner
4. Diplomatic negotiator for the team in alien encounters

Why She Represents CSS

At TNT, the Invisible Girl represents CSS. The connection is exact: she controls what you see, how things appear, and what stays hidden. Without her, the team (the page) still exists — it just looks like Phase 1.

CSS Controls What You See

Open this page and Phase 1 side by side. The HTML is identical. The only difference is the <style> block in this file. That is the power of the Invisible Girl: she transforms the same bones into something completely different.

What a CSS Rule Looks Like

/* This rule targets the <h2> element */
h2 {
    font-size: 1.5rem;        /* size: 1.5x the base font */
    color: #1a3a5c;           /* a deep navy blue */
    margin: 0 0 10px 0;       /* top right bottom left */
    border-bottom: 2px solid #1fb8d8;  /* teal accent line */
}
            

The h2 before the curly braces is the selector — it targets every <h2> on the page. Inside the braces are declarations: each one is a property: value pair separated by a colon.

The Cascade — Why the “C” in CSS Matters

When multiple rules target the same element, the browser follows a priority order. More specific selectors win over less specific ones: an id beats a class, which beats a tag name. Later rules override earlier ones when specificity is equal. Understanding the cascade is how you stop CSS from behaving “magically” and start controlling it precisely — just like Sue Storm learned to control light itself.

Quick Facts

Tables are for tabular data — information that naturally fits into rows and columns. Compare how this table looks here versus in Phase 1. Same HTML. Completely different appearance. That is CSS.

[YOUR SECTION HEADING]

[STUDENT: Replace this with your own content. Delete this placeholder before submitting!]