WEEK 4 : Cascading Style Sheets – CSS (Jan 28)

To Do This Week

Module Notes

Info-Card Class List
Blackbird Class List

Workshop and Help at the end of class…

Reminders

  • Check URLs before submitting to Canvas.
  • Validate HTML and CSS before submitting to Canvas. (You can use the Web Developer Chrome extension)
  • File and folder names: NO uppercase letters, NO spaces.
  • Project folders should contain all project files, including an “img” folder with images and an “index.html” file
  • Example project URLs:
    • https://dtc-wsuv.org/sjones24/info-card/</code
    • https://dtc-wsuv.org/sjones24/blackbird/

    CSS Introduction: Cascading Style Sheets

    Inline/Embedded/External CSS

    Key Concepts:

    • Selectors, Properties, and Values: .stanza { color: blue; }
    • CSS Reference

    CSS Principles

    • Location (Cascade): Order of CSS matters.
    • Inheritance: Child elements inherit styles from parent elements.
    • Specificity: Which rules take precedence.
    • !important: Overrides other styles (e.g., color: red !important;).

    Defining Selectors

    CSS Value Units

    Examples: 0, 12px, 50%, 1.5em

    Formatting Text

    • Properties:
      • color, font-family, font-size, font-weight, font-style
      • text-decoration: underline, overline, line-through, none
      • text-align: center, left, right, justify
    • CSS Text Properties

    Typography Rules of Thumb

    • Use no more than two fonts.
    • Focus on contrast and repetition.
    • Set line-height: 1.5.
    • Limit to 10-15 words per line.
    • Use web-safe fonts.

    Block-Level Styles (The Box Model)

    Box Model Reference

    • Properties: width, height, margin, padding, border, background
    • Example: border: 1px solid red;

    Styling Block-Level Elements

    • Use relative units like px, %, em, vh, vw.
    • Set max-width, min-width, max-height, min-height.
    • Margins:
      • margin: 5px;
      • margin: 5px 10px;
      • margin: 5px 2px 10px 12px;
    • Collapsible margins: Larger margin overtakes smaller.

    MOVING ELEMENTS TO CENTER:

    margin: 0 auto;  // Do NOT use <center>!

    Background Property

    Shorthand:

    background: white url(image.png) no-repeat fixed 100px 200px;

    Individual Properties:

    • background-color: white;
    • background-image: url(image.png);
    • background-repeat: no-repeat;
    • background-attachment: fixed;
    • background-position: 100px 200px; // x and y positions

    Additional Background Properties:

    • background-size: 100%;
    • background-size: cover;
    • background-size: contain;

    Background Images Reference

    CSS3 Background Images

    Advanced CSS

    Display Property

    Examples: block, inline, none, inline-block, flex, grid

    WEB COLOR

    Info-Card: Applying CSS Styles
    DUE: January 31

    • Open the “info-card” folder in Sublime Text.
    • Create your stylesheet (linked CSS file or embedded in <style> tags).
    • Apply at least 10 CSS properties to HTML elements (e.g., h1, img, p, table).
    • Upload the “info-card” folder to the server, replacing the existing files.
    • Verify your project at https://dtc-wsuv.org/[your folder]/info-card/.

    Blackbird Project: Applying CSS Styles & Design
    DUE: February 14

    Follow the Blackbird CSS assignment for next week.

    • Highlight block elements with temporary borders.
    • Structure stanzas using margin and padding.
    • Position and size image inserts.
    • Adjust background images.
    • Style headings, paragraphs, and stanzas.
    • Apply a cohesive color scheme.
    • Style links.

    Before Submitting

    • Validate your project frequently.
    • Ensure good contrast in your color scheme.
    • Add “alt” text to all images.
    • Format your HTML and CSS for readability.