1. WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts

2. Agenda  Review: float for positioning  Review: CSS and color  Introduction:  CSS and images  CSS backgrounds  CSS and fonts

3. Why floats?  What do floats do?  What were floats originally designed for?

4. CSS and Color  color = font color  color can take hex codes, rgb values, or color names  What do we want?  Hex values – more precise, easy to take from our color palette  background or background-color = color behind element  background or background-color can take hex codes, rgb values, or color names

5. Short Activity: backgrounds  Create a new HTML doc in Thimble  Add the following to the document:  container with  2 headers  5 paragraphs of loren ipsum text  Embedded tags for CSS in the head of the document

6. CSS for object backgrounds: color  Working with solid colors  {background-color:red} or {background:red}  Works the same way for color declarations  Apply a background color to your headers

7. How to pick colors  Colors are hard  One way to know that colors work together is to look at a nature photograph  We understand what colors work and what don’t from the world around us. Colors in nature are natural colors to us

8. Tropical Fish

9. Tropical fish cont.

10. Color Resources  http://html-color-codes.info/colors-from-image/ http://html-color-codes.info/colors-from-image/  https://kuler.adobe.com/ https://kuler.adobe.com/  http://www.colorpicker.com/ http://www.colorpicker.com/

11. CSS for object backgrounds: images  We can also use an image for a background  Can be applied to any object  Image -> css = image -> html  Declaration:  background-image: url(value);  Value can be absolute (full url) or relative (e.g., document in a folder that the HTML links to)  Give your #container a background from this url:  https://pbs.twimg.com/profile_images/428344285814333440/DhlL T52Z_400x400.jpeg

12. CSS for object backgrounds: images  We can adjust the size of the background image by adding another declaration using background-size  In the #container add:  background-size: VALUEpx #container { background-size: 200px; }

13. 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  Set to repeat only horizontally  Set to repeat only vertically

14. CSS for object backgrounds: images  Define how a background scrolls  Usually limited to non-repeated backgrounds  Control attachment:  background-attachment: VALUE;  Options: scroll | fixed  Experiment  Set background-repeat to no-repeat  background-attachment: fixed

15. 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 (e.g. left bottom)  Set background-repeat to no-repeat  background-position: top right;

16. Additional Readings  CSS Positioning of elements (not simply backgrounds) - http://alistapart.com/article/css-positioning-101/ http://alistapart.com/article/css-positioning-101/  http://css-tricks.com/video-screencasts/110-quick-overview- of-css-position-values/

17. CSS and Fonts  font-weight: bold;  font-style: italic;  font-decoration: underline;

18. CSS Fonts: font-family  Define the specific font you want  Define “fallback fonts” – fonts to use if the browser can’t find the fonts you specify  Font-family: Century Gothic, Tahoma, sans-serif Try this firstSecond If nothing else works Third

19. Google Fonts  Google’s API allows you to link to their library of fonts  You can get started here:  https://developers.google.com/fonts/docs/getting_started https://developers.google.com/fonts/docs/getting_started  2 basics:  You must have a link to the GoogleAPI font in the section of the your HTML page  You must list the Google fonts in your CSS

20. Typography choices are rhetorical choices  Fonts have a purpose beyond simply transmitting words  You must have a reason for your font choice, font-sizing, font weight, and font color  Using default fonts or using fonts that you always use or using fonts that you just like are not good reasons  Try to avoid using more than 2 different fonts  CRAP rules always apply

21. Font tips  Sans serif fonts are the most readable fonts on screen  Brightly color fonts can lead to reader fatigue  You will have the most flexibility in the selection of header typography.