GOOD PRACTICES ----------------------------------------------------------------------------


- Avoid inline styles

- Try to limit embedded styles

- Avoid too many div tags, classes, and ids. Use the structures that are there such as body, h1, h2, p.

- Use Comments everywhere. Comments /* */ can be placed inside of rules to explain the purpose of some rules.

- Leverage modularity. Separate CSS rules into different categories and place into different .css files. Use@import and/or <link> to pull the .css files on needs.

- Consider minimizing large CSS files before publishing them. 

- Take advantage of your inheritance - don't  12pt ! important; CSS; let it flow down the document tree.



CSS PLACEMENT -----------------------------------------------------------------------------


- Inline Styles are placed within the HTML tags. It overrides CSS and should be used sparingly. Use only to effect a single object.


- Linked Styles store the style information in an external file. Link it using the <link> tag. Use when the style information is to be reused across an entire website. Example: <link href="style.css" type="text/css" rel="stylesheet"/>


- Imported Styles must use the @import command. You can import stylesheets into HTML documents AND into other stylesheets. Use when the style information is to reused and for modular control for each page of a website. It can get pretty complicated.

Example: @import url(color.css);


Inheritance - All children elements will use the styles applied to the parent, however, it can be overridden. Example: <body><h1> the h1 child tag overrides the body parent tag.


CSS can be be internal (embedded or inline) or external (imported or linked).

- Internal CSS is contained inside the <head><style="text/css> tags. Use when the style information will only effect a single page.

- External CSS is preferred.  They can be be used on more than one page or website. 


SELECTORS -------------------------------------------------------------------------------


DOM. Body is the parent, p is a sibling, h1, h2 are the child tags

<body>

 <p> <h1> </h1> </p>

<p> <h2> </h2 </p>

</body


- Type and Descendant -The easiest and most common. h1 and p is the type and strong is the descendant. 

Example: h1,p strong {color: blue;}


- Universal (*) - uses the *. Effect anything that does not have a style. 

Example: * {color: green;} or p * a {color: green;}


- Attribute (a) - This selects any tags that have "href" and changes the background color to red.

Example: a [href] {background color: red;} 

Changes any href tags that have the word "cycle" in them to red.

Example: a [href | = "cycle"] {color: blue;}


- Child(>) - Selects the em(child) of p and changes the color to red.

Example: p > em {color:red;}


- Sibling(+) - the parent℗, child(strong), and other child(em)

Example: p strong+em{color: purple;}


- Class(.) - Must create a name for the selector, define the rule, and apply it to the appropriate objects. 

- The naming should be based on the purpose not the location. 

- Classes are case sensitive

- Must start with with a letter, but can contain numbers, hyphens, or underscores.

- When in a stylesheet, all class names must be preceded with a period.

- Can combine a type selector with a class selector for a more specific selector. Or use the class selector independently.

- The rule can be created to fit the need of the design.

- An object can have multiple class applied. 

Example: 

. highlight {background-color: yellow}

.complete {text-decoration: underline; }

h1.highlight {background-color: blue}

<p class="highlight"> This is important text. </p>

or

<p class="highlight complete"> This is important text. </p>


