You can use this lesson in your class!
Day 1: CSS Syntax, Selectors, and Specificity
Completed

Day 1: CSS Syntax, Selectors, and Specificity

By Robert Buseck, Margarito Valencia, zach dubroc, Jessika Hayes, Sara Dedeaux, Justin Buseck MCA-Misslou Instructor, Jonathan Pruitt WF360 Instructor, Matthew Harris, Herbert Brown, Jordan Roland, Blake Wyatt, Jim StClair, Windie Speed, Justin Buseck, Nicole Torres Mendez BHA Instructor, and WESLEY EDWARDS

What Is CSS?

CSS (Cascading Style Sheets) is used to control the presentation of HTML elements. It separates content (HTML) from styling (colors, layouts, fonts), enabling a more maintainable, scalable approach to web design.

Key Concepts

  1. CSS Syntax
    • A CSS rule consists of a selector and a declaration block.
    • Example:
css
Copy code
p {
  color: blue;
  font-size: 16px;
}
      • Selector: p (targets all <p> elements).
      • Declarations: color: blue;, font-size: 16px;.
  1. Selectors
    • Element Selector: Targets by tag name (p, h1, li).
    • Class Selector: Targets elements with a specific class (.classname).
    • ID Selector: Targets a unique element with a specific ID (#elementId).
    • Universal Selector: * targets all elements (used sparingly).
    • Descendant / Combinators: e.g., div p, .container > h2, etc.
  2. Specificity
    • Determines which CSS rule takes precedence if multiple rules affect the same element.
    • General hierarchy: Inline styles > ID selectors > Class selectors > Element selectors.
    • Example: A rule using #header has higher specificity than a rule using .header, which in turn is higher than header (element).
  3. Inline, Internal, and External Styles
    • Inline: Written directly in the HTML element via the style attribute (e.g., <p style="color: red;">Text</p>).
    • Internal: Placed within a <style> tag inside <head> of the HTML document.
    • External: Defined in a separate CSS file (linked via <link rel="stylesheet" href="style.css">).
    • Best Practice: Use external stylesheets to keep HTML and CSS separate and maintainable.

HTML + CSS Example

html
Copy code
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Week 3, Day 1 Example</title>
    <!-- Internal CSS example -->
    <style>
      h1 {
        color: teal;
        text-align: center;
      }
      .highlight {
        background-color: yellow;
      }
      #special {
        color: red;
        font-weight: bold;
      }
    </style>
    <!-- External CSS file can also be linked:
         <link rel="stylesheet" href="styles.css"> -->
  </head>
  <body>
    <h1>My First CSS Example</h1>
    <p class="highlight">This paragraph has a yellow background via a class selector.</p>
    <p id="special">This paragraph is red and bold via an ID selector.</p>
    <p style="font-style: italic;">This paragraph uses inline CSS to italicize text.</p>
  </body>
</html>
  • Selectors: h1 (element), .highlight (class), #special (ID).
  • Inline CSS: style="font-style: italic;" on a <p> tag.

