CSS Foundations: Selectors, Properties, and the Cascade

Session Time: 120 minutes

Introduction: Why AI Engineers Need CSS
CSS Core Syntax: Selectors and Properties
The Logic of Style: The Cascade and Specificity
AI-Assisted Styling and Debugging
Lab: Styling a Personal Profile Page
Wrap-Up and Reflection

Learning Objectives

Upon completion of this session, participants will be able to:

Construct CSS files using proper selectors (element, class, ID) and property hierarchies to style HTML documents.
Evaluate the impact of the Cascade, Specificity, and Inheritance on visual output.
Use AI as a debugging companion to interpret conflicting styles and resolve specificity issues.
Refine the visual hierarchy of a personal portfolio page for clarity and readability.

Session Breakdown

Segment	Topic	Duration (minutes)
Introduction	The Role of CSS in AI Demos & Applications	15
Core Syntax	Selectors, Properties, and the Box Model	25
Logic	The Cascade: Specificity and Inheritance	25
AI Tooling	Using LLMs to Debug CSS Conflicts	15
Practical Lab	Lab: Styling a Personal Profile Page	30
Conclusion	Wrap-Up and Reflection	10
Total		120 minutes

1. Intro to CSS Concepts

What is CSS?

CSS (Cascading Style Sheets) is a web technology that formats and styles HTML documents. It also provides stylistic behaviors using CSS animations. CSS controls a web page's layout, colors, fonts, and other visual aspects.

CSS enables us to separate a document's structure & content (HTML) from its presentation (CSS). This concept of separation of concerns is widespread throughout software development. It helps make programs more maintainable and can provide better code reuse.

Why use CSS?

There are many reasons to use CSS, including:

Styling pages: This one is clear - CSS is how we apply style to web content. It allows brands to apply their signature style to a page. When at its best, it creates memorable user experiences.
Consistency: CSS can create consistent styles across multiple pages on a single site. This creates a professional and polished look and feel.
Accessibility: CSS can make web pages more accessible by presenting information in better ways. It can also draw attention to essential elements. Use caution though; not being thoughtful when applying styles can just as easily render a site inaccessible.
Animations, transitions, and more: CSS offers more advanced features, which can elevate a site's presentation when used sparingly.

2. CSS Fundamentals

Syntax

The following graphic shows the basic syntax of a CSS rule:

Anatomy of a CSS rule

Selectors: Used to target the element(s) to be styled and range from simple to incredibly complex.

Properties: A few hundred CSS properties can be used to style elements. For example, the color property shown above sets the color of an element's text. Properties are written in lower-kebab-case. In this convention, each word is written in lower case and separated by a dash -. This differs from camelCase, where the first word is written in lowercase, and each subsequent word is capitalized. In camelCase, words are not separated by any characters.

Value: The value assigned to the color property controls the color of an element's text. The valid values that can be applied to a property are specific to that property. For example, it can be given named values like orange or specific colors using a special syntax. Meanwhile, the text-align property can only be given a few values, such as left, justify, or center. A value of orange would be invalid. Values are also written in lower-kebab-case.

Declaration: The combination of a property and value, separated by a colon and ending with a semi-colon, makes a declaration.

Rule: A selector and all of its associated declarations.

Element selectors

CSS element selectors target every instance of a specific HTML element, such as <p>, on a web page. Element selectors are the most basic type of selector. They are defined in the HTML with the element name.

<!--A p element-->
<p>Hello World</p>

To target that p element and every other p element on the page and make the color of their text purple, we could use this code:

p {
  color: purple;
}

Comments

Like comments in other languages, comments explain and document our CSS code. Browsers ignore these comments, so they don't affect the appearance of our web pages.

CSS comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */. They can span multiple lines or one line, but they need both the opening and closing tags.

p {
  color: purple; /*All p elements will now have purple text!*/
}

/* 
This is 
a multi-line
comment.
*/

🧠 VS Code can automatically comment line(s) of code for us by pressing ⌘ Command + / in macOS or Ctrl + / in Linux and Windows.

