design, formatting, css, & colors
DESCRIPTION
Design, Formatting, CSS, & Colors . September 9, 2010. Design. - PowerPoint PPT PresentationTRANSCRIPT
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 (# hx hx hx) 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...
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 <link> tag within the <head> tag
Save your external style sheet as a .css file.
What can CSS do?
Style for individual elementsI want tableA to look like this...I want table B to look like that....
Style for every element of a certain typeI want all tables to look like this...I want all menus to look like that...
Style for subclasses of an elementI 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 SelectorUsed 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 bracestab alignment
Bad practices:multiple attributes on the same line
What does Komodo help you with?drop downsformatssyntax errors
.menu li == li.menu
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>
LinksLink states
a:link -- a normal, unvisited linka:visited -- a link the user has visiteda:hover -- a link when the user mouses over ita: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 itselfheaders (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.