Email is Alive

Five Great Tips for Optimizing Your Websites CSS

These are some great tips to getting your CSS stylesheet for your website properly developed and structured.

1. DON'T USE INLINE STYLES in your HTML/XHTML ever. This is the number one priority. Replace the inline styling with type selectors so that you can target multiple instances of identical elements without having to create that styling over and over again. This is one of the main reasons why CSS is so powerful. It's beautifully redundant, not painfully convoluted. There's nothing worse than coming in after a developer who has intertwined a stylesheet of CSS with inline styling in each individual page...it's just frustrating.
2. Use Descendant Selectors to style your content inside your web page's structure. This allows the removal of inline styling in the HTML.An example of this may look something like this:
   #footer p {color: #000000; text-align:left; Blah blah blah} - this would be in your stylesheet
   Rather than having:
   <div id="footer">
   <p style="color: #000000; text-align:left; Blah blah blah">Paragraph of random words</p>
   </div>
   in your website's HTML.
3. Group your selectors....it makes your code much smaller and easier to work with.Example:
   .mainnav, .leftnav, .footernav {color: #000000; text-align:left; Blah blah blah}
   This is much nicer than coding each of these selectors with their own properties and attributes.
4. To further that thought you can group Declarations with Selectors. This is much like tip #3 but going further into it.Example:
   #wrapper{width:900px;}
   #wrapper{border: 1px solid #ffffff;}
   #wrapper{margin-top:35px;}

   This should look like this:
   #wrapper{width:900px; margin-top:35px; border: 1px solid #ffffff; }

   ANND then ...
   #wrapper, #maincontent, #header {width:900px; font-size: 1em; background:transparent;}
   
   So, not only can you combine common properties to multiple selectors, but you can combine multiple declarations into one. SHAZAAM!

5. Allow the CSS to Inherit Properties to prevent redundant coding and heavy stylesheets. This is a wonderful way to declare properties once and allow the CSS to work for you. Also allowing the developer that manages the website to change one declaration and globally affect the website.Example:
   body{
   font: arial, helvetica, sans-serif;
   text-align: left;
   }
   By adding these properties to the body tag your telling the browser to render all text in the webpage to render in arial and align left. There's no need to add any more font or alignment tags to your CSS unless you need to change the font for headers or a specific div. Save the headache and learn to use these "global" properties for your development.

About

No description. Please complete your profile.