CSS Fundamentals

Welcome to Module 2 of our course! You’ve learned how to build the skeleton of a webpage with HTML. Now, it’s time to learn how to make it beautiful, engaging, and visually appealing using CSS. Think of CSS as the skin, clothes, and decorations for your HTML skeleton. It dictates colors, fonts, layouts, animations, and much more.

What is CSS? The Language for Styling HTML

Purpose: CSS, which stands for Cascading Style Sheets, is a language used to describe the presentation of a web page written in HTML. It controls the “look and feel” of your website, separating the content (HTML) from its visual presentation (CSS).
Simple Words: CSS is the language that tells your browser how your HTML should look. It’s all about colors, fonts, spacing, and where things sit on the page.

CSS Syntax: The Rules of Styling

Every CSS rule follows a simple pattern: you select an HTML element (or elements) and then declare how you want to style it.

selector {
  property: value;
  property: value;
  /* More declarations */
}

Selector: This points to the HTML element(s) you want to style (e.g., p for paragraphs, h1 for main headings).
Declaration Block: The part inside the curly braces {}. It contains one or more declarations.
Declaration: A single property: value; pair.
- Property: The specific visual characteristic you want to change (e.g., color, font-size, background-color).
- Value: The setting you want for that property (e.g., red, 16px, #F0F0F0).
Semicolon ;: Each declaration must end with a semicolon.

Comments: In CSS, comments start with /* and end with */. They are ignored by the browser.

/* This is a CSS comment */
p {
  /* Selector for all paragraph elements */
  color: blue; /* Sets the text color to blue */
  font-size: 16px; /* Sets the font size to 16 pixels */
}

Technical Detail: CSS rules consist of a selector, which targets one or more elements in the HTML Document Object Model (DOM), and a declaration block, which contains one or more property-value pairs. Properties define a visual characteristic, and values define how that characteristic should be rendered. Semicolons separate declarations, and curly braces delimit the declaration block.
Simple Words: It’s like writing instructions: “Find all paragraphs (p), then make their text color blue (color: blue;) and their text size 16 pixels (font-size: 16px;).”

Ways to Include CSS: Connecting Styles to HTML

There are three main ways to connect your CSS styles to your HTML documents.

Inline CSS: `style="property: value;"` (Discouraged for Most Cases)

Purpose: Applying CSS directly to a single HTML element using the style attribute.
Example: <p style="color: red; font-weight: bold;">This text is red and bold.</p>
Technical Detail: Inline styles are defined directly within the style attribute of an HTML tag. They have the highest specificity (we’ll discuss this soon) and override all other styles for that specific element. However, they violate the principle of separation of concerns and make maintaining styles across a large website extremely difficult.
Simple Words: You put the style rules right inside the HTML tag itself. It works, but it’s like painting one brick of a house a specific color instead of planning the whole house’s color scheme. It’s messy for big projects.
Why Discourage: Makes code hard to read, hard to maintain (if you want to change the color of all paragraphs, you’d have to edit every single one), and violates the separation of concerns (mixing structure and presentation). Use sparingly, perhaps for very specific, one-off overrides or JavaScript-driven styles.

Internal CSS: `<style>` Tag in `<head>`

Purpose: Embedding CSS rules directly within the HTML document, inside a <style> tag, which is placed in the <head> section.

Example:

My Page Title

This is some content.

<head>
  <style>
    h1 {
      color: purple;
    }
    p {
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>My Page Title</h1>
  <p>This is some content.</p>
</body>

Technical Detail: Internal stylesheets are defined within the <style> element in the <head> section of an HTML document. They apply styles to that specific HTML document only. This method is suitable for single-page applications or when a particular page has unique styles not shared by others.
Simple Words: You put all your styling rules in a special <style> section right inside the HTML file’s “head” part. It’s like having a style guide for just that one paper.

External CSS: `<link rel="stylesheet" href="style.css">` (Best Practice)

Purpose: The most common and recommended way to include CSS. You write your CSS in a separate .css file (e.g., style.css) and then link it to your HTML document using the <link> tag in the <head> section.

Example (index.html):

My Linked Page

Styled from an external file.

<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>My Linked Page</h1>
  <p>Styled from an external file.</p>
</body>

(style.css file):

h1 {
  color: green;
}
p {
  font-size: 18px;
}

Technical Detail: External stylesheets are separate .css files linked to HTML documents via the <link> element with rel="stylesheet" and href pointing to the stylesheet’s URL. This approach promotes modularity, allows for caching of the CSS file (improving load times for subsequent pages), and adheres to the separation of concerns, making styles reusable across an entire website.
Simple Words: You write all your styling rules in a completely separate file (like style.css) and then just tell your HTML file where to find that style file. This is the best way because you can use the same style file for many HTML pages, and it keeps your code tidy.

Basic Selectors: Targeting HTML Elements

Selectors are patterns used to select the HTML elements you want to style.

Element Selector

Syntax: element_name { ... }
Purpose: Selects all instances of a specific HTML element.

Example:

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

Simple Words: “Find all of this type of HTML tag (like all paragraphs) and style them.”

Class Selector: `.my-class { ... }` (Best for Reusable Styles)

Syntax: .class_name { ... }
Purpose: Selects all HTML elements that have a specific class attribute. Classes are reusable; you can apply the same class to multiple different elements.

Example (HTML):

This text is highlighted.

This heading is also highlighted.

<p class="highlight">This text is highlighted.</p>
<h2 class="highlight">This heading is also highlighted.</h2>

Example (CSS):

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Technical Detail: Class selectors target elements based on their class attribute. Multiple elements can share the same class, and an element can have multiple classes (e.g., <p class="error large-font">). This is the most flexible and widely used selector for applying reusable styles.
Simple Words: “Find anything that has this special class name (like .highlight) and style it. You can put the same class name on many different things.”

ID Selector: `#my-id { ... }` (Unique, Specific Elements)

Syntax: #id_name { ... }
Purpose: Selects a single, unique HTML element that has a specific id attribute. An id must be unique within an HTML document.

Example (HTML):

Welcome

<div id="main-header">
  <h1>Welcome</h1>
</div>
<p id="footer-text">Copyright 2025</p>

Example (CSS):

#main-header {
  background-color: lightblue;
  padding: 20px;
}

Technical Detail: ID selectors target a single element based on its id attribute. According to HTML specifications, each id value must be unique within a document. ID selectors have very high specificity, making them powerful but less flexible for reusable styles compared to classes.
Simple Words: “Find the one and only thing with this special id name (like #main-header) and style it.” Use this only when you know there will be just one of that thing on the whole page.

The Cascade, Specificity, and Inheritance: How Styles Apply

CSS stands for Cascading Style Sheets for a reason. Styles “cascade” down, meaning multiple rules can apply to the same element. The browser has a specific way of determining which style actually wins out.

The Cascade: Order of Rules

When multiple style rules apply to the same element, the browser follows an order of precedence:

Browser default styles: The styles built into your web browser.
External stylesheets: Styles from linked .css files.
Internal stylesheets: Styles defined in the <style> tag in the <head>.
Inline styles: Styles defined directly on an element’s style attribute.

Later-defined rules (further down in a file, or higher in the list above) generally override earlier-defined rules, assuming equal specificity.

Technical Detail: The cascade is the algorithm used to combine properties from multiple style sources to determine the final styles of an element. It processes rules based on source order, importance (e.g., !important), origin (user agent, user, author styles), and specificity.
Simple Words: Imagine you have many different style books. The browser looks at all of them, and if there are conflicting rules, the ones written closer to the element (like inline styles) or later in the book (later in the file) usually win.

Specificity: Who Wins the Conflict?

Specificity is a scoring system used by browsers to determine which CSS rule to apply when multiple rules target the same element. A more specific rule will override a less specific rule, regardless of the order in the stylesheet.

Scores (simplified):
- Inline Styles: Highest specificity.
- ID Selectors (#my-id): Very high specificity.
- Class Selectors (.my-class), Attribute Selectors ([type="text"]), Pseudo-classes (:hover): Medium specificity.
- Element Selectors (p), Pseudo-elements (::before): Lowest specificity.

Example:

/* Lower specificity */
p {
  color: blue;
}

/* Higher specificity - wins! */
.my-paragraph {
  color: green;
}

If an HTML element <p class="my-paragraph"> has both rules applied, it will be green.

!important (Discourage Its Overuse):
- Purpose: The !important flag, placed after a property value (e.g., color: red !important;), overrides all other declarations, regardless of specificity or order.
- Why Discourage: Using !important makes your CSS very hard to debug and maintain because it breaks the natural flow of the cascade and specificity. It’s often a sign of poor CSS organization. Use it only as a last resort, for very specific overrides in frameworks, or for utility classes that truly must override everything.
Technical Detail: Specificity is calculated based on the number of ID selectors, class/attribute/pseudo-class selectors, and type selectors (element/pseudo-element) present in a rule. Inline styles have the highest specificity. !important bypasses the normal cascade and specificity rules, which can lead to “specificity wars” and unmanageable stylesheets.
Simple Words: Specificity is like a point system. If two rules want to style the same thing differently, the rule with more “points” wins. ID rules get more points than class rules, and class rules get more points than just element rules. !important is like a super-override, but it’s generally a bad idea to use it too much.

Inheritance: Passing Styles Down

Purpose: Some CSS properties are inherited by child elements from their parent elements. This means you can set a style once on a parent, and its children will automatically adopt that style unless explicitly overridden.
Properties that inherit (examples): color, font-family, font-size, line-height, text-align.
Properties that do not inherit (examples): background-color, margin, padding, border, width, height.

Example:

This paragraph inherits the font and color.

This span also inherits.

<div style="font-family: Arial, sans-serif; color: darkblue;">
  <p>This paragraph inherits the font and color.</p>
  <span>This span also inherits.</span>
</div>

Technical Detail: Inheritance is a mechanism where properties defined on a parent element are automatically applied to its descendant elements, provided the descendant does not have its own explicit value for that property. This simplifies stylesheets by allowing global definitions for properties like typography. However, not all properties inherit, and developers must be aware of which do to avoid unexpected results.
Simple Words: Some styles automatically pass down from a parent element to all its children, like a family trait. So if you set the font for a whole box, all the text inside that box will have the same font unless you specifically change it for a smaller piece of text. But things like backgrounds or borders usually don’t get passed down automatically.

Great work! You’ve just learned the absolute bedrock of CSS: its syntax, how to connect it to your HTML, and the fundamental rules of how styles are applied. This understanding is crucial for everything else we’ll do in CSS. In the next section, we’ll dive into the exciting world of styling text and backgrounds!

Next Step: Ready to play with colors, fonts, and backgrounds? Click here to go to the next section: Link to Section 2.2: Working with Color, Text, and Backgrounds (Placeholder)

CSS Fundamentals

What is CSS? The Language for Styling HTML

CSS Syntax: The Rules of Styling

Ways to Include CSS: Connecting Styles to HTML

Inline CSS: style="property: value;" (Discouraged for Most Cases)

Internal CSS: <style> Tag in <head>

My Page Title

External CSS: <link rel="stylesheet" href="style.css"> (Best Practice)

My Linked Page

Basic Selectors: Targeting HTML Elements

Element Selector

Class Selector: .my-class { ... } (Best for Reusable Styles)

This heading is also highlighted.

ID Selector: #my-id { ... } (Unique, Specific Elements)

Welcome

The Cascade, Specificity, and Inheritance: How Styles Apply

The Cascade: Order of Rules

Specificity: Who Wins the Conflict?

Inheritance: Passing Styles Down

Inline CSS: `style="property: value;"` (Discouraged for Most Cases)

Internal CSS: `<style>` Tag in `<head>`

External CSS: `<link rel="stylesheet" href="style.css">` (Best Practice)

Class Selector: `.my-class { ... }` (Best for Reusable Styles)

ID Selector: `#my-id { ... }` (Unique, Specific Elements)