Explore

MADS 4007: Day 4 CSS Code Along Sheet for CSS Selectors and Decorator Rules

Learning Outcomes: This has some carry over from Professor Jenelle on Day 3 and extends the concepts and applications:

Cascading Style Sheets (CSS), a cornerstone of modern web design

CSS Selectors

Layouts with CSS Flex

Selectors and Flexbox

Lecture: Introduction to Cascading Style Sheets (CSS) in Web Development

What is CSS?

CSS is the page marked language we use to style an HTML document. It describes how HTML elements should be displayed on the screen. It's what makes the web not just a collection of plain text but a visually engaging and user-friendly environment.

Analogy: Building a House and Building a Web Application

When we think about building a web application, it's helpful to draw an analogy to constructing a house. This analogy simplifies complex web development concepts and makes them more relatable, especially for those who are new to the field. Let’s explore this comparison:

HTML: The Structural Framing of a House - **In a House:** The structural framing is the skeleton of the house. It includes the foundations, walls, floors, and roof. This framing defines the shape and structure of the house, determining where everything goes. - **In Web Development:** HTML (HyperText Markup Language) serves a similar foundational role. It's the basic structure of a web page, defining elements like headers, paragraphs, images, and links. Just like a house’s framing determines where the rooms and windows will be, HTML determines where different parts of a web page will be placed.

CSS: The Paint, Wallpaper, and Decorative Elements - **In a House:** Once the structure is in place, you use paint, wallpaper, and other decorative elements to give it style and personality. These elements don’t change the structure but influence how it looks and feels. - **In Web Development:** CSS (Cascading Style Sheets) plays a similar role. It doesn't change the HTML structure, but it enhances the appearance of the web page. Through CSS, you can adjust colors, fonts, layouts, and more, much like choosing the color of your walls or the style of your curtains.

JavaScript: The Internet Signal Lending Active Intelligence - **In a House:** Consider the internet signal as a utility that brings your house to life. It enables smart home features, streaming services, and other interactive elements that make living in the house more dynamic and responsive. - **In Web Development:** JavaScript is the programming language that adds interactivity and dynamic features to a website. It's like the internet signal in your house – it powers features like form submissions, real-time updates, interactive maps, and animated graphics. JavaScript responds to user actions, processes data, and even alters the HTML and CSS in real-time to create a responsive and interactive user experience.

Integrating the Three for a Complete Web Application - **In a House:** A well-built house integrates the structure, the aesthetics, and the smart features seamlessly. Each component complements the others, creating a functional, beautiful, and intelligent living space. - **In Web Development:** Similarly, a well-designed web application integrates HTML, CSS, and JavaScript. HTML sets up the structure, CSS adds style and design, and JavaScript introduces interactive and dynamic elements. Together, they create a web application that is not only visually appealing but also functional and user-friendly.

This analogy helps in understanding how different technologies in web development work together. Each technology has its unique role, but it's their integration that creates a complete, functional, and engaging web application, much like how different elements come together to make a house a livable, dynamic home.

Extending the House Analogy: Programmable Design Elements in Web Development

Imagine the exciting possibility of being able to change the design elements and appearance of your house with just a few commands, almost like magic. This is exactly what CSS rules and selectors allow us to do in web development. Let's extend our house-building analogy to explore this concept further.

#### Programmable Design Elements in a House - **In a Dream House:** Picture a house where you could change the color of the walls, the style of your furniture, or the layout of your rooms with just a few clicks or voice commands. Want a living room with a different theme for a special occasion? Just select a new theme, and your house adapts instantly – the walls change color, the lighting adjusts, and even the artwork shifts to match the new theme. - **In Web Development:** This dream scenario is a reality. CSS (Cascading Style Sheets) allows us to programmatically change the design elements of a website. By using CSS rules and selectors, we can dynamically alter the look and feel of a webpage without touching its underlying structure (HTML).