Definition Section

  1. CSS (Cascading Style Sheets)
    • A language for describing the presentation of web pages, including colors, layout, and fonts.
  2. Selector
    • The part of a CSS rule that matches the HTML element(s) to be styled. (e.g., p, .myClass, #myId)
  3. Declaration Block
    • A set of one or more declarations within curly braces ({}). Each declaration has a property and a value (e.g., color: blue;).
  4. Specificity
    • A calculation method to determine which CSS rule overrides another when multiple rules apply to the same element.
  5. Inline / Internal / External Styles
    • Methods of applying CSS to HTML, with external being the most maintainable in most cases.

Brief History of CSS

  • Mid-1990s: CSS1 introduced as a way to separate presentation from structure (HTML).
  • Late 1990s: CSS2 standardized layout properties, though not all browsers fully supported it.
  • CSS3 (2012+): Broke into modules for easier updates (e.g., Flexbox, Grid, Animations).

Fun Facts

  1. CSS stands for Cascading Style Sheets because multiple CSS rules can cascade down to an element, with specificity and inheritance deciding which rules apply.
  2. Early browsers like Netscape and Internet Explorer had inconsistent CSS support, making cross-browser styling a challenge.
  3. Inline styles have the highest specificity (except for !important), so they often override external styles unintentionally—one reason to avoid them for large projects.

Practice Problems

Create a new HTML file for each problem, and use CSS either inline, internal, or external as instructed.

Problem 1: Simple Styling

  1. File Name: problem1.html
  2. Add an <h1> heading and <p> paragraph.
  3. Style the heading with inline CSS to make it blue.
  4. Inside a <style> tag, change the paragraph’s color to green.

Problem 2: Class vs. ID

  1. File Name: problem2.html
  2. Create at least two paragraphs: one with a class called “highlight” and one with an ID called “special”.
  3. In an internal or external stylesheet, make “highlight” paragraphs have a yellow background, and the “special” paragraph text bold and red.
  4. Add a third paragraph with both class and ID. Confirm which styles override if any conflicts exist.

Problem 3: External Stylesheet

  1. File Name: problem3.html, plus a CSS file named style.css.
  2. Link style.css in the <head> using <link rel="stylesheet" href="style.css">.
  3. Style headings, paragraphs, and a custom class (like .infoBox) to confirm external styles are working.
  4. Add one inline style rule on an element and observe how it overrides the external stylesheet.

Assignment Submission

After completing these exercises, call Mike over for feedback on your newly created HTML documents and CSS files.

Advance Problems

Problem 4: Styled Navigation Bar

File Name: problem4.html

Instructions:

  1. HTML Structure:
    • Create a standard HTML document.
    • In the <body>, add a <header> element that contains a <nav> section.
    • Inside <nav>, create an unordered list (<ul>) with at least four list items (<li>), each containing an <a> tag for navigation (e.g., Home, About, Services, Contact).
  2. CSS Styling Requirements:
    • Internal Styles:
    • Within a <style> tag in the <head>, add rules to:
      • Remove default list styling and display the list items horizontally.
      • Style the links with a base color (e.g., dark blue) and remove text decoration.
      • On hover (using the :hover pseudo-class), change the link color to a contrasting color.
    • ID and Class Selectors:
      • Assign an id to one of the <a> elements (e.g., id="specialLink") and create a rule that changes its color or font style.
      • Assign a class (e.g., class="nav-item") to all <li> elements and style them with padding or margins.
    • Inline Style:
      • Add an inline style on one of the <a> tags (for example, setting font-weight: bold;) to see how inline styles override the internal stylesheet.
  3. Objective:
  4. Build a navigation bar that demonstrates the use of element, class, and ID selectors—as well as inline styles—and understand how CSS specificity determines which styles are applied.

Problem 5: Product Card with External Stylesheet

Files:

  • HTML File: problem5.html
  • CSS File: style.css

Instructions:

  1. HTML Structure:
    • Create a standard HTML document and link to style.css in the <head> using the <link rel="stylesheet" href="style.css"> tag.
    • In the <body>, create a container <div> with a class of "card".
    • Inside the card, include:
      • An <img> element to display a product image (use a placeholder image URL or file).
      • An <h2> element for the product title.
      • A <p> element for a brief product description.
      • A <span> element for the product price.
  2. CSS Styling Requirements (in style.css):
    • External Styles:
      • Style the .card class to add a border, some padding, and a shadow effect.
      • Style the <h2>, <p>, and <span> elements within .card to create a visually appealing layout (e.g., set font sizes, margins, and colors).
    • Inline Override:
      • In your HTML, add an inline style to the <span> element (for example, style="color: red;") that overrides the color defined in the external stylesheet. Observe how inline styles take precedence.
  3. Objective:
  4. Create a product card that demonstrates how to separate styling into an external stylesheet while understanding how inline styles override external rules due to higher specificity.

Problem 6: Advanced Selector Challenge

File Name: problem6.html

Instructions:

  1. HTML Structure:
    • Set up a standard HTML document.
    • In the <body>, create a <div> container with a class of "container".
    • Inside this container, add several nested elements:
      • Multiple <p> paragraphs (at least 4) with some placeholder text.
      • At least one <a> tag inside a paragraph.
      • An unordered list (<ul>) with several list items (<li>). Add a class (e.g., "list-item") to each <li>.
  2. CSS Styling Requirements (Internal or External Styles):
    • Descendant Selectors:
      • Write a rule that targets <a> elements only when they are inside a paragraph within the container (e.g., .container p a { ... }). Style these links with a unique color.
    • Child Combinators:
      • Use a child combinator to style only the direct <li> children of the <ul> (e.g., .container > ul > li { ... }). Add padding or a background color.
    • Attribute Selectors and Pseudo-classes:
      • Use the :nth-child() pseudo-class to style every second <li> differently (e.g., alternate background colors).
    • Inline Style Check:
      • For one of the <p> elements, add an inline style (e.g., style="font-size: 20px;") and see how it overrides or interacts with your defined styles.
  3. Objective:
  4. Develop a webpage that utilizes various types of CSS selectors—including descendant, child combinator, attribute selectors, and pseudo-classes—to reinforce your understanding of CSS specificity and rule targeting.