3. The Box Model

Learning objective: By the end of this lesson, learners will be able to apply the CSS box model concepts of content, padding, border, and margin to manipulate the layout and spacing of HTML elements.

Everything is a box

Every HTML element creates a box for its content. CSS can be used to modify that box through the box model. The box model is a way to visualize the space that each element takes up on the page. The box model is made up of 4 parts: content, padding, border, and margin.

The CSS box model

Although other CSS units can be used, we'll typically measure these boxes in pixels, abbreviated in code as px.

Content

The content of the box, where text and images appear.

Padding

Padding is the space between the content of an element and its border.

Padding can be added to any side of an element, and it can be different thicknesses on different sides. Padding is useful for creating space between the content of an element and its border or margin.

Adjusting the padding will shift the box's content but will not impact neighboring elements.

When we use a single value, it gets applied to all four sides:

p {
  /* all four sides */
  padding: 2px;
}

You can also target a specific side of a box's padding like this:

p {
  padding-bottom: 1px;
  padding-left: 2px;
  padding-right: 3px;
  padding-top: 4px;
}

You can also target different sides by using shorthand properties. The border property below previews this concept as well.

Border

A border is the area (typically a line) surrounding the padding. Borders are useful for separating elements from each other and adding visual interest to a web page.

We can set the value of the border's width, style, and color all in one line using the border shorthand property:

p {
  border: 3px solid red;
}

Or, if we wanted, we could break this into three lines:

p {
  border-width: 3px;
  border-style: solid;
  border-color: red;
}

We can even control individual sides with properties that target them, like border-bottom-width and border-bottom-style, though this is less common.

Margin

Margin is the space between the border and other elements.

Margins can be added to any side of an element, and they can be different thicknesses on different sides. Margins help create space between elements and control a web page's layout.

We can manipulate the value of the margin property the same way as the padding property:

p {
  /* all four sides */
  margin: 2px;
}

margin-top, margin-right, and so on are also available.

4. Common properties

CSS properties are used to control the appearance and behavior of HTML elements. There are many different CSS properties, but some of the most common ones are font properties, color, and background.

Font properties

Font properties let us control the appearance of text on a web page. Some of the most common are:

font-family: Specifies the font family of the text. When multiple fonts are specified, the first available font is used.
font-size: Specifies the size of the text.
font-weight: Specifies the weight of the text (for example, light, normal, or bold).
font-style: Specifies the style of text (for example, italic or normal).
text-align: Specifies the alignment of the text (for example, left, center, right, or justified)

Let's try styling our <h2> elements:

h2 {
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;
  font-style: italic;
  text-align: center;
}

`color`

We've already seen how the color property allows us to specify the color of fonts.

There are three common ways to specify color values in CSS:

hexadecimal values: #FF0000
RGB values: rgb(255, 0, 0)
Color name: red

All three of the example values above will give us the same color!

Any of the three methods is acceptable for declaring a color value, but there are advantages to using RGB or hex codes, namely precision and range.

Hex codes and RGB values give us variety and precision that color names can't. One of the reasons for this is that once you deviate from basic colors like red, green, blue, and so on, color names can be subjective. There are only 140 predefined color keywords in CSS, but over 16 million possible hex/RGB color combinations exist.

🎓 You Do

Take a few minutes and visit one of the following resources and learn more about a couple of properties of your choosing:

CSS-Tricks - one of the best sites for all things CSS
codrops

After you've learned about that property, apply it in your code.

Practice

Now that you've learned about some common properties, let's get some more practice.

Set the margin on <body> element to 0 on all four sides. This is a common reset we do on all our pages because most browsers give a margin to the body element, which we usually do not want.
Also, give the background of the <body> element a color of lightgray.
Set the margin on the <ul> elements to 0 on all four sides.
Set the text color of all <div> elements to blue.

5. CSS Selectors