- ID (#) - Designed to be applied to a single element on a web page. 

- ID selectors come in handy when designing our layout

- They cannot be applied to multiple objects on a single page. It can be applied to an entire website.

Example:

#para1{ {background-color: yellow}

<p id="para1"> This is your first paragraph. </p>


- Psuedo-Class (:) - This modifies other selectors. Mostly based on user interaction

- primarily done with links, :link, :visited, :hover, :active

- Don't have to define all but it must be done in the correct order.

Example: a: link {color: red;}

a: hover {color: blue;}

a: visited {color: green;}

Example: h1: first-child {font-variant:small caps:}


- Pseudo-Element (: ) - Provides additional hooks for special types of contexts of elements.

- :first-letter, :first-line, :before, :after

Example: p: first-letter {color: blue;}


- Combinations - Whatever our selection needs are, there will be a selector or combination of selectors that will meet those needs.

Example: #mainContenet .pullQuote p em {…}


PROPERTIES & VALUES -----------------------------------------------------------------


- Font Settings, color settings, box setting, position settings, image settings, etc.


- Color keywords - Example: black, white, silver, gray, blue, navy, aqua, red, maroon, purple, fuchsia, teal, green. lime, yellow, olive.


- RGB color - You can use the pixel or percentage values. Ranges from 0 to 255. 

Example: rgb(0,255,0); or rgb (100%, 50%, 75%);


- Hexadecimal color - Example: #00ff99;


Measurement Systems - Document layouts should typically be set in a relative measurement.


- Absolute - Tied to an objective standard of measurement. Based on the display device's resolution. Typical for Mac is 72 dpi or ppi, Windows is 96 dpi. Can be in,cm,mm,pt, pc, px

Use inches for printing and pixels for web pages. Absolute does not scale well to user configurations.


-  Relative - Allow more flexibility relative to base text size in most cases. Most browsers text size is 16 px high. 

- em, based on font width of m.

- ex, based on the heigth of the lowercase x.

- %, based off default text size for the browser. For width of object it is based off the parent objects size.


- URL

- Absolute URLS-url(http://www,theunclub.com); Used for external links.  

- Root relative - url(/a-design-tech / images / postIt.png);

- Document relative - url(../ images / postIt.png); The .. / indicates that you need to move up one directory. It is the most common in the case of external CSS documents.


THE CASCADE -------------------------------------------------------------------------------


- The cascade refers to a series of steps that browsers use to determine what styles are applied when there are multiple conflicting rules for the same html object.


-  Quick Cascade:

- ID declarations are more powerful than class declarations and will override them.

- The more specific  the selector, the more likely that rule will be applied.

- Explicitly declared styles will always override implicitly inherited styles.

- Last declared and/or closet to the content will be applied.


- Steps of the Cascade:

1. Catalogs all the rules.

- Browser reads all the rules to determine if there is a conflict

- Reads in this order: browser styles, user styles, author style sheet, author embedded, author inline.

2. Considers the weight and origin of the rule.

- The browser will take into consideration where the rule came from and if it carries weight.

- Order of precedent user styles - ! important, author styles - ! important, author styles, user styles, default styles. Example: h2 {color: red !important;} 

- Rules higher in the list override those that are lower. 

3. Calculates specificity.

- Conflict can be resolved by calculating which rules are more specific. This is done by "adding" up all the selectors in a rule and the one with the highest number wins. 

- Tallied by keeping track of 4 comma separated numbers.

First space: tally if the style is inline

Second: tally for eachID used

Third: tally for each class, pseudo-class, and attribute selector

Fourth: tally fro each type and pseudo-element selector

4. Determines placement. 

- The last step checks to see where the rule was placed in the structure of the document.

- The rule that was declared last will override the previous rule. 


TYPOGRAPHY ------------------------------------------------------------------------


- Character and Paragraph formatting

- Inline formatting

- Block formatting


Font Families

- serif fonts have little extra feet or flourishes

- sans-serif does not the extra flourishes. Designed for easy screen viewing

- monospace fonts mean all the characters are roughly the same width.

- cursive fonts are handwritten or flourishes

- fantasy fonts


Font Size Keywords:

- xx-small (9px), x-small (10px), small (13px), medium ( 16px same as base text size), large (19px), x-large (24px), xx-large (32px). Each size goes up by a factor of 1.2

- larger and smaller


Font Spacing:

- Letter spacing (kerning) 

- Word spacing (tracking)


Font Casing: It is not recommended to combine the two.

text-transform - none, uppercase, lowercase, capitilize

font-variant - small-caps, normal


Text Decoration: Most browser ignore blink. Most commonly used to remove underlines from links

text-decoration - underline, overline, line-through, blink, none


Vertical Spacing:

- line-height (leading) - the default is 120% of the font size

- vertical alignment - top, baseline, middle, bottom


Font Shorthand:

- Font-size and font-family are two required properties that must be the last two items in the shorthand

- Other properties can go in a any order you want.

- Omitting a value is the same as setting the value to normal.

- To specify a line height, follow the size entry with a slash and then the amount.

Example: span {font: italic bold small-caps 2em/150% Arial, sans-serif;}


Paragraph - level Formatting

- Alignment - text-align left, right, center, justify

- Indenting - text-indent: (value)



THE BOX MODEL ------------------------------------------------------------------------


Type of box is controlled by the 'display' property.

- Most common: none, block, inline, table. Example: #header {display: block;}

- Visibility - hidden, visible, collapse. Also affects how content is displayed. Collapse is used for tables.


Size and Overflow

- Size - width, height, min-height, max-height, min-width, max-width. Must include padding, borders, and margins to account for true size.


- Overflow - controls what happens to the content when it is larger than a defined content region. 

hidden - will hide or clip the overflow

visible - will still be visible but may flow outside of the box or be resized

scroll - will include a scroll bar

auto - only includes a scroll bar of the content is larger than the box. Used often with absolute positioning and when controlling width and height.


- Padding Shorthand:

padding: value - sets it to the same value all around

padding: value1 value2 (top/bottom, right/left)

padding: value1 value2 value3 (top,right/left,bottom)

padding: value1 value2 value3 value4 (top,right,left,bottom)


- Border Shorthand:

p {border: size color style;}

p {border-right: size color style;}


Margin Shorthand:

margin:value

margin: value1 value2 (top/bottom, right/left)

margin: value1 value2 value3 (top,right/left,bottom)

margin value1 value2 value3 value4 (top,right,bottom,left)

- Negative - assists positioning elements positioning on the screen so we can place them exactly where we want them.

- Auto - has the browser calculate the margin size that should be used. Use this technique to auto center the elements on the page. Will only work if an element has a width property defined.



LAYOUTS ---------------------------------------------------------------------------------


Float:

- Float-based layouts utilize the 'float' to create stacking content section.

- Fixed width - more design control; not max browser window space

- 760px for 800x600 / 950px for 1024x768

- Liquid - Less design control, max use of browser. Use %

- Elastic - Less design control. Uses ems which scales the the end-user's viewing needs

- Hybrid - Uses a combination of all above


- Natural Document flow

- The order of material in the HTML document (from top to bottom) dictates what the presentation of where material will be.

- Floats allow us to take a box and change its position in the flow of things, in orientation to it's parent element.

Example: # image1 {1float: right  |  left  |  none}


- Floats can be staked to create columns. 

- To control how those floats will stack use the {clear : left  |  right  |  none;} property.


Postion element:

- Absolute: Completely reeves element from the natural flow and positions it in relation of its parent. Flat does not work in float positioning.

- Relative: Shifts the element in relation to its original position. 

- Fixed: Elements lock onto the screen. Typically used in navigation bars. 

- Static: normal flow of the HTML document.z-indeax

Example: #menu{top: value; bottom: value; left: value; right: value;}


z-index:

- Adds a third dimension (layering) and allows overlapping elements. It cannot be a negative number


Absolute Positioning:

- Layouts utilize the 'position' property to precisely position elements on the screen.

- Are considered less than perfect, but if your use it, set the overflow to auto.



LISTS ------------------------------------------------------------------------------------------


list-style-type:  what type of bullet

list-style-position: whether the bullet is inside or outside the indented text.


To select a custom list bullet:

li {list-style-image: url(image.png);}


List shorthand:

li { list-style: type position image;}  

li {list-style: square inside url(image.png);}


IMAGES ---------------------------------------------------------------------------------------


CSS Placement of Images

- does not rely on <img>

- Uses CSS property of 'background'


To place images on the page:

- Define the content region using a <div>

- Use the background property of that <div>

- #header {background-image: url(image.png);

- Adjust its properties so that it looks right.

- repeat

- position - left, center, right or top, center, bottom

- Absolute 

- Relative

- Percentage - horizontal, vertical

- attached - fixed or scroll (default)

- If replacing text, hide the text of the items to be replaced by images


Background Shorthand:

- #item {background: color image attachment position;}


- You can use a very small gradient image and have it repeated to fill a div tag.

- It is also better to use .jpeg for gradients because your .gif images have a 256 color limit.

- .png supports alpha level transparencies.


Scriptless Image Rollovers:

- The 'Pixy' method

- A single file containing multiple images

- Use background-postion property to change what sprite is showing

- Depends on user interaction

- The use of sprite is a great method for many images.

- less request for files

- might decrease download size

- easier to maintain

- Setting up images

-  need a different image for each state you will be utilizing.

- measure the distance from edge of the graphic to edge of each version and record for later use.

- Can then setup the CSS to use the sprites.

- To setup the CSS

- follow the steps for regular CSS image placement for normal item and set a rule for :hover

- Include the specific placement data for each sprite for both normal state and :hover

Example:

#navigation {

text-align: left;

margin-left: 1.5em;

margin-top: .5 em;

}

#navigation a: {

padding-left: 1.3 em;

display:block

color: black;

}

