Design, Formatting, CSS, & Colors

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 ScreenAdditive 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 (# hxhxhx) value.

Colors (ctd) • For RGB, each color is indicated by a number from 0-255 • (0,0,0) = black • #000000 = 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... #0F6480 • 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!

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 <link> tag within the <head> 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: • <a href = “url”> someLinkText </a>

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.

Design, Formatting, CSS, & Colors