#### CSS Rules and Selectors: The Magic Commands - **CSS Selectors:** In the realm of web development, selectors are like pointing a magic wand at different parts of your house. Selectors allow you to target specific HTML elements on a web page – you could target all paragraphs, every element with a certain class, or even a specific element with a unique ID. - **CSS Rules:** Once you've targeted an element with a selector, CSS rules are like the commands that bring about change. You can set properties like color, size, font, and layout. For instance, changing the color property in a CSS rule is akin to changing the color of your walls. Adjusting the margin and padding properties can be likened to moving your furniture around, creating more space, or bringing elements closer together.

#### The Power of Dynamic Styling - **In a House:** Imagine if changing your house's appearance for different seasons or occasions was as simple as running a program. Winter could bring cool blue tones and virtual snowflakes, while a birthday celebration could transform your living room into a vibrant party space. - **In Web Development:** This is exactly what we achieve with CSS. With media queries, for instance, we can change the style of a website depending on the screen size or device type. This is like having a house that automatically reconfigures itself for different guests or events.

#### Inviting Students to Explore As students of web development, you have the unique opportunity to experiment with this powerful and dynamic aspect of CSS. Just like programming the appearance of a dream house, you can learn to: - Write CSS selectors to target specific elements on a web page. - Apply CSS rules to these elements to alter their appearance and layout. - Use advanced CSS features to create responsive and interactive web designs.

CSS rules and selectors offer a level of control and creativity in web design that's akin to having a programmable house. As you delve deeper into CSS, I encourage you to experiment and explore the vast possibilities it offers. Just like architects and interior designers shape the living spaces, you, as a web developer, have the power to shape the digital world.

Dynamic CSS with JavaScript

In an upcoming lecture, we're going to take a fascinating journey into the world of dynamic web design, where CSS meets JavaScript. This integration allows for an interactive and responsive user experience, akin to a smart, responsive home that adapts to its inhabitants' needs.

JavaScript: The Conductor of Dynamic Changes

In Our Analogy: Consider JavaScript as the intelligent system in a house that senses and reacts to various conditions. For instance, if it starts raining, the system automatically closes the windows. Similarly, in web development, JavaScript acts as the brain behind the page, enabling it to react to user actions or other events.

Applying CSS Rules Under JavaScript Control

Dynamic Styling: Imagine a scenario on a website where a user is filling out an order form. If the user misses a required field or enters invalid information, JavaScript can dynamically apply CSS rules to highlight these errors.

For example, if a user forgets to fill out a mandatory field, JavaScript can change the background color or border of the input field to red, visually cueing the user to the error.

Example: Order Form Validation

HTML Structure: Let's say we have a simple HTML form for placing an order.

CSS for Indicating Errors: We define CSS classes for error highlighting, like changing the background color or border of an input field.

JavaScript in Action: When the user submits the form, JavaScript checks each field. If it finds an error, it applies the CSS error class to that specific input field, changing its appearance according to our predefined CSS rules.

Interactive Learning

Hands-On Practice: In our upcoming sessions, we will dive into practical examples and exercises. You'll learn to write JavaScript functions that interact with CSS, creating a dynamic and responsive user experience.

Real-World Applications: This is not just an academic exercise. In real-world web development, such as in the eCommerce projects I've worked on, this functionality is crucial for guiding users through complex forms, ensuring data accuracy, and enhancing overall user experience.

The ability to dynamically apply CSS rules using JavaScript opens up a world of possibilities for creating interactive and user-friendly web applications. It's like having a house that intelligently adapts to its inhabitants. Stay tuned for our next sessions, where we will explore these concepts in depth, equipping you with the skills to create more dynamic, responsive, and engaging web applications.

How Does CSS Work?

CSS works by selecting elements in the HTML document and applying styles to them. These styles can include color, layout, fonts, and even animations. The reason we call it "cascading" is that styles can be defined in various places and they cascade or flow down, with certain rules taking precedence over others.

Deep Dive: How CSS Works with Selectors and Rules

The Core Mechanism of CSS: Selectors and Rules To fully grasp how CSS works, it's essential to understand the concepts of selectors and rules. CSS (Cascading Style Sheets) is the language for describing the presentation of web pages, including colors, layout, and fonts. Its power lies in its ability to select HTML elements and apply styles to them.

