This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Stylesheet Structure [Nov. 19, 2011, 12:13 a.m.]


When creating your site style sheet(s), try to keep things in a modular fashion. This way when debugging your CSS you can have those modules quarantined for easy inspection.

For Example...........


@charset "UTF-8"
/* CSS Document */

/* =============================================================================

   Reset Styles

   ========================================================================== */


/* =============================================================================

   Layout Styles

   ========================================================================== */



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Global Page LAYOUT STYLES */

your-code-here {.........}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Page Specific LAYOUT STYLES */

/*HOME*/
your-code-here {.........}
/*ABOUT US*/
your-code-here {.........}

/* =============================================================================

   COLOR STYLES

   ========================================================================== */



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Global Color LAYOUT STYLES */

your-code-here {.........}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Page Specific Color LAYOUT STYLES */

/*HOME*/
your-code-here {.........}
/*ABOUT US*/
your-code-here {.........}

 


 

Turn that CSS efficiency up to ELEVEN mate

To go a step further write your CSS code efficiently by elimintaing some of thes spaces in your code......

1A.) For instance, do not leave an empty space at the beginning and final bracket of your declaration. (see example 1.1A)

/*Example 1.1A*/
element_selector {background-color: orange;}


1B.) You can also make your code more efficient by eliminating the final semi-colon. This is a huge portion of what minification does with CSS when it minifies your style sheet. (see example 1.1B)

/*Example 1.1B*/
element_selector {background-color: orange; font-size: 1em}