WEEK 4 : Cascading Style Sheets – CSS
(February 8-12)

To Do This Week

FreeCodeCamp: Basic CSS


Video Lectures

One long video this week instead of two shorter ones. Just break up your viewing.

Overview of Cascading Style Sheets: 04:15
Adding a Stylesheet to the Blackbird Project: 14:03

Ignore dates in this please!

 


Zoom Class

Blackbird Projects – Due 2/26
Web Developer / Validation
Tables and Forms
Inline/Internal/Embedded Stylesheets
Styling Inline and Block-level Elements
Background images 
Mini-projects  – add CSS


Notes:

Blackbird Projects Due: Friday FEB 26 (by midnight)

Previous Blackbird Projects
Previous Blackbird Projects
Previous Blackbird Projects

Blackbird Project – 10%
Format and style Wallace Steven’s poem “Thirteen Ways of Looking at a Blackbird” in a one page HTML document with an external CSS stylesheet. Your pages must have at least the following :

  1. one external link
  2. one internal or anchor link
  3. one image insert
  4. one background image

The assignment will be graded based on the functional and proper uses and syntax of HTML mark-up and CSS styles.  Though I am not grading on the quality of your design and layout, please put some effort into a pleasing look.  Extra credit will be given if your design attempts to reflect an interpretation of the poem’s meaning!

Blackbird Project List – Section 01

Validate the html and css of your site:
Validator.w3.org  / or use Web Developer extension for Chrome


HTML Quiz – online/self correct. (5%)

Overview of HTML (quiz 1 review)

Online HTML Quiz

Please take the quiz by the time we meet for class this week (Tuesday 5:45pm). After submitting, you will immediately get your score, the errors and the correct answers. Make sure you understand your errors and if you have questions we can go over it in class. If you take the quiz, you will get the full 5 points no matter your score. If you do not take the quiz, you will get zero points.


CSS Intro: Cascading Style Sheets

csszengarden

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

Inline/Embedded/External CSS
selectors { property : value; }   example:  p { color:blue;}

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 Properties  and Values:

css reference

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 images

css3 background images


FTP= “file transfer protocol”

– uploading web files to the server using  FTP (file transfer protocol)
-we will use a free Mac ftp client called Cyberduck Mac,   Cyberduck PC is also available.
-Filezilla is also good, free and cross-platform
Steps:

    1. Open ftp software
    2. “Open Connection”
    3. Enter the following info:
      servername: dtc-wsuv.org
      username: first initial + last name + the year  started(’20”)  + @dtc-wsuv.org (so, “Sam Jones” would be “sjones20@dtc-wsuv.org”)  – all in lowercase, no spaces or symbols!!
      password: sent to your wsu email, can’t be changed!
    4. If successful, you should be in your personal server directory that has the same name as your username (without the @dtc-wsuv.org) . Now you can either drag the folder and files in that directory or use the “action” menu to “upload.”
    5. Upload the folders of your projects, making sure it is named in all lowercase: “blackbird” for the blackbird project, “recipe” for the recipe project, etc. You can always change the folder and file names on the remote server, as you would on your desktop.
    6. Make sure that your default page for the project is “index.html”
    7. Check how everything looks on the live absolute URL:
      http://dtc-wsuv.org/sjones20/blackbird/
    8. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!