Download - Design, Formatting, CSS, & Colors
![Page 1: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/1.jpg)
Design, Formatting, CSS, & Colors
27 February, 2011
![Page 2: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/2.jpg)
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
![Page 3: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/3.jpg)
Bad Design...
Bad Design
blinking
moving
ugly colors
pages too big for a normal screen
What’s a normal screen?
browser shots
![Page 4: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/4.jpg)
Examples
A few examples, for fun:
news site
Mr. Bottles...
amazon
![Page 5: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/5.jpg)
Good Design...
Mr. Jobs
Mozilla
Charity:Water
![Page 6: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/6.jpg)
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.
![Page 7: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/7.jpg)
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.
![Page 8: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/8.jpg)
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.
![Page 9: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/9.jpg)
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
![Page 10: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/10.jpg)
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
![Page 11: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/11.jpg)
Helpful Color Links & Advice
Remember your color number!
A list of color names
colorpicker.com
![Page 12: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/12.jpg)
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.
![Page 13: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/13.jpg)
CSS...
CSS is for giving style to your content
HTML: content
CSS: style
CSS Zen Garden
![Page 14: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/14.jpg)
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.
![Page 15: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/15.jpg)
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!)
![Page 16: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/16.jpg)
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.
![Page 17: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/17.jpg)
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
![Page 19: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/19.jpg)
Background
Property Value
background background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
body{
background-color: #000000}
![Page 20: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/20.jpg)
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;
}
![Page 21: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/21.jpg)
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
![Page 22: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/22.jpg)
Links
Quick refresher on html links:
<a href = “url”> someLinkText </a>
![Page 23: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/23.jpg)
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.
![Page 24: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/24.jpg)
Box Model
• Used to discuss design & layout
• Allows us to place borders, and space elements in relation to other elements
![Page 25: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/25.jpg)
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.
![Page 26: Design, Formatting, CSS, & Colors](https://reader035.vdocuments.us/reader035/viewer/2022062410/56816252550346895dd29a6e/html5/thumbnails/26.jpg)
Questions?