To Do This Week
- Codecademy: Learn CSS (due Friday September 15)
- Info Card: CSS (due Friday September 15)
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.
Inline/Embedded/External CSS
Selectors, Properties and Values 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 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-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!
- temporarily give a different color border to all block elements so that you see the structure.
- create a structure for the stanzas and other content by applying margin and padding styles
- position and size your image inserts
- adjust background images
- apply font styles to the headings, paragraphs and stanza’s
- apply a color scheme
- 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