Khawaib Ahmed's Blog

Just another WordPress weblog

Input elements can be targeted by assigning tags to the same input types. It is possible that we want to style input elements as text input fields, text areas and select boxes to have different widths while button input elements to have a different style.

<input type="text" class="text" />
<input type="checkbox" class="checkbox" />
<input type="radio" class="radio" />
<input type="button" class="button" />

Can also use multiple classes:

<input type="password" class="password text" />

Now using following in css we can target each type separately.

input[type="button"] { border:2px solid #ccc; padding:3px}

CSS Reset

/* v1.0 | 20080212 */

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;
}

Recently one of my client asked me to add the functionality for users of their custom Content Management System(CMS) to give them more control over layouts etc. Using CSS in PHP makes it really easy to have styling flexibility.

Following steps are involved to write CSS via PHP.
Create CSS file as a PHP file

Set its content type using the following code

header("Content-type: text/css; charset: UTF-8");

Create PHP variables as you would normally in other PHP code. You can also bring variable data from database etc.

<?php
$myVariable = '#000000';
$myLeftColHeight = '500px';
?>

Outside your PHP tags you can write all of normal CSS code. Where ever you need to write the variable value just echo that variable not PHP way.

#myLeftCol {height:; color:;}

Final Code for stylesheet.php:

header("Content-type: text/css; charset: UTF-8");
$myVariable = '#000000';
$myLeftColHeight = '500px';
?>
#myLeftCol {height:; color:;}

Following are some of the great techniques and scripts to fix IE6 PNG transparency issue.
DD_belatedPNG
Supersleight jQuery Plugin
PNG 8-bit technique (Fireworks)
Clever PNG Optimization Techniques
PNG Optimization Guide: More Clever Techniques

More and more web designers nowadays not fixing the PNG issue for IE6 anymore.