CPSC 1030 Chapter 3

Chapter 3: Configuring Color and Text with CSS

Learning Outcomes

  • Understand the evolution of style sheets from print to web.

  • Advantages of using Cascading Style Sheets (CSS).

  • Apply color to web pages and create style sheets for color and text properties.

  • Use various types of styles: inline, embedded, and external.

  • Effectively apply selectors and utilize the CSS cascade.

  • Validate CSS for correctness.

Overview of Cascading Style Sheets (CSS)

  • Initially used in desktop publishing to apply styles to print media.

  • CSS is a flexible, cross-platform language developed by W3C for web content styling.

  • Provides enhanced typography and layout control by separating style from content.

Advantages of CSS

  • Greater control over typography and page layout.

  • Allows for storing styles in separate documents, leading to smaller file sizes.

  • Simplifies site maintenance by enabling centralized style management.

Types of CSS

  1. Inline Styles: Defined within an HTML element's style attribute, applying styles to individual elements only.

  2. Embedded Styles: Defined within a <style> element in the head of an HTML document, applying styles site-wide.

  3. External Styles: Defined in a separate .css file linked to HTML files, allowing multiple pages to share the same styles.

CSS Syntax

  • CSS rules consist of a Selector and a Declaration that consists of properties and values.

  • Example of a CSS rule:

    body {
    color: blue;
    background-color: yellow;
}

Common CSS Properties

  • Properties to control background colors, font styling, text alignment, and more, such as:

    • background-color

    • color

    • font-family

    • font-size

    • margin

    • text-align

Using Color on Web Pages

  • Color on monitors is created using RGB values (0-255 for Red, Green, Blue).

  • Hexadecimal representation is commonly used to specify color values (e.g., #FF0000 for red).

Color Choice and Accessibility

  • Aim for a color scheme that ensures sufficient contrast for readability.

  • Tools available online for contrast checking and color selection can assist designers.

Configuring Color with CSS

  • Inline CSS: Styles can be directly placed within HTML tags using the style attribute.

  • Embedded CSS: Styles defined within <style> tags affect all included HTML elements in that document.

  • External CSS: Styles are placed in a separate .css file linked to HTML.

CSS Selectors

  • Different selector types allow targeted styling for elements:

    • Element Selector: Targets all instances of an HTML element.

    • Class Selector: Targets elements with a specified class.

    • ID Selector: Targets a unique element with a specified ID.

    • Descendant Selector: Targets elements based on their hierarchy (context).

Practical Examples and Usage

  • Inline example: <h1 style="color:#FF0000">Red Heading</h1>.

  • Embedded example:

    <style>
body { background-color: #000000; color: #FFFFFF; }
</style>

Summary

This chapter provides a foundation for understanding and applying CSS rules related to color and text on web pages, covering the various types of style configurations, syntax, and accessibility considerations.