Selectors: The Targeting Mechanism in CSS - **Types of Selectors:** 1. **HTML Tag Name Selector:** Targets all instances of a specific HTML element. For example, `p { ... }` targets all `<p>` (paragraph) elements. 2. **Class Selector:** Targets all elements with a specific class attribute. Denoted by a period (`.`) followed by the class name, like `.highlight { ... }`, it applies styles to any element with `class="highlight"`. 3. **ID Selector:** Targets a unique element with a specific ID attribute. Denoted by a hash (`#`) followed by the ID, such as `#navbar { ... }`, it styles the element with `id="navbar"`.

- **Selector Specificity:**

Selectors have different levels of specificity. An ID selector is more specific than a class selector, which in turn is more specific than a tag name selector. Specificity determines which style is applied when there are conflicting rules.

#### CSS Rules: Defining Styles - **Structure of a CSS Rule:** A CSS rule consists of a selector and a declaration block.

The declaration block, enclosed in curly braces `{}`, contains one or more declarations separated by semicolons. Each declaration includes a property and a value, like `color: blue;`. - **Example of a CSS Rule:** ```css p { color: red; font-size: 14px; } ``` This rule applies to all `<p>` elements, setting their text color to red and font size to 14 pixels.

#### The "Cascading" in CSS - **Cascading Order:** The term "cascading" refers to the way CSS applies styles by following a specific order of precedence. This order is based on selector specificity, source of styles (such as user stylesheets, author stylesheets, or browser default styles), and the order of the rules in the stylesheet. - **Overriding Styles:** Higher specificity selectors override styles set by lower specificity selectors. For example, an ID selector will override a class selector for the same element. Also, if two selectors have equal specificity, the latter rule in the CSS file takes precedence.

#### Applying CSS to HTML Elements - **Integration with HTML:** In a web page, the browser reads the HTML and CSS files. CSS selectors target the corresponding HTML elements, and the browser applies the styles defined in the CSS rules to these elements. - **Dynamic Styling:** CSS also allows for dynamic styling based on different conditions, like screen size (using media queries) or user interaction (using pseudo-classes like `:hover`).

Understanding the interplay between CSS selectors and rules is key to mastering web design.

Selectors enable precise targeting of HTML elements, while rules define the styling. The cascade ensures a logical, hierarchical application of styles, making CSS a powerful tool for creating visually compelling and consistently styled web pages. As you progress in your journey as web developers, mastering these concepts will enable you to create more sophisticated and engaging user experiences.

CSS in the HTML Browser Object Model

In the context of the HTML Browser Object Model, CSS plays a critical role in styling the HTML node elements. The browser reads the HTML file and creates a Document Object Model (DOM), a tree-like structure. CSS then applies styles to these nodes based on the selectors and rules defined in the stylesheet.

Example: Basic CSS

Let's start with a simple example. Imagine an HTML file with a <div> element:

<div id="welcome-message">Welcome to Our Store!</div>

To style this element with CSS, we might write:

#welcome-message {

color: blue;

font-size: 20px;

text-align: center;

}

This CSS code changes the color, font size, and alignment of the text within the <div>.

Real-World Application

In my professional experience, especially while building eCommerce platforms for large companies like XYZ Corp, CSS was crucial in creating a consistent and brand-aligned look across all pages. For example, we used CSS to ensure that all product descriptions followed the company’s typography and color scheme, enhancing both aesthetics and user experience.

Advanced CSS: Responsive Design

As web developers, it's vital to ensure that our websites look good on all devices. This is where CSS comes in handy with features like media queries. For instance, for XYZ Corp’s online store, we used CSS media queries to adjust the layout on different screen sizes, ensuring a seamless shopping experience on both desktops and mobile devices.

Conclusion

CSS is an essential tool in the web developer's toolkit. It brings life to web applications, ensuring they are not only functional but also visually appealing and user-friendly. As you delve deeper into web development, mastering CSS will enable you to create more engaging and effective websites.

CSS Drills:

Exercise 1: CSS with div and section Elements

Objective

Create an HTML page with div and section elements.