We've already used element selectors like p and h2 to target specific HTML elements on a web page. This allowed us to style those elements in any way we wanted. ID and class selectors let us narrow down the elements we want to select. For example, instead of selecting every <div> in our HTML, we can select only the <div> elements that have specific id or class attributes.

Class selector

We use the class selector to grab one of the values within the class attribute. A single element can belong to multiple classes because the class attribute accepts multiple space-separated values! The same class can be used for multiple elements; for example, multiple elements have both the important and super-cool classes in our starter code.

Add a . period followed by the class name to use a class selector.

.important {
  color: red;
  font-weight: bold;
}

The class selector has a greater specificity than the element selector. If there are conflicts between the rule of an element selector and a class selector, the class selector will be used.

🎓 You Do

Target the elements with the class name super-cool, and give them a border that is solid, 2px wide, and pink in color.

Note how the styling from both the .important and the .super-cool rules are applied to the div with both class names! What happens when you use conflicting declarations, like adding a color: blue; to the .super-cool rule?

Play around with the order of these rules in your CSS document, and try switching the order of the class names to "super-cool important" in the div element's class attribute. When is order important? When is it not? Explore these mechanics a bit on your own.

ID selector

ID selectors are the most specific type of selector. They target elements with a specific id attribute.

Add the # symbol followed by the id value to use an id selector.

Let's change our <p> tag with the id of about:

#about {
  font-style: italic;
  color: hotpink;
}

The ID selector is more specific than the class and element selector. If there are conflicts between a rule using either of those selectors and the ID selector, the ID selector will be used.

🚨 An element's ID should always be unique. An element should only ever have a single ID.

Combinators

Combinators provide a powerful way to select elements based on their relationship to other elements.

The most common combinator is the descendant selector, but there are many more.

We use the descendant selector to target elements nested within another element, regardless of the depth of the nesting.

A descendant selector is defined by using a space character between two other selectors:

/* This will match all <p> tags nested anywhere within an <div> tag */
div p { ... }

Note that this rule does not target <div> elements, only <p> elements. The last item in the combinator receives the styling.

6. Multiple Stylesheets

Why use multiple stylesheets?

When creating larger projects - especially ones with multiple pages - our CSS can quickly get messy if we only use one stylesheet.

Instead, we can create a separate stylesheet for each page or section of our web app, allowing us to keep things tidy and easily accessible.

The most significant benefits of using multiple stylesheets are:

Organization
Maintenance: Using multiple stylesheets can make it easier to maintain your CSS code. This is because you can isolate changes to specific stylesheets, making it less likely that you will accidentally break something when you make a change.

To use multiple stylesheets, add a <link> element to the <head> section of your HTML code for each stylesheet that you want to use.

An example of what that might look like:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="global.css">
  <link rel="stylesheet" href="store-page.css">
</head>
<body>
  <!-- body content -->
</body>
</html>

You'd put styles that apply globally throughout your site in the global.css file - like nav bar or button styling.

Then, your other style sheets, such as store-page.css above, would handle styling specific to certain pages.

Order of precedence

When a browser loads multiple stylesheets for a web page, it will apply the styles in the order that the stylesheets are linked in the <head> section of the HTML code. This means that the styles in the later stylesheets will override the styles in the earlier stylesheets.

7. CSS Variables

CSS variables, also known as custom properties, are a fantastic tool to help you write CSS that is clearer in its intent and more maintainable.

Say we're working for a company that wants to use its primary brand colors repeatedly throughout a website. Without CSS variables, that may look like this:

h1 {
  color: #7289DA;
}

a {
  background-color: #7289DA;
  color: #FFFFFF;
}

button {
  background-color: #7289DA;
  color: #FFFFFF;
}

#comments {
  border: 2px solid #7289DA;
}

footer {
  background-color: #7289DA;
  color: #FFFFFF;
}

In other words, lots of repetition and lots of room for errors. It would be easy for us to make a mistake when applying this color. CSS variables let us avoid being repetitive with values.

Variables are inherited from ancestors. This means if you want a variable available everywhere in the <body> of a page, then you should define that variable in the <body> element. Applying it even higher, like on the html element, is also common. Let's define a variable:

