WEEK 4 : Cascading Style Sheets – CSS
(September 11-15)

To Do This Week


Codecademy issues, screengrabs, lessons, scores…
Submitting to Canvas.

How to validate the HTML and CSS:
Validator.w3.org  


CSS INTRO: CASCADING STYLE SHEETS

Open your info-card folder FROM Sublime Text. You should see the index.html file and the img folder with an image inside. Follow along in class with to learn about CSS and about applying CSS styles it to your HTML.

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

Info-Card Example

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

CSS reference

CSS PRINCIPLES (WHAT GETS APPLIED?)

inheritance
location (cascade)
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, % or em)

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;  // NOT <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


Blackbird Project – Applying CSS Styles

Read about the main assignment this 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