Use inline CSS to set different text attributes for each.

Instructions

Create an HTML document.

Add a div element and a section element to the body of the HTML document.

Use inline CSS within the div and section tags to set different text attributes (like color, font-size, and text-align) for each.

Example Code

<!DOCTYPE html>

<html>

<head>

<title>CSS Exercise 1</title>

</head>

<body>

<div style="color: blue; font-size: 20px; text-align: center;">

This is a div element with blue text, font size of 20px, and centered text.

</div>

<section style="color: green; font-size: 16px; text-align: left;">

This is a section element with green text, font size of 16px, and left-aligned text.

</section>

</body>

</html>

Tasks

Open a text editor and create a new HTML file.

Copy the example code into your file.

Save the file and open it in a web browser to see the results.

Experiment by changing the text attributes in the inline CSS to see how they affect the appearance of the div and section elements.

Learning Outcome

This exercise helps in understanding the basics of applying CSS directly within HTML elements using inline styles. It demonstrates the effect of CSS properties on different HTML elements and encourages experimentation with various CSS attributes.

In Exercise 1, we are not using CSS selectors in the traditional sense where they are defined in a <style> tag or an external CSS file. Instead, we are using inline CSS, which involves directly applying the CSS properties to HTML elements using the style attribute.

In inline CSS, each HTML element is styled individually, and the CSS properties are written within the style attribute of the respective HTML tag. This method does not require selectors since the style is applied directly to the element it's written in. It's a quick way to apply styles but is less flexible and harder to maintain compared to using selectors in a separate stylesheet or within a <style> tag in the HTML document.

To clarify:

Using Selectors (Not in this example): Typically, selectors like element selectors, class selectors, or ID selectors are used in a separate CSS section or file. For example:

cssCopy code

div { color: blue; } section { color: green; }

Inline CSS (As used in this example): Directly applies styles to an individual element without the need for selectors.

htmlCopy code

This exercise focuses on understanding how CSS properties can be applied directly to individual HTML elements and observing their immediate impact.

Exercise 2: CSS with Structural HTML Tags

Objective Create an HTML page that utilizes structural HTML tags, such as `header`, `nav`, `main`, `footer`, etc. Use an external CSS file to style these elements.

Instructions

1. Create two files: an HTML document and a CSS file. 2. In the HTML file, add structural elements like `header`, `nav`, `main`, `aside`, and `footer`. 3. Link the external CSS file in the HTML using the `<link>` tag in the `<head>` section. 4. In the CSS file, write styles for each of the structural elements.

Example Code

**index.html** ```html <!DOCTYPE html> <html> <head> <title>CSS Exercise 2</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header style="background-color: lightblue; text-align: center;"> <h1>Welcome to Our Website</h1> </header>

<nav style="background-color: lightgreen; padding: 10px;"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav>

<main style="background-color: lightyellow; padding: 20px;"> <p>This is the main content of the webpage.</p> </main>

<aside style="background-color: lightgrey; padding: 15px;"> <p>Additional information goes here.</p> </aside>

<footer style="background-color: lightcoral; text-align: center;"> <p>Footer information.</p> </footer> </body> </html> ```

**styles.css** ```css header { background-color: lightblue; text-align: center; }

nav { background-color: lightgreen; padding: 10px; }

nav ul { list-style-type: none; }

nav ul li { display: inline; margin-right: 10px; }

main { background-color: lightyellow; padding: 20px; }

aside { background-color: lightgrey; padding: 15px; }

footer { background-color: lightcoral; text-align: center; padding: 10px; } ```

Work flow: - Create a new HTML file named `index.html` and a CSS file named `styles.css`. - Copy the example HTML code into the `index.html` file and the CSS code into the `styles.css` file. - Save both files in the same directory. - Open `index.html` in a web browser to see how the external CSS styles the page.

Learning Outcome

This exercise introduces the concept of separating content (HTML) from presentation (CSS).

By using an external stylesheet, you can maintain consistency across multiple web pages and make it easier to update styles globally.

This approach is fundamental in web development for creating scalable and maintainable websites.

