(UPI) Chapter 3: Web Design with Cascading Style Sheets (CSS) Course (How To)

Exploring Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) enhance web design by separating content from visual styling. This allows for consistent formatting, easy updates, and improved usability across websites.

Chevron 9 steps

• instruction

  Introduction to CSS

• instruction

  External Style Sheets (Best Practice)

• instruction

  Multiple Style Sheets

• instruction

  Embedded Styles (Not Recommended for Large Projects)

• instruction

  Inline Styles (Avoid if Possible)

• instruction

  How to Use Basic CSS Selectors to Apply Styles to HTML Elements

• instruction

  Example HTML and CSS Code Using Selectors

• instruction

  When and How to Use the Normalize Style Sheet for Browser Compatibility

• Exploring Cascading Style Sheets (CSS) Quiz

  5 questions

Advanced CSS Color Specifications: RGBA, HSL, and HSLA

CSS offers advanced color options like RGBA, HSL, and HSLA, enabling precise control over color properties such as transparency, hue, saturation, and lightness. These specifications allow for more nuanced and accessible designs, making it easier to create visually appealing and adaptive color schemes.

Chevron 7 steps

• instruction

  How to Specify Measurements in CSS

• instruction

  Choosing Between Absolute and Relative Units

• instruction

  Practical Examples in CSS

• instruction

  Choosing Units Based on Use Case

• instruction

  How to Specify Colors in CSS

• instruction

  Advanced Techniques to Specify Colors in CSS

• Advanced CSS Color Specifications: RGBA, HSL, and HSLA Quiz

  5 questions

Styling and Formatting Fonts in CSS

In CSS, controlling the font family and font size of text is crucial for achieving a readable and aesthetically pleasing design. The font-family and font-size properties allow you to define the type and size of fonts in a flexible way that adapts to different devices and user preferences. This section explains how to set these properties effectively.

Chevron 9 steps

• instruction

  Choosing Font Families

• instruction

  Setting Font Sizes

• instruction

  Setting Font Properties in the Body Element

• instruction

  Practical Examples

• instruction

  Properties for Styling Fonts

• instruction

  Properties for Text Formatting

• instruction

  Adding Shadows to Text with CSS

• instruction

  Floating Images so Text Flows Around Them

• Styling and Formatting Fonts in CSS Quiz

  5 questions

CSS Selectors to Apply Styles

To apply more specific styling to HTML elements, CSS provides advanced selectors that let you target elements based on their relationships, attributes, and other characteristics. Here’s a closer look at relational selectors, combination selectors, and attribute selectors.

Chevron 6 steps

• instruction

  Relational Selectors

• instruction

  Combination Selectors

• instruction

  Attribute Selectors

• instruction

  Using Pseudo-Class and Pseudo-Element Selectors in CSS

• instruction

  Understanding CSS Cascade Rules

• CSS Selectors to Apply Styles Quiz

  5 questions

Creating a Styled Web Page with CSS and HTML

This section outlines how to structure a web page using HTML and CSS for various formatting and styling needs, such as applying colors, text shadows, and positioning elements. We’ll look at the HTML structure and the accompanying CSS file that styles the page.

Chevron 2 steps

• instruction

  HTML Structure for the Web Page

• Creating a Styled Web Page with CSS and HTML Quiz

  5 questions

Using Developer Tools and Custom CSS Properties

This stage covers the use of browser developer tools for inspecting and debugging CSS, along with the implementation of CSS custom properties (variables). Developer tools allow real-time inspection and modification of HTML and CSS, while custom properties enable reusable, maintainable, and flexible styling across a webpage, including global and scoped variables for easier management and theming.

Chevron 5 steps

• instruction

  Using Developer Tools to Inspect CSS Styles

• instruction

  Using CSS Custom Properties (CSS Variables)

• instruction

  Creating and Using CSS Custom Properties (CSS Variables)

• instruction

  Using Custom Properties Locally

• Using Developer Tools and Custom CSS Properties Quiz

  5 questions