Planet CakePHP

1. CSS border default value
Usually when building web layouts you would wanna add a border around a div or any block element. the normal way of assigning a border is by giving it a widtd, color and border style. Here is the trick – only required value is the border style. the default width is medium (appox 3-4px) and color is text color within that border. If either of these are not what you want then you can add those property as CSS rule!

border: 3px solid #000;

will become

border: solid;

2. CSS box model hack – alternative

#box {
width: 200px;
border:5px;
padding:20px;
}

applied to
...
All browsers except Pre- IE 6 versions on PC would render the width as 250px ( width + 2 * boder + 2 * padding ). We can use the box hack model, but it would get real messy.
Here is an alternative solution -

#box {
width: 250px;
}

#box div {
border:5px;
padding:20px;
}

applied to
...
3. CSS Shorthands
They make your life easier. Please use them.

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}

/* BORDER */
h1 {border:1px solid #000;}

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

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}

/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}

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

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

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

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

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

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}

4. CSS links sequence
The sequence of the links is very important.

• The style that is physically below another one has more weight -> importance.
• you declare first the a:link (that’s the short form for a:un-visited) and the a:visited. No problem here, those two styles are applied to different states of a link.
• if you put a:active in the third spot, that means that the last style, a:hover will have more importance.
• if you put a:hover in the last place and give it therefore the highest level of importance, then the a:hover style will win out every time: you hover over a visited link, and it will take the hover-color. You hover over an unvisited link (a:link), and it will hover. You hover over the a:active link and you will *not see* the a:active color, because this declaration is ABOVE the hover-declaration and therefore has less importance, therefore the hover style wins.
• you put the a:hover in pos.3 and a:active in pos.4: that means that you still can hover like a helicopter, but in the *click situation* the a:active shows -==> because it is now the most important style!
• let’s go crazy now: Let’s put the a:visited on pos.4 – logic says that now
  1. an un-visited (a:link) link is still unvisited, therefore has the un-visited color
  2. each other style then will be overridden by the a:visited style -> you don’t see the a:hover style after you visited this link, and you can forget about the a:active. The visited style overrides each other style *when the link has been visited* (un-visited still hovers etc)

Conclusion: If you put your link styles like spaghetti, nothing bad will happen. The site will not crash. It will affect only the hover (and the active) style, and if they show up and when they show up.
Please think about ‘hiding’ your links. If you make your links unrecognizable as links, then you take something away from the visitor of your site. Styling is good, usability is better…

a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}

5. Force page breaks when printing your document
When you’re creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard

h1{
page-break-before:always;
}

h2{
page-break-after:avoid;
}

h2{
page-break-inside:always;
}

6. Prevent line break
This is a simple css tips, but some of us might not know about it. It forces the text display in one line.

h1{
white-space:nowrap;
}

7. CSS Transparency Setting for all browsers

.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

8. Image Replacement technique
I think the correct way to do it is using text-indent. And also, you’d want to apply outline:none to hide the border. We use hidden text when we’re using images to replace text but we want to make sure search engine can crawl the keyword.

a {
text-indent:-999em;
outline:none;

background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}

9. Two classes together
Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. In reality, you can assign as many classes as you like!
For example:
...
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
10. Change Text Highlight Color
You might not have known this before! With CSS you can control the colors of selected test at least for cutting edge browsers like Safari or Firefox.

::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}

11. Attribute-Specific Icons
CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

a[href$='.doc'] {
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}

12. Highlight Text Input Fields
This CSS trick lets you highlight the input field currently in focus. This trick does not work in IE though.

input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}

13. CSS Reset
This piece of CSS code resets all the browser default styles preventing any browser inconsistencies in your CSS styles.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

14. Set a Consistent Base Font Size
Setting the font-size property to 62.5% in body tag makes 1em equal to 10px. This lets you use em easily as you can find out the font-size in pixels from em values.

body{ font-size:62.5%; }

15. Cross Browser Minimum Height
Internet Explorer does not understand the min-height property but here’s the CSS trick to accomplish that in IE.

#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}