Exercise 3: HTML Page with a Dynamic Left Navigation Bar

Objective Create an HTML page representing a men's clothing online eCommerce retailer.

The page should include a left navigation bar with menu items.

When the mouse hovers over each menu item, the color and font of the item should change dramatically.

Instructions 1. Create an HTML file and a corresponding CSS file. 2. In the HTML file, design a layout that includes a left navigation bar with menu items typical for a men's clothing store (e.g., Home, Suits, Shirts, Trousers, Accessories). 3. In the CSS file, style the navigation bar and set hover effects on the menu items to change their color and font when hovered over.

#### Example Code

**index.html** ```html <!DOCTYPE html> <html> <head> <title>Men's Clothing Store</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="left-nav"> <ul> <li>Home</li> <li>Suits</li> <li>Shirts</li> <li>Trousers</li> <li>Accessories</li> </ul> </div>

<div class="main-content"> <h1>Welcome to Our Men's Clothing Store</h1> <p>Explore our latest collection of suits, shirts, trousers, and accessories.</p> </div> </body> </html> ```

**styles.css** ```css body { font-family: Arial, sans-serif; }

.left-nav { width: 200px; position: fixed; left: 0; top: 0; bottom: 0; background-color: #f0f0f0; padding: 20px; }

.left-nav ul { list-style: none; padding: 0; }

.left-nav ul li { padding: 10px; margin-bottom: 5px; background-color: #e0e0e0; cursor: pointer; }

.left-nav ul li:hover { background-color: #333; color: white; font-weight: bold; font-size: 18px; }

.main-content { margin-left: 220px; padding: 20px; }

Workflow: - Create a new HTML file named `index.html` and a CSS file named `styles.css`. - Copy the example HTML code into the `index.html` file and the CSS code into the `styles.css` file. - Save both files in the same directory. - Open `index.html` in a web browser to see the left navigation bar and the hover effects on the menu items.

Learning Outcome This exercise helps you understand how to create a navigation bar and use CSS hover selectors to add dynamic interactions to web elements. The hover effect enhances user experience and is a common feature in modern web design, particularly in eCommerce websites.

Understanding the . and # Notations in CSS

As we conclude our exploration of CSS selectors, it's crucial to solidify our understanding of the `. (dot)` notation for classes and `# (hash)` notation for IDs.

These notations are fundamental to CSS and are key to effectively styling web pages.

#### The Dot (.) Notation for Classes

- **Usage:** The dot `.` is used in CSS to denote a class selector. - **Function:** When you see a `.`, it indicates that the style is being applied to all HTML elements that have the specified class attribute.

- **Flexibility:** One of the main advantages of class selectors is that they are not unique. Multiple elements can share the same class, allowing you to apply a common style to several elements. This makes the class selector extremely versatile for styling elements that share common characteristics. - **Example:** If you have `.button { color: blue; }` in your CSS, it means that all HTML elements with `class="button"` will have blue text.

#### The Hash (#) Notation for IDs

- Usage: The hash `#` is used in CSS to denote an ID selector.

- **Uniqueness:** Unlike classes, ID selectors are unique within a page. Each ID should be used for a single element. This makes the ID selector ideal for targeting specific, individual elements that require unique styling. - **Specificity:** ID selectors have higher specificity compared to class selectors. This means that if there are conflicting styles, the style defined by the ID selector will typically take precedence over class selectors. - **Example:** If you have `#header { font-size: 24px; }` in your CSS, it means that the HTML element with `id="header"` will have a font size of 24 pixels.

Emphasizing Best Practices

- **Classes for Reusable Styles:** Use classes when you have a style that you intend to reuse across multiple elements. They are your go-to for general styling.

- **IDs for Specific Elements:** Use IDs for styling that is unique to a single element, especially when you need to override other styles or when using JavaScript to manipulate the element.

- **Maintaining Readability and Structure:** Always remember to keep your styles organized and readable. Using classes and IDs effectively helps maintain a clean and structured stylesheet, making it easier to manage and update your website's design.

Exercise 4: CSS Selectors by HTML Tag Name