#navigation a:link {

background: url (/ images / rolloverImages.png) no-repeat 7px center;

}

#navigation a:visited {

background: url (/ images / rolloverImages.png) no-repeat -483px center;

}

#navigation a:hover{

background: url (/ images / rolloverImages.png) no-repeat -245px center;

}



Rounded corners:

- CSS3 will be the way to make rounded corners in the near future.


- Sliding Doors

- Creates a scalable region that has rounded corners

- Relies on placing four background images on four different overlapping elements,

- Each image is from a larger image that has been divided into four appropriate sections.

- The images are then positioned in relation to the location of those items in the structure of the HTML.


<div id="about">

<div class="outerBox">

<div class="innerBox">

<h2 class="firstItem">About</h2>


.outerBox {

padding-bottom: 5px;

background: url(/images/boxes/bottom-right.gif) right bottom no-repeat;

}

.innerBox {

padding-top 5px;

padding-left: 5px;

background: url(/images/boxes/top-left.gif) top left no-repeat;

}

.firstItem {

padding-top 5px;

margin-top: -5px;

background: url(/images/boxes/top-right.gif) top right no-repeat;

}


#about {

line-height: 1em;

margin-bottom: 10px:

background: url(/images/boxes/bottom-left.gif) left bottom no-repeat;

}


