Home » Fresh Foo » Effective Css for Novice and Advanced

Effective Css for Novice and Advanced

Today we will learn some useful tricks to write css styles.

Short Properties
Short properties used to combine several properties in one declaration. It can really decrease size of your css code.

Colors
If color value has three pairs of equal symbols, you can write it using three symbols

#ff00bb  -> #f0b
#ffffff  -> #fff

Sizes
Padding and margin styles can be shorten too.
If you write them in this way

padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;

you can short them to

padding: 4px 3px

Basic rules for padding and margin

property: value1; // (all sides)
property: value1 value2; // (top-bottom) (right-left)
property: value1 value2 value3; // (top) (right-left) (bottom)
property: value1 value2 value3 value4; // (top) (right) (bottom) (left)

To remember order of last example you can use word TRouBLe (Top, Right, Bottom, Left)

Borders
Long way

border-width: 1px;
border-style: solid;
border-color: #000;

Short way

border: 1px solid #000; // W3C: width style color

Background
Long way

background-color: #f00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

Short way

background: #f00 url(background.gif) no-repeat fixed 0 0; //  W3C: color image repeat attachment coordinates

Remember – if you use “em, px OR %” for coordinates, first value will be horizontal

Fonts
Long way

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: "Lucida Grande",sans-serif;

Short way

font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif; // по W3C: style variant weight size/line-height family

Lists
Long way

list-style-type: square;
list-style-position: inside;
list-style-image: url(image.gif);

Short way

list-style: square inside url(image.gif);

Global reset & Toolboxes
As you know, browsers have many inconsistencies in default styles values. To fix that people invent “css reset”. First was written by Eric Meyer ( http://meyerweb.com/eric/tools/css/reset/index.html ). Using “css reset” styles is a good starting point.

Toolboxes – collection of common styles that can be useful on any web project. Here is an example of Css-tricks toolbox ( http://css-tricks.com/toolbox-css/ )

/* Toolbox CSS Chris Coyier http://css-tricks.com*/
/* LAYOUT TOOLS*/
.floatLeft {
float: left;
}

.floatRight {
float: right;
}

.clear {
clear: both;
}

.layoutCenter {
margin: 0 auto;
}

.textCenter {
text-align: center;
}

.textRight {
text-align: right;
}

.textLeft {
text-align: left;
}


/* PRINT TOOLS*/
.page-break {
page-break-before: always;
}


/* TYPOGRAPHIC TOOLS*/
.error {
border: 1px solid #fb4343;
padding: 3px;
color: #fb4343; }
.warning {
border: 1px solid #d4ac0a;
padding: 3px;
color: #d4ac0a;
}

.success {
border: 1px solid #149b0d;
padding: 3px;
color: #149b0d;
}

.callOut {
font-size: 125%;
font-weight: bold;
}

.strikeOut {
text-decoration: line-through;
}

.underline {
text-decoration: underline;
}

.resetTypeStyle {
font-weight: normal;
font-style: normal;
font-size: 100%;
text-decoration: none;
background-color: none;
word-spacing: normal;
letter-spacing: 0px;
text-transform: none;
text-indent: 0px;
}


/* STYLING EXTRAS*/
a[href^="mailto"] {
background: url(images/emailIcon.png) left center no-repeat;
padding-left: 10px;
}

a[href~=".pdf"] {
background: url(images/pdfIcon.png) left center no-repeat;
padding-left: 10px;
}

a.button {
color: black;
border: 1px solid black;
padding: 3px;
}

a.button:hover {
background: black;
color: white;
}

.transpBlack {
background: url(images/transpBlack.png);
}


/* DISPLAY VALUES*/
.hide {
display: none;
}

.show {
display: block;
}

.invisible {
visibility: hidden;
}

If you serious about css coding you must have your own toolbox.

Browsers Classes
Everyone knows that some css styles renders differently in different browsers. To fix it , people use css hacks.
Not so long ago i found nice solution to define styles for any browser or OS.
( I dont know who is the author. If he will contact me i will add his copyrights. )

<script type="text/javascript">
  var cssFix = function(){
  var u = navigator.userAgent.toLowerCase(),
  addClass = function(el,val)
  if(!el.className) {
  el.className = val;
  } else {
  var newCl = el.className;
  newCl+=(" "+val);
  el.className = newCl;
  }
  },
  is = function(t){return (u.indexOf(t)!=-1)};
  addClass(document.getElementsByTagName('html')[0],[
  (!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?('ie ie'+RegExp.$1)
  :is('firefox/2')?'gecko ff2'
  :is('firefox/3')?'gecko ff3'
  :is('gecko/')?'gecko'
  :is('opera/9')?'opera opera9':/opera (d)/.test(u)?'opera opera'+RegExp.$1
  :is('konqueror')?'konqueror'
  :is('applewebkit/')?'webkit safari'
  :is('mozilla/')?'gecko':'',
  (is('x11')||is('linux'))?' linux'
  :is('mac')?' mac'
  :is('win')?' win':''
  ].join(" "));
  }();
  </script>

And after execution we can use these styles for browsers:

.ie — all ie versions;
.ie8 — ie 8.х;
.ie7 — ie 7.x;
.ie6 — ie 6.x;
.ie5 — ie 5.x;
.gecko — all firefox versions;
.ff2 — firefox 2;
.ff3 — firefox 3;
.opera — all opera versions;
.opera8 — opera 8.x;
.opera9 — opera 9.x;
.konqueror — konqueror;
.safari — safari.

For example: if you want to have red text in opera you should write