Design, Formatting, CSS, & Colors 27 February, 2011

Design “Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple. That’s why it’s so complicated” --Paul Rand

Bad Design... Bad Design blinking moving ugly colors pages too big for a normal screen What’s a normal screen? browser shots

Examples A few examples, for fun: news site Mr. Bottles... amazon

Good Design... Mr. Jobs Mozilla Charity:Water

Colors -- Paint (Subtractive Color Model) Primaries: magenta, yellow, and cyan This color system is called subtractive because: each primary color absorbs (subtracts) a certain part of the color spectrum. every time a color is added, less light is reflected. When you mix all three primaries together, the entire spectrum of color is absorbed, and we’re left with black.

Colors -- Computer Screen Additive Color System Primaries: Red, Blue, Green Additive color systems start without light (black). Light sources combine to make a color. As colors are added, the resulting color is brighter.

Colors We’ll be working with the additive color system Mix various amounts of red, green, and blue to create a color. Colors can be represented by name an rgb (dec, dec, dec) value hexadecimal (# hx hx hx) value.

Colors (ctd) For RGB, each color is indicated by a number from (0,0,0) = black (255,255,255) = white For Hexadecimal (hex), each color is indicated by 6 values from 0 – F # = black #FFFFFF = white

Hex... Some tips: Each two letters/numbers represent red, green, or blue in that order. Remember your color number! Examples: #FF0000 = red #00FF00 = green #0000FF = blue #0F6480 #ADFAA5 #E01B4C

Helpful Color Links & Advice Remember your color number! A list of color names colorpicker.com

Reminder: The div tag The tag defines a division or section in the html Often used to group elements to style them a certain way.

CSS... CSS is for giving style to your content HTML: content CSS: style CSS Zen Garden

Adding CSS to your HTML The best (only way for this class!) way to insert CSS to your HTML is by using an External Style Sheet Define all your styles in one place Easily change the look of your site Use the following tag within the tag Save your external style sheet as a.css file.

Everyone make a style sheet… 1) New HTML file (or use an old one) in Komodo 2) New CSS file in Komodo (style.css) 3) Link CSS file from HTML (in head section!)

Syntax (how it looks) Selector specifies the HTML element to style Declaration: always contains a property & value ends with a semicolon Property is the style element you want to change, Value is what you are changing the property to.

Formatting your CSS Formatting Practices: some flexibility, but you must be consistent. always comment unclear code! /* someCommentHere */ curly braces tab alignment Bad practices: multiple attributes on the same line What does Komodo help you with? drop downs formats syntax errors

Commonly Used Tags & Properties full reference sheet

Background body { background-color: # }

Text Can be used with any text based html element. [body, div, p, h1, h2, etc.] p { color: #110000; text-align: left; }

Font Like text styles, this property can be used with any text based element. If no font is defined, you’ll get the default font. Don’t forget Browser Shots. A nice list of fonts & font families

Links Quick refresher on html links: someLinkText

Links Link states a:link -- a normal, unvisited link a:visited -- a link the user has visited a:hover -- a link when the user mouses over it a:active -- a link the moment it is clicked Note: hover must come after link & visited. active must come after hover.

Box Model Used to discuss design & layout Allows us to place borders, and space elements in relation to other elements

Box Model Margin – clears an area around the border. Does not have a background color – it is transparent Border – a border that goes around the padding and content. Affected by the background color of the box. Padding – clears an area around the content. Affected by background color of the box Content – the content of the box, where text & images appear.

Questions?