Download - Design, Formatting, CSS, & Colors
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 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
(255,255,255) = white
For Hexadecimal (hex), each color is indicated by 6 values from 0 – F
#000000 = 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 <div> 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 <link> tag within the <head> 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 bracestab alignment
Bad practices:multiple attributes on the same line
What does Komodo help you with?drop downsformatssyntax errors
Background
Property Value
background background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
body{
background-color: #000000}
Text
Can be used with any text based html element. [body, div, p, h1, h2, etc.]
Property Value
color color (RGB, hex, or name)
text-align leftrightcenter
vertical-align topmiddlebottom
text-decoration noneunderlineoverlineline-through
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:
<a href = “url”> someLinkText </a>
Links
Link 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.
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?
