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 affected by color? What three ways do we define color?

SHORT ACTIVITY: BACKGROUNDS Create a new HTML doc in ThimbleThimble Add the following to the document: o container 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 a background o _light.jpg _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  object  other objects o advantages / disadvantages of both methods

DISCUSS: 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) CSS3 Files Tool: CSS3 border-radiusCSS3 border-radius Tool: CSS3 GeneratorCSS3 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