11/6/13 more css!. today’s agenda review: float for positioning objects review: css and color...
TRANSCRIPT
11/6/13
MORE CSS!
TODAY’S AGENDA
• Review: float for positioning objects
• Review: CSS and color
• Introductions to:
o CSS and images
o CSS backgrounds
o CSS and fonts
• Activity: bring more style to your structure
REVIEW: CSS FLOAT
• Why do we use float?
• What, technically, does float do to objects? (think
about the box model here)
FLOAT AND THE "INVERTED L"
• Which object was floated? Why?
• How did we change other objects to accommodate
the floated object?
DISCUSS
• What DOM object is parent of everything?
• Can we style that parent object?
• Hint: yes, and everything today is related
REVIEW: CSS AND COLOR
• How do we write color declarations?
• What objects are aff ected by color?
• What three ways do we define color?
SHORT ACTIVITY: BACKGROUNDS
• Create a new HTML doc in Thimble
• Add the following to the document:
o container <div> with:
2 headers
5 paragraphs (enough to get a vertical scroll)
o style tags for CSS
CSS FOR OBJECT BACKGROUNDS: COLOR
• Working with solid colors
o style="background-color:red"
o same methods for color as color declaration
• Apply a background color to your headers
CSS FOR OBJECT BACKGROUNDS: IMAGES
• Make an image the background of an object
• Can be applied to any object
• image -> css = image -> html
• Declaration:
o background-image: url(VALUE);
o VALUE can be absolute or relative path
• Give your container <div> a background
o http://www.teacherfiles.com/clipart/xbackgrounds/lined
_paper_light.jpg
CSS FOR OBJECT BACKGROUNDS: IMAGES
• Background images repeat horizontally and
vertically
• Control repetition:
o background-repeat: VALUE;
o Options: repeat | repeat-x | repeat-y | no-repeat
• Experiment on your background
o set to repeat only horizontally
o set to repeat only vertically
CSS FOR OBJECT BACKGROUNDS: IMAGES
• Define how a background scrolls
• Usually limited to non-repeating backgrounds
• Control attachment:
o background-attachment: VALUE;
o Options: scroll | fixed
• Experiment on your background
o set background-repeat to no-repeat
o background-attachment: fixed;
CSS FOR OBJECT BACKGROUNDS: IMAGES
• Position where a background image appears
• Control position:
o background-position: VALUE;
o Options: left, center, right, top, center, bottom
o Choose both horizontal and vertical (eg left bottom)
• Experiment on your background
o set background-repeat to no-repeat
o background-position: top right;
CSS FOR OBJECT BACKGROUNDS: IMAGES
• Discuss:
o use cases for background image vs <img />
<body> object
other objects
o advantages / disadvantages of both methods
DISCUSS: <BODY> STYLES
• background
• font
• margin
• padding
• use cases for all
REVIEW WHAT WE ALREADY KNOW: FONTS
• Why are fonts tricky on the web?
• Why can't we use Google Fonts in AFS?
• How does that limit our designs?
CSS AND FONTS
• Why are fonts tricky on the web?
• Why can't we use Google Fonts in AFS?
• How does that limit our designs?
• How have we transformed font already?
CSS AND FONTS
• font-weight: bold;
• font-style: italic;
• text-decoration: underline;
CSS AND FONTS: FONT-FAMILY
• Define the specific font you want
• Define "fallback" fonts - fonts to use if the browser
can't find the ones you specified
ACTIVITY: GET TO WORK
• Begin implementing styles in your structure
o background
o font
o color
• Consult existing design documents
FOR NEXT TIME
• Continue developing your landing pages
• Refine structures
• Apply visual styles
• Make sure to maintain separation of content from
presentation
FOR NEXT TIME
• 30 CSS Selectors You Must Memorize
• CSS Pseudo-classes
• CSS3 Files (explore entire site)
• Tool: CSS3 border-radius
• Tool: CSS3 Generator
• About Agile Development
• About Scrum
FOR NEXT TIME
• Develop rough work plan for next 3 sessions
o Assess what you've done so far
o What you need to do to finish your landing pages
o Estimate how much work will be needed to build your
sub-pages
o Obstacles - what do you still need to learn to build your
site? (e.g. implementing Twitter feeds)
• Be prepared to discuss your rough plan