Objective

Create an HTML page with various elements (like `p`, `h1`, `a`, etc.) and use CSS to style these elements using tag name selectors.

#### Instructions 1. Create an HTML file and a corresponding CSS file. 2. Add different HTML elements such as paragraphs, headers, and links to the HTML file. 3. Use CSS to style these elements using their tag names as selectors.

#### Example Code

**index.html** <!DOCTYPE html> <html> <head> <title>CSS Exercise 4</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Tag Name Selectors</h1> <p>This is a paragraph.</p> <a href="#">This is a link.</a> </body> </html> ```

p { font-size: 16px; color: grey; }

a { text-decoration: none; color: red; } </style>

Exercise 5: CSS Selectors by Class Name

#### Objective Modify the same HTML page to include class attributes, and style these elements using class selectors in CSS.

#### Instructions 1. Add class attributes to the HTML elements in the existing HTML file. 2. Use CSS to style these elements using their class names as selectors.

#### Updated Code

**index.html** ```html <!DOCTYPE html> <html> <head> <title>CSS Exercise 5</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="header">Class Name Selectors</h1> <p class="text">This is a paragraph with a class.</p> <a href="#" class="link">This is a link with a class.</a> </body> </html> ```

**styles.css** ```css .header { color: green; }

.text { font-size: 18px; color: blue; }

.link { text-decoration: underline; color: orange; } ```

Exercise 6: CSS Selectors by ID

#### Objective Further modify the same HTML page to include ID attributes, and style these elements using ID selectors in CSS.

#### Instructions 1. Add ID attributes to the HTML elements in the existing HTML file. 2. Use CSS to style these elements using their ID names as selectors.

#### Updated Code

**index.html** ```html <!DOCTYPE html> <html> <head> <title>CSS Exercise 6</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 id="headerId">ID Selectors</h1> <p id="textId">This is a paragraph with an ID.</p> <a href="#" id="linkId">This is a link with an ID.</a> </body> </html> ```

**styles.css** ```css #headerId { color: purple; }

#textId { font-size: 20px; color: brown; }

#linkId { text-decoration: overline; color: pink; } ```

Tasks for Each Exercise - For each exercise, create or modify the HTML and CSS files as per the instructions. - Save the changes and open the HTML file in a web browser to see how different types of selectors (tag, class, and ID) apply styles to HTML elements.

Learning Outcome These exercises demonstrate the use of different types of CSS selectors: tag name selectors, class selectors, and ID selectors. Understanding these selectors is crucial in CSS, as they provide different methods to target and style HTML elements on a webpage.

Categorized overview of the most commonly used CSS properties.

### Text and Font Styling - `color`: Sets the color of text. - `font-family`: Specifies the font of text. - `font-size`: Sets the size of the font. - `font-style`: Defines the style of the font (e.g., italic). - `font-weight`: Sets the weight (boldness) of the font. - `line-height`: Specifies the line height. - `text-align`: Aligns the text (e.g., left, right, center). - `text-decoration`: Adds decoration to text (e.g., underline, line-through). - `text-transform`: Controls the capitalization of text. - `letter-spacing`: Sets the space between characters. - `word-spacing`: Sets the space between words. - `text-shadow`: Adds shadow to text.

### Box Model - `width`: Specifies the width of an element. - `height`: Specifies the height of an element. - `padding`: Generates space around an element's content. - `margin`: Generates space around an element. - `border`: Defines the border around an element. - `box-sizing`: Defines how the width and height of an element are calculated.

### Positioning and Layout - `position`: Specifies the type of positioning (e.g., relative, absolute, fixed). - `top`, `right`, `bottom`, `left`: Specifies the positioning of an element. - `overflow`: Specifies what happens if content overflows an element's box. - `display`: Specifies the display behavior of an element (e.g., block, inline, flex). - `flex`: A shorthand for flex-related properties in a flex container. - `grid`: A shorthand for grid layout related properties. - `align-items`, `justify-content`: Align elements in flex and grid containers.

