Cult-Foo

Effective Css for Novice and Advanced

css_novice
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

 .opera div {
    color:red;
}   

Did you like it? Help us spread the word!

10 Responses to "Effective Css for Novice and Advanced"

  1. This is really beginner-ish stuff :-/

  2. @Austin begginner-ish maybe, but still a useful reference to people, I came here because I forgot the shorthand for margin and padding, funny the things you can mentally misplace.

    Keep up the good work @elPas0

  3. elPas0 says:

    thanks :)

  4. Raj says:

    There is something missing over here. It is not working for me. Showing error in firefox.

  5. Austin Schneider says:

    Great handy lookup!

  6. Wakkos says:

    Usefull! xD I forgot positioning things and founded here =D

    Many thanks!

  7. gLENN says:

    Sir, I like your css menu at the top of this blog.. i like the transparent effect. just subscribed to your blog :)

  8. Dilip says:

    This is the really Best CSS tutorial with Javascript tute i have seen. Specially this "Browsers Classes" . this will really help the designer and coder.

    Thanx

Do you have something to say?