design, formatting, css, & colors

Download Design, Formatting, CSS, & Colors

Post on 23-Feb-2016




0 download

Embed Size (px)


Design, Formatting, CSS, & Colors . 27 February, 2011. Design. - PowerPoint PPT Presentation


Design, Formatting, CSS, & Colors

Design, Formatting, CSS, & Colors 27 February, 2011DesignDesign 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. Thats why its so complicated --Paul Rand

read quote. Design can be very hard to define, but we know good and bad design when we see it. Bad Design...Bad Designblinkingmovingugly colorspages too big for a normal screenWhats a normal screen?browser shotsWhat are some things that you think of when you think of a poorly designed web page?ExamplesA few examples, for fun:news siteMr. Bottles...amazonGood Design...Mr. JobsMozillaCharity:Water

Good Design is harder to define. These are a couple of my favorite examples.Apple -- everything they design is beautiful. Have you played with the iphone? Its fun to look at.Mozilla -- the website is clear & easy to useCharity: Water -- my favorite charity, theyve done really well based on well designed ad campaigns.Colors -- Paint(Subtractive Color Model)Primaries: magenta, yellow, and cyanThis 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 were left with black.

Does anyone know the primary colors?Colors -- Computer ScreenAdditive Color SystemPrimaries: Red, Blue, GreenAdditive color systems start without light (black).Light sources combine to make a color.As colors are added, the resulting color is brighter.

The primary colors are different for computersColorsWell be working with the additive color systemMix various amounts of red, green, and blue to create a color.Colors can be represented bynamean rgb (dec, dec, dec) valuehexadecimal (# 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) = whiteFor Hexadecimal (hex), each color is indicated by 6 values from 0 F#000000 = black#FFFFFF = whiteHex...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#E01B4CHelpful Color Links & AdviceRemember your color number!A list of color

Reminder: The div tagThe tag defines a division or section in the htmlOften used to group elements to style them a certain way.CSS...CSS is for giving style to your contentHTML: contentCSS: styleCSS Zen Garden

Adding CSS to your HTMLThe best (only way for this class!) way to insert CSS to your HTML is by using an External Style SheetDefine all your styles in one placeEasily change the look of your siteUse the following tag within the tag Save your external style sheet as a .css file.

Everyone make a style sheetNew HTML file (or use an old one) in KomodoNew CSS file in Komodo (style.css)Link CSS file from HTML (in head section!)

Syntax (how it looks)Selector specifies the HTML element to styleDeclaration:always contains a property & valueends with a semicolonProperty is the style element you want to change, Value is what you are changing the property to.

Next well discuss the syntax of css. Its a different language from html, so it will look a little bit different.Selector allows us to choose a tag from the html to editFormatting your CSSFormatting Practices:some flexibility, but you must be consistent.always comment unclear code!/* someCommentHere */curly bracestab alignmentBad practices:multiple attributes on the same lineWhat does Komodo help you with?drop downsformatssyntax errors Commonly Used Tags & Propertiesfull reference sheetBackgroundPropertyValue

backgroundbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbody{background-color: #000000}Background image allows you to set an imageBackground repeat allows you to set whether or not the image repeatsBackground attachment whether it scrolls with the rest of the pageBackground position sets the starting position of the background image.TextCan be used with any text based html element. [body, div, p, h1, h2, etc.]PropertyValue

colorcolor (RGB, hex, or name)text-alignleftrightcentervertical-aligntopmiddlebottomtext-decorationnoneunderlineoverlineline-throughp{color: #110000;text-align: left;}FontLike text styles, this property can be used with any text based element.If no font is defined, youll get the default font.Dont forget Browser Shots.A nice list of fonts & font families

LinksQuick refresher on html links: someLinkText 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 clickedNote: hover must come after link & visited. active must come after hover.

Box ModelUsed to discuss design & layoutAllows us to place borders, and space elements in relation to other elements

Box ModelMargin clears an area around the border. Does not have a background color it is transparentBorder 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 boxContent the content of the box, where text & images appear.

this is a div with some text
In fact, this text has two lines

div{width:220px;padding:10px;border:5px solid gray;margin:0px;}Questions?


View more >