CSS tips

Through books and on-line resources, I have learned a lot of neat tips regarding CSS (cascading style sheets). Every so often, I will provide a different CSS tip to enlighten and educate on the power that Cascading Style Sheets can deliver.

Week of March 11^th 2008

Know your CSS selectors

CSS selectors can are broken down as follows:

Type selectors

Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree.

example:

   h1{font-size:24px; color:#036;font-family:arial, helvetica, sans-serif;}

Class selectors

class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree.

example:

	p.large{font-size:125%; color:#006699; font-family:arial, helvetica, sans-serif;}

ID selectors

Descendent Selectors

Child Selectors

Universal Selectors

Adjacent Sibling Selectors

Atribute Selectors

Psuedo-classes

Pseudo Selectors

Week of July 4th 2007

Whenever possible write CSS in shorthand

The following CSS

body {

  font-weight: bold;

  color:#006699;

  font-size:75%;

  line-height:150%;

  font-family: arial, helvetica, san-serif;

}

Can be shortened to:

body {
  font: bold #069 75%/150% arial, helvetica, sans-serif;
}

WEEK OF: July 04 2007

Use ID's and Classes that are Scalable: It is not good practice to use an ID or Class that is not scalable for future changes. An example would be a div that happens to be the color purple, and it is named #purple. If you happen to change the color to red at a later dat, then this name becomes irrelevent. Better to name it based on functionality or positioning. eg: breadcrumbs or right column.

WEEK OF: March 03 2007

CSS to display off screen: One new thing I learned recently is instead of using display:none to set an element such as skip link to not display on the page (screen readers only), it is better to do this instead:; .off-left{; position:absolute;; left: -999px;; width:990px;}

WEEK OF: March 25th 2006

Use the Z index declaration for overlapping divs (layers)

WEEK OF: October 2nd 2005

Use the * selector for global declarations: You can use the * selector to effect global CSS declarations across our site.; For example I often turn on all borders to see where my divs are positioned To do this I use *{border:1px solid red}; Another example is :
* body, div, {/*zeroes out body and divs*/ padding: 0; margin: 0; }

WEEK OF: September 21st 2005

Specify font size in ems or percentages: It is best practice to set up your font size in the tag with em units or percentages. Never use point sizes for the web, as the results can be unpredictable across different browsers and platforms, and point sizes is not considered the most accessible and user friendly approach.; All browsers will be able to enlarge and decrease the text size based on user input when fonts are specified this way.

CSS Tips Archive

Inspired-Evolution - Web Site: Design, Development, Marketing for the North Carolina Research Triangle area. Bruce Gilbert - Webmaster