1. Using CSS by Joseph Lowery :
    • CSS Seperates presentation from content
    • CSS code is made up of Selectors and Properties defining presentation of those selectors
    • Selectors are for Tags (can be page or site wide), Classes (for multiple uses), and IDs (that specific use only).
    • Can be contained in and external file or embeded in page.
    • "Box" menu in DW changes margins. He used this to change the spacing between the Header and the text below it in the paragraph. I tried it between link and text in header above.
    • Pointed out Edit | Prefs |CSS Styles but did not explain relevance.
  2. Introduction To CSS Editing Using Firebug by Jim Plush
    • Poor video quality, not very useful but this may be a shareware program to look into for CSS editing. May have a code compressing feature. Works with Ajax.
  3. Introduction to CSS by Heather James (15:26)
    • Suggests visiting:
      • http://vimeo.com/2613993
        • University of South Carolina series, long vids and lots of Java, some basic HTML and .CSS
        • Instructor uses:
        • CSS vid:
        • (5:00) Some browsers have a View > Page Style option for displaying alternate style sheets if they exist. rel ="alternate stylesheet" ...
        • (7:00) could use @ import in head for .css file, never saw this before, he did not say why to do it otherwise.
        • (13:00) Any element can have a class or ID attribute.
          • "." for class , "#" for ID , ID used once per document, class used multiple times
        • (15:00) pseudo-classes : link , visited, active, hover, all hyperlinks
          • a:visited { color: black } etc...
        • (19:00) Discussion on cascading: The more specific the selector, the more dominant. Id dominates, class, which dominates others.
        • (22:00) If two rules conflict, the newer one dominates:
          • h1 {color:red;}
            h1 {color: blue;}
          • The second dominates the first and the color will be blue.
        • (23:00) Element types:
          • Block-level: Starts new line.
          • Inline: such as a, em, and span. Do not start a new line.
          • List-item: cover only li
          • Can change the type of each with "display" property:
            • display: block | inline | list-item | none
            • Said this becomes useful in Java.
          • (28:30) Elements can also float
        • (29:30) Colors as names, hex, RGB, short hex.
        • (30:30) Font options. Suggests always using relative lengths such as em (value of font size), ex (the height of the lower case x), or px (pixles). When using ems, user can change font size with zoom preferences in browser. If the user wants to do this, let them.
        • (33:15) Text properties: Indend, align, white-space, height, vertical align, word space, letter spacing, text transform,, text decoration, font family...
        • (36:00) More specifics on fonts.
        • (37:00) San-Serif is better for people scanning for info (Google results are in san-serif). Serif is better for books when someone is reading each word for comprehension.
        • (38:00) Font size, weight, style, color, etc... all of this can be collapsed into one line
        • (40:00) Colors, background color and or image, if image can scroll or be fixed.
        • (41:00) Boxes, has nice image showing different box properties. Uses firefox to show box layout of the image I copied and to make changes to it. All aspects of the box can be specified in terms of top, right, bottom, left or they can be set to be the same.
          • (48:00) Margin, style, width, color, float, clear. Rambeling here.
        • (51:00) Reference materials:
          • CSS Zen Garden
          • CSS: The Definitive Guide by Eric A. Meyer and Meyer Eric (Paperback - Nov 7, 2006)
            ISBN-10: 0596527330 ISBN-13: 978-0596527334
          • W3Schools : Looks mostly text based.
        • (53:00) More FireBug
      • http://meyerweb.com/eric/css
        • No vids that I saw, text tutorials and links
      • http://www.w3schools.com/css/css_syntax.asp
        • Big reference site
    • Cascading means the more specific the style rule, the higher precedence it will have.
    • If two rules apply to the same element, the one that was loaded last will have the highest precedence.
    • Used slightly different terinalogy than #1 - Selector (i.e. h1), Property (i.e. color), Value (i.e. red), Declaration (i.e. {color:red;}
    • Can group selectors, declarations, and properties (Ex at 4:00)
    • (5:00) examples of condensing
    • (5:45) Examples of Selectors : HTLM elements, class and ID selectors. Don't use numbers in CLASS selectors (screws up in FireFox).
    • (7:00) Examples of Elements : Block-level, Inline, and List-item.
    • She uses Composer and FireBug and mentioned another class,she has several vids posted here: http://vimeo.com/hjames/videos
      • Looked again, not much of interest.
    • Also mentioned http://naked.dustindiaz.com as a source for proper web standard code use.
  4. Creating Beautiful Interfaces with CSS by Douglas Bowman (01:02:51)
    • Mentions Drop-down menus in the summary.
    • Recording of a seminar.
    • .CSS allows for compatibility accross many browsers while there are many issues with Ajax and Java between browsers. There are still qwerks.
    • Suggests starting design outside of the HTML and .CSS environment with drawings, photoshop, pagemaker etc.
    • Suggests using .CSS Zen Garden and his own site for examples which can be downloaded. Said on his site there are many other gallery based resourses. Old video and not much on his site.
    • (18:30) Sliding Doors design tecniques: Mentioned tab based image menu old school. With sliding doors use text and background images anchored to the edges of the text.
    • (23:00) Rounded Corner Boxes: Similar to above but with verticle menu.
    • (25:30) White space: Margins and padding. Shows NYT site using tables for layout and mentions difficulty of making global changes there.
    • Over-reliance on box model creates a "blocky" look.
    • Line height: Don't forget that you can adjust for better readability. Adjust from 1.2 (common default) to 1.5 or 1.7 to start. Do not want sandwiched look. But no double spaced high-school report look either.
    • Remote rollovers: mouse over one thing changes something else on page, can be done in Java also. (35:50) He called his approach single image theory. Showed another example of two appearences of one link on the page. (41:15) Mapping example.
    • (42:45) Better bullets: Use background images instead of list item images.
    • (44:15) Flex your text: Browsers resize text depending on user settings. Design should not break down up to 5x text size increase. Elastic width expands browser window with the browser text size settings.
    • About last 10 min questions
    • PDF of presentation slides , also other files here for another presentation about tables, try to figure out what it is.
  5. Basic HTML and CSS Tutorial. How To Make Website From Scratch by Jimmy Ruska (39:20)
    • Starts in NotePad with very basic HTML.
    • (8:30) Starts talking about .CSS, again fairly basic and he is putting it right in the page body (not even head).Still in Notepad.
    • Positioning is FROM top, left etc.
    • Jumps around alot, giving me a head ache watching. Mostly just examples of what various codes do. Also suggests w3schools.
    • Padding between border and inside elements.
    • Margin between border and exterior elements.
    • Min and max height and width can be used for elements.
    • Class ., ID #,
    • Indent used to indent just the first line of a paragraph.
    • Use .CSS for Bold and Italics.
    • Table for blocks of data.
    • Lots of other vids at http://youtube.jimmyr.com/ but none look of interest.
  6. Introduction to CSS by Stefan Mischook (12:54)
    • Multi-part series
    • Come back for .PHP
  7. 100% CSS Web Design Series by Psmeg
    • Multi-part series
  8. Converting a Photoshop Mockup Series by Chris Coyier
  9. CSS Tricks Video: Introduction to Firebug
    • Is a Firefox add-on (extension)
    • Checkes for code erros and show green check mark Icon in lower right corner. Mine does nt seem to have this. Perhaps a different version. He uses a Mac.
    • Shows code for pages you surf and gets specific on mouse over.
    • You can change code. This does not effect the actual page but does effect the display you see do this is a great learning tool.
    • Layout box may not be defined, this show you what the browser thinks it is.
    • DOM and Console (reads console .log statements) becomes relevant to Javascript programers.
    • Try Developer tools for IE.
    • Is same site as above vid #15.
    • Perhaps look for other FireBug vids.