body {
  --brand-color: #7289DA;
}

This syntax defines a variable called --brand-color. The -- at the start is required. You can't use special characters other than dashes - in the name of a variable. Lower kebab case is generally preferred but not strictly required.

The value #7289DA is assigned to this variable. Let's make use of it in our code from above!

h1 {
  color: var(--brand-color);
}

a {
  background-color: var(--brand-color);
  color: #FFFFFF;
}

button {
  background-color: var(--brand-color);
  color: #FFFFFF;
}

#comments {
  border: 2px solid var(--brand-color);
}

footer {
  background-color: var(--brand-color);
  color: #FFFFFF;
}

Here, we can see that to apply the variable in our CSS, we use a special function in CSS: var() and write the variable name inside of it.

💡 CSS functions are independent of other languages. Check out this MDN reference for more.

Now that we've done that, we can be sure that our brand colors are being used uniformly throughout the site, and we have autocomplete in CSS to help us not make errors.

Incoming rebrand

And it turns out we did that work just in time for an update to our brand colors - our new signature color is #5865F2. It's a good thing we set up our CSS variables. Now we only have to change this in one place.

body {
  --brand-color: #5865F2;
}

Just like that, our site is a slightly different shade of blue/purple, and the rebranding is complete. Cheers!

8. CSS Shorthand Properties

We've already seen some shorthand properties like border, but many other shorthand properties exist and have some fun tricks for working with them.

We've already seen this shorthand property as well - padding. When we supply a single value as the padding, it gets applied to all four sides:

p {
  /* all four sides */
  padding: 2px;
}

We've seen this behavior before. Where it gets interesting is if we add more values.

When we use two values, the first applies to the top and bottom, and the second applies to the left and right:

p {
  /* top and bottom | right and left */
  padding: 2px 4px;
}

One element where this is useful is for buttons that typically have more padding on the right and left than on the top and bottom.

With three values, they are applied to the top, left + right, and bottom, respectively:

p {
  /* top | right and left | bottom */
  padding: 2px 1px 4px;
}

This is useful for headers that might have more padding above them than below them.

Lastly, four separate values affect the top, right, bottom, and left margins in that order:

p {
  /* top | right | bottom | left */
  padding: 2px 1px 4px 7px;
}

This is the go-to method for giving unique padding to each side of an element (not extremely common, but useful in a pinch).

You might think you'll never be able to remember these variations, but it might help to recognize that they all generally work from the top, moving clockwise.

With two values from the top (and bottom) to the right (and left).
With three values from the top to the right (and left) to the bottom.
With four values from the top to the right to the bottom to the left.

There are many other shorthand properties, and this is just the beginning. Understanding shorthand properties can help you write more concise code.

Learning objective: Understand the separation of concerns between structure (HTML) and presentation (CSS) and its relevance to deploying AI models.

As Python developers, you are used to backend logic. However, an AI model (like a chatbot or image generator) often lives in a notebook until it is deployed. Tools like Streamlit, Flask, or Django allow you to deploy models, but CSS (Cascading Style Sheets) is what makes them usable and professional.

Think of it this way:

HTML: The skeleton/data structure.
CSS: The skin/presentation layer.
JavaScript/Python: The muscles/logic.

The Syntax of Style

CSS is not a programming language in the way Python is (it has no loops or logic gates by default), but it is a declarative language. You declare how an element should look, and the browser renders it.

9. The Logic of Style: The Cascade and Specificity

The Specificity Hierarchy

