1 / 26

Design, Formatting, CSS, & Colors

Design, Formatting, CSS, & Colors . 27 February, 2011. Design.

uttara
Download Presentation

Design, Formatting, CSS, & Colors

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design, Formatting, CSS, & Colors • 27 February, 2011

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

  3. Bad Design... • Bad Design • blinking • moving • ugly colors • pages too big for a normal screen • What’s a normal screen? • browser shots

  4. Examples • A few examples, for fun: • news site • Mr. Bottles... • amazon

  5. Good Design... • Mr. Jobs • Mozilla • Charity:Water

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

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

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

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

  10. Hex... #0F6480 • 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 #E01B4C #ADFAA5

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

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

  13. CSS... • CSS is for giving style to your content • HTML: content • CSS: style • CSS Zen Garden

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

  15. Everyone make a style sheet… • New HTML file (or use an old one) in Komodo • New CSS file in Komodo (style.css) • Link CSS file from HTML (in head section!)

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

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

  18. Commonly Used Tags & Properties • full reference sheet

  19. Background body { background-color: #000000 }

  20. Text • Can be used with any text based html element. [body, div, p, h1, h2, etc.] p { color: #110000; text-align: left; }

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

  22. Links • Quick refresher on html links: • <a href = “url”> someLinkText </a>

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

  24. Box Model • Used to discuss design & layout • Allows us to place borders, and space elements in relation to other elements

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

  26. Questions?

More Related