WRT235: Writing in Electronic Environments CSS 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 with  2 headers  5 paragraphs of loren ipsum text  Embedded 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   

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:  T52Z_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)  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 firstSecond If nothing else works Third

Google Fonts  Google’s API allows you to link to their library of fonts  You can get started here:   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

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.