WEEK 4 : Cascading Style Sheets – CSS
(September 9-13)

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