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

To Do This Week

Reminders

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.

Info-Card: Applying CSS Styles

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

Blackbird Project: Applying CSS Styles

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.

 

 

 

 

 

 

 

To Do This Week

REMINDERS

CSS INTRO: CASCADING STYLE SHEETS

Inline/Embedded/External CSS
Selectors, Properties and Values  .stanza { color:blue;}

CSS reference

CSS PRINCIPLES (WHAT GETS APPLIED?)

location (cascade)
inheritance
specificity
!important ( color: red !important; )

DEFINING SELECTORS:

name element: h1, p,
name class or id: .stanza, #bio
context: #bio img,  .stanza h3
pseudo-classes :p::first-letter, p:first-of-type, p:first-of-type:first-letter,
link-styles : a:link, a:hover (add to blackbird)
attribute or values

CSS VALUE UNITS

0, 12px, 50%, 1.5em

FORMATTING TEXT:

color
font-family (web fonts)
font-size (px,%,em)
font-weight (bold)
font-style (italic/oblique)
text-decoration (underline, overline, line-through, none)
text-align (center, left, right, justify)
formatting text css properties

TYPOGRAPHY RULES OF THUMB:

no more than 2 fonts
difference, repetition,
padding and white-space
line-height:1.5;
10-15 words per line,
web-safe fonts

BLOCK-LEVEL STYLES (THE BOX MODEL):

box-model
width/height
margin
padding
borders – (pixel width,  line-type, color) example: border: 1px solid red;
backgrounds – example: background-color: lightblue; or background: lightblue;

STYLING BLOCK-LEVEL ELEMENTS:

width/height (px, %, em, vh, vw)
vh – viewport height
vw – viewport width

max-width and min-width  (in pixels)
max-height and min-height

padding (px or %)  –

  • padding: 5px;
  • padding: 5px 10px;
  • padding: 5px 2px 10px 12px;

margin (px or %) –

  • margin: 5px;
  • margin: 5px 10px;
  • margin: 5px 2px 10px 12px;

*collapsible margins on vertical boxes- the bigger margin overtakes smaller

**outline all block elements with colored border to see them

MOVING ELEMENTS TO CENTER:

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

Background Property:

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

VS

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

background images

css3 background images

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

Advanced CSS

DISPLAY PROPERTY

display: block, inline, none, inline-block, (flex, grid)

WEB COLOR

Working with Web Colors:
Adobe Kuler  (also in PS)
colorschemedesigner.com

web color values: RGB, 0- 255
hexadecimals
rgb/rgba    “opacity” vs rgba
HSL color picker

Info-Card – Applying CSS Styles

Read about the Info-Card CSS assignment due this week.

  1. Open the folder “info-card” folder from Sublime Text – you will see all the files in the left sidebar
  2. Create your stylesheet – either linked as a CSS file or embedded in the <style></style> tags 
  3. Apply at least 10 CSS property styles to the HTML elements in the <body> – h1, figure, img, p, table, ol/ul, body, font styles, etc.
  4. Upload to the server the folder “info-card” (replacing what is there). The folder should contain the index.html file (with its internal CSS) and the one image file
  5. Check to see that your file structure works using this url path – https://dtc-wsuv.org/”your folder”/info-card/

Blackbird Project – Applying CSS Styles

Read about the assignment for next week:
Blackbird CSS Design / 10%

Follow along with the Blackbird CSS video to learn how to apply CSS styles and design your Blackbird Project.

Do not be overly ambitious! You are learning. You will be graded on thoughtful and proper use of CSS styles. I will not be grading on design quality. Effort counts!

  1. temporarily give a different color border to all block elements so that you see the structure.
  2. create a structure for the stanzas and other content by applying margin and padding styles 
  3. position and size your image inserts
  4. adjust background images
  5. apply font styles to the headings, paragraphs and stanza’s
  6. apply a color scheme
  7. style your links

Blackbird todo list before submitting:

  • validate your project (validate often!)
  • use a color scheme with good contrast of dark and light
  • add “alt” text to images
  • apply styles to links
  • format your html and css so that it is readable: tab in for nested elements, keep alignments