### Backgrounds and Colors - `background-color`: Sets the background color of an element. - `background-image`: Sets one or more background images for an element. - `background-position`: Specifies the position of the background image. - `background-repeat`: Sets how a background image will be repeated. - `background-size`: Specifies the size of the background image. - `opacity`: Sets the opacity level for an element.

### Visual Effects - `border-radius`: Defines the radius of an element's corners. - `box-shadow`: Adds shadow to elements. - `visibility`: Specifies whether or not an element is visible. - `cursor`: Specifies the type of cursor to be displayed. - `transition`: A shorthand for transition-related properties. - `transform`: Applies a 2D or 3D transformation to an element.

### Pseudo-Classes and Pseudo-Elements - `:hover`, `:active`, `:focus`: Pseudo-classes that define styles in different states. - `::before`, `::after`: Pseudo-elements to insert content before or after an element's content.

### Animations - `animation`: A shorthand property for all animation-related properties.

### Miscellaneous - `z-index`: Specifies the stack order of positioned elements. - `clip-path`: Clips an element to a basic shape or an SVG source. - `filter`: Applies graphical effects like blur or saturation to an element.

### Media Queries - `@media`: Used to apply styles for different devices and screen sizes.

This list covers the most frequently used CSS properties but is not exhaustive. CSS continues to evolve, and new properties and capabilities are regularly added. For the most current and comprehensive list, you might want to refer to the official documentation or CSS reference guides.

For detailed usage examples:

⁠

https://www.w3.org/Style/CSS/Overview.en.html⁠

⁠

https://developer.mozilla.org/en-US/docs/Web/CSS⁠

⁠

https://www.w3.org/Style/CSS/specs.en.html⁠

Mozilla CSS Documentation Site

The Mozilla Developer Network (MDN) provides comprehensive documentation on CSS (Cascading Style Sheets) for web developers. MDN has been documenting web technologies, including CSS, HTML, and JavaScript, since 2005

⁠

1⁠

⁠

. The MDN CSS documentation covers various aspects of CSS, including selectors, properties, values, layout patterns, and more

⁠

2⁠

⁠

One specific CSS at-rule mentioned in the MDN documentation is the @document rule. The @document CSS at-rule restricts the style rules contained within it based on the URL of the document. It is primarily designed for user-defined style sheets but can also be used on author-defined style sheets. The @document rule can specify one or more matching functions, and if any of the functions apply to a given URL, the rule will take effect on that URL. The available functions include matching an exact URL and matching if the document URL starts with a specific value. It's important to note that the -moz-prefixed version of this property, @-moz-document, is currently only supported in Firefox and has certain limitations

⁠

3⁠

⁠

The MDN CSS documentation is a valuable resource for web developers looking to learn and understand CSS concepts, syntax, and best practices. It provides detailed reference documentation for all features of the CSS language, including properties, values, and selectors. It also offers examples, tutorials, and guides to help developers apply CSS to style and layout web pages effectively

⁠

4⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

MADS 4007: Day 4 CSS Code Along Sheet for CSS Selectors and Decorator Rules

Lecture: Introduction to Cascading Style Sheets (CSS) in Web Development

What is CSS?

Analogy: Building a House and Building a Web Application

Dynamic CSS with JavaScript

JavaScript: The Conductor of Dynamic Changes

Applying CSS Rules Under JavaScript Control

Example: Order Form Validation

Interactive Learning

How Does CSS Work?

Deep Dive: How CSS Works with Selectors and Rules

CSS in the HTML Browser Object Model

Example: Basic CSS

Real-World Application

Advanced CSS: Responsive Design

Conclusion

CSS Drills:

Exercise 1: CSS with div and section Elements

Objective

Instructions

Example Code

Tasks

Learning Outcome

Exercise 2: CSS with Structural HTML Tags

Exercise 3: HTML Page with a Dynamic Left Navigation Bar

Understanding the . and # Notations in CSS

- **Usage:** The hash `#` is used in CSS to denote an ID selector.

Exercise 4: CSS Selectors by HTML Tag Name

Categorized overview of the most commonly used CSS properties.

- Usage: The hash `#` is used in CSS to denote an ID selector.