WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.
-
Upload
erick-jacobs -
Category
Documents
-
view
216 -
download
0
Transcript of WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.
![Page 1: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/1.jpg)
WRT235: Writing in Electronic EnvironmentsCSS Backgrounds, colors, fonts
![Page 2: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/2.jpg)
Agenda Review: float for positioning Review: CSS and color Introduction:
CSS and images CSS backgrounds CSS and fonts
![Page 3: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/3.jpg)
Why floats? What do floats do? What were floats originally designed for?
![Page 4: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/4.jpg)
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
![Page 5: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/5.jpg)
Short Activity: backgrounds Create a new HTML doc in Thimble Add the following to the document:
container <div> with 2 headers 5 paragraphs of loren ipsum text Embedded <style> tags for CSS in the head of the document
![Page 6: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/6.jpg)
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
![Page 7: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/7.jpg)
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
![Page 8: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/8.jpg)
Tropical Fish
![Page 9: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/9.jpg)
Tropical fish cont.
![Page 10: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/10.jpg)
Color Resources http://html-color-codes.info/colors-from-image/
https://kuler.adobe.com/
http://www.colorpicker.com/
![Page 11: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/11.jpg)
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/DhlLT52Z_400x400.jpeg
![Page 12: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/12.jpg)
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;
}
![Page 13: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/13.jpg)
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
![Page 14: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/14.jpg)
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
![Page 15: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/15.jpg)
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;
![Page 16: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/16.jpg)
Additional Readings CSS Positioning of elements (not simply backgrounds) - http
://alistapart.com/article/css-positioning-101/ http://css-tricks.com/video-screencasts/110-quick-overview-
of-css-position-values/
![Page 17: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/17.jpg)
CSS and Fonts font-weight: bold; font-style: italic; font-decoration: underline;
![Page 18: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/18.jpg)
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 first Second If nothing else worksThird
![Page 19: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/19.jpg)
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 2 basics:
You must have a link to the GoogleAPI font in the <head> section of the your HTML page
You must list the Google fonts in your CSS
![Page 20: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/20.jpg)
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
![Page 21: WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.](https://reader030.fdocuments.us/reader030/viewer/2022013004/56649e3f5503460f94b30044/html5/thumbnails/21.jpg)
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.