Inline Styles (<h1 style="...">): 1000 points (Avoid using these)
IDs (#header): 100 points
Classes/Attributes (.highlight): 10 points
Elements (h1): 1 point

Example:

/* 1 point */
p {
    color: blue;
}

/* 10 points - THIS WINS */
.text-red {
    color: red;
}

If the specificity is equal, the last rule defined (Source Order) wins. This is why it is called the Cascading Style Sheet.

<div class="activity discussion"> <h2 class="title">Calculate the Specificity</h2> <span class="minutes">5 min</span> </div>

Look at the following CSS and HTML. Discuss which color the text will be.

HTML:

<div id="container">
    <p class="intro">Hello AI World</p>
</div>

CSS:

#container p { color: purple; } /* Score: 100 + 1 = 101 */
.intro { color: green; }        /* Score: 10 */
p { color: red; }               /* Score: 1 */

10. AI-Assisted Styling and Debugging

CSS errors don't throw traces and elements just look wrong. This makes debugging frustrated. However, LLMs (like ChatGPT or Claude) are excellent at parsing the "Cascade" logic.

Prompt Engineering for CSS

When you are stuck, use AI to visualize the conflict.

Scenario: You can't figure out why a button isn't turning blue. Prompt Strategy:

Copy the HTML structure of the element.
Copy the relevant CSS.
Ask: "Why is the style .primary-btn not applying to my button? Explain the specificity conflict."

Example Prompt:

"I have a div with id 'hero' and class 'banner'. My CSS sets background-color to red for #hero and blue for .banner. Which one renders and why? Explain specifically using CSS specificity scores."

Generating Layouts

Instead of writing flexbox rules from scratch, describe the visual goal.

"Generate CSS for a responsive card layout where the image is on top and text is on the bottom. It should be a 3-column grid on desktop and 1-column on mobile."

11. Lab: Styling a Personal Profile Page

Learning objective: Style an HTML portfolio using core CSS rules and use AI to resolve conflicts.

Scenario: You have a raw HTML file representing an AI Engineer's portfolio. It looks like a document from 1995. You need to style it to look professional.

Step 1: Link and Reset

Create a style.css file.
Link it in your HTML <head>.

Add a basic body rule:

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
}

Step 2: The Layout (AI Assist)

Use an LLM to generate a layout for the "Projects" section.

Prompt: "Create CSS flexbox code to display a list of project cards horizontally. The container class is .project-list and individual items are .project-card."
Implement the code and adjust the padding/margins using the Box Model concepts.

Step 3: The Specificity Trap (Debugging)

Add this code to your CSS (intentionally introducing a conflict):
```
div.bio-text { color: grey; }
.bio-text { color: navy; }
```
Observe which color renders.
Task: Ask an AI chatbot to explain why the text is grey and how to make it navy without deleting the first rule (hint: increase specificity of the second rule or use !important—though ask the AI why !important is bad practice!).

Step 4: Visual Hierarchy

Style your headings (h1, h2) and links to create a clear visual hierarchy. Ensure your contact button stands out.

12. Wrap-Up and Reflection

Group Discussion:

How does the "Cascade" compare to Python's execution flow?
Was the AI explanation of the specificity conflict helpful? Did it use the "points" system?
Why might we want to use Classes (.) more often than IDs (#) for styling?

CSS Foundations: Selectors, Properties, and the Cascade

Table of Contents

Learning Objectives

Session Breakdown

1. Intro to CSS Concepts

What is CSS?

Why use CSS?

2. CSS Fundamentals

Syntax

Element selectors

Comments

3. The Box Model

Everything is a box

Content

Padding

Border

Margin

4. Common properties

Font properties

color

🎓 You Do

Practice

5. CSS Selectors

Class selector

🎓 You Do

ID selector

Combinators

6. Multiple Stylesheets

Why use multiple stylesheets?

Order of precedence

7. CSS Variables

Incoming rebrand

8. CSS Shorthand Properties

The Syntax of Style

9. The Logic of Style: The Cascade and Specificity

The Specificity Hierarchy

10. AI-Assisted Styling and Debugging

Prompt Engineering for CSS

Generating Layouts

11. Lab: Styling a Personal Profile Page

Step 1: Link and Reset

Step 2: The Layout (AI Assist)

Step 3: The Specificity Trap (Debugging)

Step 4: Visual Hierarchy

12. Wrap-Up and Reflection

Resources

`color`