1 / 22

MORE CSS!

MORE CSS!. 11/6 /1 3. Today’s Agenda. Review : float for positioning objects Review: CSS and color Introductions to: CSS and images CSS backgrounds CSS and fonts Activity: bring more style to your structure. Review: CSS Float. Why do we use float ?

kerry
Download Presentation

MORE CSS!

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MORE CSS! 11/6/13

  2. Today’sAgenda • Review: float for positioning objects • Review: CSS and color • Introductions to: • CSS and images • CSS backgrounds • CSS and fonts • Activity: bring more style to your structure

  3. Review: CSS Float • Why do we use float? • What, technically, does float do to objects? (think about the box model here)

  4. Float and the "Inverted L" • Which object was floated? Why? • How did we change other objects to accommodate the floated object?

  5. Discuss • What DOM object is parent of everything? • Can we style that parent object? • Hint: yes, and everything today is related

  6. Review: CSS and color • How do we write color declarations? • What objects are affected by color? • What three ways do we define color?

  7. Short Activity: backgrounds • Create a new HTML doc in Thimble • Add the following to the document: • container <div> with: • 2 headers • 5 paragraphs (enough to get a vertical scroll) • style tags for CSS

  8. CSS for object backgrounds: color • Working with solid colors • style="background-color:red" • same methods for color as color declaration • Apply a background color to your headers

  9. CSS for object backgrounds: images • Make an image the background of an object • Can be applied to any object • image -> css = image -> html • Declaration: • background-image: url(VALUE); • VALUE can be absolute or relative path • Give your container <div> a background • http://www.teacherfiles.com/clipart/xbackgrounds/lined_paper_light.jpg

  10. CSS for object backgrounds: images • Background images repeat horizontally and vertically • Control repetition: • background-repeat: VALUE; • Options: repeat | repeat-x | repeat-y | no-repeat • Experiment on your background • set to repeat only horizontally • set to repeat only vertically

  11. CSS for object backgrounds: images • Define how a background scrolls • Usually limited to non-repeating backgrounds • Control attachment: • background-attachment: VALUE; • Options: scroll | fixed • Experiment on your background • set background-repeat to no-repeat • background-attachment: fixed;

  12. CSS for object backgrounds: images • Position where a background image appears • Control position: • background-position: VALUE; • Options: left, center, right, top, center, bottom • Choose both horizontal and vertical (eg left bottom) • Experiment on your background • set background-repeat to no-repeat • background-position: top right;

  13. CSS for object backgrounds: images • Discuss: • use cases for background image vs <img /> • <body> object • other objects • advantages / disadvantages of both methods

  14. Discuss: <body> styles • background • font • margin • padding • use cases for all

  15. 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?

  16. 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?

  17. CSS and fonts • font-weight: bold; • font-style: italic; • text-decoration: underline;

  18. 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

  19. Activity: Get to Work • Begin implementing styles in your structure • background • font • color • Consult existing design documents

  20. For Next Time • Continue developing your landing pages • Refine structures • Apply visual styles • Make sure to maintain separation of content from presentation

  21. 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

  22. For NEXT TIME • Develop rough work plan for next 3 sessions • Assess what you've done so far • What you need to do to finish your landing pages • Estimate how much work will be needed to build your sub-pages • Obstacles - what do you still need to learn to build your site? (e.g. implementing Twitter feeds) • Be prepared to discuss your rough plan

More Related