To Do This Week
- Info Card: CSS (Due Friday, January 31)
- Codecademy: Learn CSS (Due Friday, February 7)
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
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
- By Element:
h1
,p
- By Class or ID:
.stanza
,#bio
- Context:
#bio img
,.stanza h3
- Pseudo-Classes:
p:first-letter
,p:first-of-type
- Link Styles:
a:link
,a:hover
- Attribute Selectors:
[attribute=value]
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, nonetext-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)
- 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;
Advanced CSS
Display Property
Examples: block, inline, none, inline-block, flex, grid
WEB COLOR
- Working with Web Colors
- Adobe Kuler (also in PS)
- Hexadecimals
- rgb/rgba “opacity” vs rgba
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 14Follow 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.