Design, Formatting, CSS, & Colors September 9, 2010

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: not sure what sort of business this is... news site Mr. Bottles...

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 # = black (255,255,255) = white #FFFFFF = white These RGB values can be translated into hexadecimal.

What is Hex Anyway? (15, 100, 128) RGB to Hex Example...

Hex... Some tips: each hex letter/number represents 4 digits in binary these 4 digits in binary represent some number in decimal Each two letters/numbers represent red, green, or blue in that order. Remember your color number! #0F6480

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

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.

What can CSS do? Style for individual elements I want tableA to look like this... I want table B to look like that.... Style for every element of a certain type I want all tables to look like this... I want all menus to look like that... Style for subclasses of an element I want theseTables to look like this... I want thoseTables to look like that... I want theseMenus to look like this... I want thoseMenus to look like that...

Syntax 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.

class Selector Used to describe a style for a group of elements Useful for when multiple elements have same style. Defined with “.” Allows you to give your styles helpful, memorable names.

class Selector can also define a class selector for specific HTML elements Good for clarifying what the style will effect, but not necessary.

id Selector Used to describe a style for a single, unique element Defined with a “#” Can be applied to more than one element, but this is bad practice! You don’t really have to use this, because you can always use class selector.

Formatting your CSS Formatting Practices: some flexibility, but you must be consistent. always comment your 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.menu li == li.menu

Commonly Used Tags & Properties full reference sheet

Background

Text Can be used with any text based html element. [body, div, p, h1, h2, etc.]

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. Styles can use all text and font styles, plus background color

Tables Can apply styles to every aspect of a table the table itself headers (th) rows (tr) cells (td) table body (tbody)

Table Example Table Example...

Tables go into komodo to show them: collapsable borders simple borders line changes check out last semesters calendar for some examples [black line on two sides, white line on two sides] headers having different backgrounds, etc. etc.