Web Design Information

CSS2.1

• Box Model
• Web Image Formats
• Lists
• Backgrounds
• Fonts and Text
• Selectors
• CSS Basics

Box Model

Dimension Properties

• width, height, padding, border, and margin
• Padding Shorthand: padding: top, right, bottom, left;
• padding-top: 1px;
• padding-right: 1px;;
• padding-bottom: 1px;
padding-left: 1px;
• Margin Shorthand: margin: top, right, bottom, left;
• margin-top: 1px;
• margin-right: 1px;;
• margin-bottom: 1px;
margin-left: 1px;
• Border Shorthand: border: border size(1px) type(solid) color(#000);
• border-style: solid;
• border-width: 1px;
• border-color: #000;

Web Image Formats

JPEG/JPG

• Lossy compression
• Used for Photography
• Maintains gradients and other subtle changes

PNG-24

• Lossless compression
• Used for Photography
• Uses 24 bits of color
• 256 levels of transparency
• Not supported by IE6

PNG-8

• Lossy compression
• 8 bits of color
• 2 levels of transparency
• Used for logos and graphics

GIF

• Lossy compression
• 8 bits of color
• 2 levels of transparency
• Used for logos and graphics
• Stay away from these if you can. They are the old web graphics.

SVG

• Created by W3C
• Can be scaled indefinitely
• Uses XML as basis
• Allows for scripting and animation
• Not supported by all browsers

Lists

List Styles

• list-style-image, list-style-position, list-style-type
• list-style-image: url("img.png"); or none
• list-style-position: inside; or outside
• list-style-type: none; or disc | circle | square | decimal-leading-zero
• List Shorthand:list-style: url("img.png") inside circle;

Backgrounds

Background Properties

• background-attachment, background-color, background-image, background-position, background-repeat
• background-attachment: scroll; or fixed
• background-color: #000; or outside
• background-image: url("img.png");
• background-position: 10px 20px;(x,y) or top left, center center, 0% 50%
• background-repeat: repeat; or repeat-x, repeat-y, or no-repeat
• Background Shorthand:background: #000 url("img.png") repeat-x scroll left top;

Fonts and Text

Text Properties

• color: #000;
• line-height: 1.5em;
• Kerning:letter-spacing: 1em;
• Word Kerning:word-spacing: 1em;
• text-align: left; or center, right
• text-decoration: underline; or overline, none, line-through, blink
• text-indent: 20px;
• text-transform: uppercase; or capitalize, lowercase
• vertical-align: middle; or 10px, baseline, middle, sub, super, text-top, text-bottom
• white-space: nowrap; or pre, nowrap, pre-wrap, pre-line

<

Font Properties

• font-family: Helvetica, "Times Roman", sarif;
• font-size: 1.2em;
• font-weight: bold; or 100 - 900
• font-style: normal; or italic
• font-variant: small-caps; or normal
• Font Shorthand: font: italic small-caps bold 1.5em/2 arial, helvetica, sans-serif;
• This order matters: (font-style* font-variant font-weight font-size* line-height font-family*)

Selectors

Element Selectors

• body {};
• p {};
• h1 {};

ID Selectors

• #idname {};
• #header {};

Class Selectors

• .class {};
• .redText {};

Universal Selector

• *{};

Multiple Selectors

• h1, h2, h3 {};
• p, li, ul {};

Combined Selectors

• #content.section{}
• div#content.common{}

Traversing Selectors

• Descendent:#header h1 {};
• Child:ul > li {};
• Adjacent:p + p + h1 {};

Selecting by Attribute

• Exact Match:a[title="dog"]{}
• Match Word that is Space Separated:a[title~="dog"]{}
• Match word Hyphen-Seperated:a[title|="dog"]{}
• Does not work with IE6

CSS Basics

Forms of CSS

• Inline:style=color:red;
• Embedded:style tags in head
• Imported:@import url("style.css") in style tags in head
• External:link tag in header

Link Attributes

• rel="stylesheet"
• type="text/css"
• href="style.css"
• title="Font Styling"
• media="screen" or handheld, print, all

CSS Rule