TABLES -----------------------------------------------------------------------------------------


The original idea behind of a table was to present tabular data but it was misused in page layout. 


Modify tables using:

#compare {table-layout: auto  | fixed;}

#compare {border-spacing: length;}

#compare {caption-side: top  | bottom  |  right  |  left;}

#compare {empty-cells: show  | hide;}

#compare {border collapse: collapse  | separate;}


Border Collapse Conflict:

- Hidden border styles always win.

- Styles that are set to 'none' are the weakest.

- Wider borders win.

- If the width is the same, the style is used to determine.

- More specific/local wins.

- Closer to the beginning of the table wins.


Creating a pure CSS table:


<div class="venuesTable"><h3>Location</h3></div>

<div class="cssRow"><h3>The Last Day Saloon</h3></div>


#venues .venuesTable {

display: table;

margin: auto;

width: 90%;

border-spacing: 2em;

}

#venues .cssRow {

display: table-row;

margin-left: 200px:

}

#venues .cssRow h3 {

display: table-cell;

height: 120px;

padding-top: 10px;

margin: 10px;

vertical-align: middle;

}


FORMS ----------------------------------------------------------------------------------------


There are no form specific CSS properties.


Styling Forms

- Fieldset - a line that goes around the entire form

- Legend - the label that shows up on the fieldset.

- Form Elements

- Textbox

- Textarea

- Select

- Interaction Styles


The following is an example of highlighting a form input while using the tab key to move to the next form field:

#contactForm select: focus, #contactForm textarea: focus, #contactForm input [type="text"] : focus { background-color: #ffbc7a; }


USER INTERFACE -----------------------------------------------------------------------


Cursor - Control the graphic that used to indicate the location of the mouse or other pouting device.

- Indicate that an element can be interacted with.

- The appearance of cursors may vary depending on the browser.

- You can use .gif, .png, .cur, and .sag. Check browser compatibility first.

- files should be 32 x32 px. 

- You must also set up a preference list in case a browser does not support a particular file format. 

Example: h3 { cursor: wait;}

- h1{cursor: url(/images/customBullet.png), progress;} The web bowser will default to 'progress' if the file is not compatible.


System Colors - changing system colors can be handy for accessibility reasons.

- Removed from CSS 3 specifications.

- The values are not case sensitive.


Outlines - Are shapes that are drawn over the top of a selected box

- Does not add to the size of the box

- Can  span multiple lines

-Overall the outline property will behave much like the border property, as outline uses the same property values for: 

- #item {outline-width: value;}

- #item {outline-style: value;}

- #item {outline-color: value;}

- It can be a good use to put outlines on hyperlinks

Shorthand:

- h1 {outline: outline-style outline width outline-color;}


MEDIA TYPES -------------------------------------------------------------------------------


