CSS & CFM: Alphabet Soup or Best Friends Forever?

Building websites that leverage the flexibility of CSS and the power of CF.

You can follow along with this presentation online using Acrobat Connect.

Topics to cover:

  1. Quick coverage of HTML elements (block level elements and inline elements)
    1. Block Level Elements
      1. Common block level elements: P, DIV, FORM, TABLE, H1-H6, UL/OL, and PRE [EXAMPLE]
      2. Block Level elements are used to contain inline and other block level elements.
      3. Characteristics of a block level element
        1. Default width is 100% of it�?s available space
        2. Block level elements begin and end on new lines which means that to have multiple block elements appear on the same horizontal plane, you must use CSS (or a built in attributes such as align attribute in the TABLE, P and H tags). [EXAMPLE]
    2. Inline Elements
      1. Common inline elements: A, B, IMGs, INPUT, SPAN, SMALL, and BIG [EXAMPLE]
      2. Inline elements are generally wrapped around content on a page to alter it�?s appearance or functionality
        1. Use the A tag to create a link from one document to another.
        2. Use the B tag to alter the appearance (and meaning) of a string of text.
        3. IMG tag allows visual elements to be used on a page
        4. INPUT, SELECT, and TEXTAREA offer the end-user the ability to interact with the page or site they�?re viewing.
      3. Characteristics of an inline element
        1. In most cases inline elements occupy only enough space to surround the content contained within them [EXAMPLE]
        2. Most Inline elements have visual clues built into them such as the B, the I and the A tags.
        3. Use
        4. Use
    3. The reason for covering the basics it to make sure you understand what built-in properties and attributes HTML elements already have. For example, there�?s no reason to apply a bold font weight style to a B tag as it already appears that way. Similarly, there�?s no reason to style a span tag around the your company name only to make it bold (<span style="font-weight: bold">your company</span>) because the bold tag already handles that.
  2. Review basic presentational styles, such as:
    1. Structural styles
      1. Position
        1. difference between relative and absolute
        2. left, right, bottom and top
      2. Width and height
      3. Margin and padding (and the difference)
        1. possibly explain the box model here?
        2. http://www.w3.org/TR/REC-CSS2/box.html
        3. Image illustrating the relationship between content, padding, borders, and margins.
    2. Presentational styles
      1. Border
      2. Font
      3. Background
      4. Color
      5. Text-align
  3. Review a basic document structure. Mention W3 validation, the fact that it�?s a clean slate for CSS markup.
  4. Walk through the main example file without formatting, or with formatting
  5. Coldfusion and CSS
    1. Use a cfm file as your �?stylesheet�?.
    2. <link href="includes/styles.cfm" rel="stylesheet" type="text/css" />
      1. allows you to dynamically set the styles for that file using whatever CF logic you choose. In my custom CMS, I store hex values for every aspect of the site in the database. Then I pull them and store them in the application scope. Once there, I can reference that value anywhere. So I dump them into the stylesheet.
  6. References
    1. Attribute selectors: http://www.stuffandnonsense.co.uk/archives/css_a_tribute_to_selectors.html
    2. Styling tables with CSS: http://www.somacon.com/p141.php