wrt235: writing in electronic environments css backgrounds, colors, fonts
TRANSCRIPT
WRT235: Writing in Electronic EnvironmentsCSS Backgrounds, colors, fonts
Agenda Review: float for positioning Review: CSS and color Introduction:
CSS and images CSS backgrounds CSS and fonts
Why floats? What do floats do? What were floats originally designed for?
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
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
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
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
Tropical Fish
Tropical fish cont.
Color Resources http://html-color-codes.info/colors-from-image/
https://kuler.adobe.com/
http://www.colorpicker.com/
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
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;
}
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
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
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;
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/
CSS and Fonts font-weight: bold; font-style: italic; font-decoration: underline;
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
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
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
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.