Accessibility - CSS can control how content is presented across multiple display devices.

- braille

- handheld

- print

- projection

- screen

- speech devices

- others

-Associating media specific CSS files

-  the <link> method & the @command

Example: 

<head>

<link href="print.css rel="stylesheet" type="text/css" media="print"/>

</head>

- @command - set rules in an external file or embedded

- External file

- @import url("print.css" print;

- Embedded stylesheet

- @media print {…declarations…}


Print styles: Print media is considered to be 'paged media', while screen is 'continuous media'.

- Page Context

- The page box has two areas: 

- the margins

- the page area

- Can control margins using inches:

- @page {margin: .5in;}

- @page :first {margin: 

- @page :left {

- @page :right {


- Tips & Tricks

- Make sure text is legible

- set font size to 12pt ! important

- set color to black on white background ! important

- Make links useful

- a:after {content: " (attr(href)") "; }

- Hide elements that are not necessary.

Page Breaks - allows us to have control over where and what will cause a page break for paged media

- #pb {page-break-before: auto  |  always  |  avoid  |  left  | right;}

- #pb {page-break-after: auto  |  always  |  avoid  |  left  | right;}

- #pb {page-break-inside: avoid  |  auto;}


Widows and Orphans - page content that is attached to a specific paragraph. 

- Widows specify how many lines must be present at the top of the page.

- p {widows: values;}

- Orphans specify how many lines must be present at the bottom of the page.

- p {orphans: values;}


Example:

@page { margin: .5in:;}


body { font-size: 12pt ! important;

color: black ! important;

background-color: white important; }


#navigation { display: none;}

#header { float: right; width: 3in; margin-left: .12in; margin-bottom: 1pc; margin-top: 0;}

#header h1 {text-align: center;

font-size: 36pt; }

#header h1:after { content: " "url (/images/logo.png); }

#content img { float: right; clear: right; padding: 12pt;}

.printBreaker {page-break-before: always;}


CSS & JAVASCRIPT ------------------------------------------------------------------------

- check out CSS Javascript References


- CSS is just one group of properties we manipulate.

- Objets have properties.

- Everything in the DOM is an object

- Everything displayed on the page is an aspect of the 'document'

- To manipulate the various objects in our document, we have to know how to find them.

- getElementById() method

- methods are built in behaviors

- CSS manipulation

- targeting the "style" aspect of various elements and combine with appropriate property.

- ….style.color +"black"


Basics of Javascript

- Functions - create our own behaviors

- Respond to user-interaction

- Javascript is case sensitive


Targeting CSS

- Define target

- var taget + document.getElementById('name')

- Manipulate style

- target.style.color = "green";

- Build Functions

- function changeStyle() {…}

- Tie to User Interaction

- document.gettElementById('triggerName').onmouseover = changeStyle;


Setting up Functions

- create a script file and place it in a "scripts" folder. Example: menu.js

- Setup your target

- After setting up your target put it inside a function

- Then tie it to user interaction


Example:

<head>

<script src="scripts/menu.js" type="text/javascript"></script>

</head>


CSS page:

function menuDropDown ( ) {

document.getElementById('subMenuContents').style.visibility="visible";

}

function menuCollapse ( ) {

document.getElementById('subMenuContents').style.visibility="hidden";

}

window.onload = function ( ) {

document.getElementById('subMenuHeader').onmouseover = menuDropDown;

document.getElementById('subMenuHeader').onmouseout = menuCollapse;

}


* Note it is important have window.onload so that the javascript does not load before the elements are loaded. 


CSS 3 ---------------------------------------------------------------------------------------------


- CSS3 is divided into modules

-  Don't have to wait until all has been completed before we can start using it.

- Designer and browser companies can implement the new technologies incrementally.

- - Check out www.w3.org or http://www.westciv.com/iphonetests/

for browser support info


Selectors:

- 19 additional ways to make selections

- 15 more Psuedo-Classes

- 3 more Attribute Selectors

- E [foo^="bar"] will look at the beginning of the attribute

- E [foo$="bar"] will look at the end of the attribute

- E [foo*="bar"] will look anywhere in the attribute

- 1 additional Sibling Selector

- E ~ F allows us to select any element that has that root element ancestor. 

- Pseudo-elements are indicated with : : , instead of : :

- Attribute Selectors

- Allow us to select tags based on a patter inside the attribute's value.

- [attribute ^=value] - looks at the beginning for value

- [attribute $=value] - looks at the end for value

- [attribute *=value] - looks for the value anywhere

Example:

a [href=^"http://"] : after {content: " "url(/images/extLink.png); }

Places an image at the beginning of any links that start with "http://"

img [id*="box"]: not ( [id$="Logo"]) { position: absolute; }

Changes the positioning of any image that contains the name box EXCEPT for one that also contains the word Logo.


Opacity:

- Control the degree of visibility of an element

- We can now set the opacity on our objects using:

- h1 {opacity:value;}

- Uses a range from 0-1

- Can be applied to any element we can select


New Color Models:

- HSL - Hue, Saturation and Lightness. Best represented with a color wheel.

- background-color: hsl(240,100%, 50%);

- HSLA - Builds off the HSL model but adds an alpha (transparency) level to it.

- background-color: hsla(0,100%,50%,1)

- RGBA - RGB, plus 'alpha'

- background: rgba(255,0,0,1)


Border Colors:

- Multiple Border Colors

- To use CSS3 properties, we have to use special property prefixes

- Firefox: -moz-

- Safari: -webkit-

- Define a border and setup a width and default color in case the web browser doe not support CSS3

- border: 3px solid #333;

- width dictates how many colors to setup

- each individual color will only take up 1px.

- Setup list of colors, for each side of the box, that will be used for each pixel width of that border.

Example: -moz-border-bottom-colors: #000 #333 #666;

-moz-border-top-colors: #000 #333 #666;

-moz-border-left-colors: #000 #333 #666;

-moz-border-right-colors: #000 #333 #666;

- If the number of colors do not match the border width, the last stated color would be applied.


Border Radius:

- This is the easiest way to add rounded corners.

  - h1 {-webkit-border-radius: 15px;}


Box Shadows:

- Single or multiple shadows

- h1 {box-shadow: inset horizontalOffset verticalOffset blurRadius spreadRadius color;}

- Cab specify multiple shadows by including a commas separated list.

Example:

moz-box-shadow: 0 5px 10px #999, inset -2px -2px 2px 2px #000, inset 2px 2px 2px 2px #eee; }


Text Shadows:

- Text shadows work much like box shadows:

- Set, offset, blur, and color

- Can have multiple shadows

h1 {text-shadow: 2px  2px 2px #000;}

h1 {text-shadow: 2px  2px 2px #CCC, 4px 6px 5px #0F0}


Multi-Column Layout:

-This property allows us to have out text flow into multiple columns

- Number of Properties

- p {column-count: value;}

- p {column-gap: value;}

- p {column-rule: value;}

- p {column-width: value;}

Example:

p { moz-column-count: 2; 

moz-column-gap: 2em; 

moz-column-rule: 8px dotted red


Web Fonts:

- CSS3 promises a way to use font files as resources and apply without local installation.

- You will no longer have to do text replacement with graphics.

- Two steps to using the fonts:

- Declare to the browser with '@font-face' what the font location and font family name is

- Then use that font-family in other declarations

Example:

<style type="text/css">

@font-face { font-family: "EvilGenius BB";

src:url(../fonts/evilgeniusbb_reg.ttf) }


MODULARITY -------------------------------------------------------------------------------------


- Steps toward Modularity

- Identify the different types of style information

- Setup appropriate comment-labeled sections in the main CSS file


--------------------------------------------------------/*Color*/

body {

color: black;

background-color: white;

}

--------------------------------------------------------/*Typography*/

body {

font-family: Verdana, Arial, sans-serif;

}

--------------------------------------------------------/*The Box Model*/

body {

margin: 0;

}

--------------------------------------------------------/*Positioning*/

body {

Float:: left;

}

--------------------------------------------------------/*Images*/

body {

background-image: url(/images/webStripe.png); 

}

--------------------------------------------------------/*Lists*/

--------------------------------------------------------/*Layout*/

--------------------------------------------------------/*Tables*/


- Go through our rules splitting them up into the different sections based on those purposes.

- Optionally, relocate non-global rules to applicable pages as embedded stylesheet

- Split the sections up into multiple CSS files

- Import them into that main CSS file

  - @import "color.css";