Descendant selectors

Syntax:

E1 E2
The following rule should set the font-style of all P elements that occurs anywhere within a PRE:

CSS code:

pre  p {font-style: italic;}

HTML code:

<pre>
	
<p>This text should be italic style</p>
	
<div>
	
 <p>This text should be italic style too</p>
	
</div>
	
</pre>

IE 6.0 and Firefox 1.0.1 display the same correct result.

Child selectors

Syntax:

E1 > E2

A child selector matches when an element is the child of some element.

The following rule should set the font-style of all P elements that are children of DIV:

CSS code:

pre > p {font-style: italic;}

HTML code:

<pre>
	
<p>This text should be italic style</p>
	
<div>
	
 <p>This text should NOT be italic style</p>
	
</div>
	
</pre>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the child selectors. FireFox 1.0.1 displays the text according to CSS2 specification.

Adjacent sibling selectors

Syntax:

E1 + E2

The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.

CSS code:

pre + p {text-transform: uppercase;}

HTML code:

<pre>
	
<p> Adjacent sibling selectors </p>
	
</pre>
	
<p> This text should be upper case </p>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the adjacent sibling selectors. FireFox 1.0.1 displays the text according to CSS2 specification.

Attribute selectors

CSS2 allows authors to specify rules that match attributes defined in the source document.

CSS code:

a[rel] { background-color: grey; }
	
a[rel=nofollow] { background-color: yellow; }
	
a[title~=\"selectors\"] { background-color: red; }
	
a[title|=\"css\"] { background-color: green; }

HTML code:

<p><a rel=\"copyright\" href=\"\">©2005 SafeSoft</a>
- This link should have grey background</p>
	
<p><a rel=\"nofollow\" href=\"\">Google</a> 
- This link should have yellow background</p>
	
<p><a title=\"Attribute selectors\" href=\"\">Attribute selectors</a> 
- This link should have red background</p>
	
<p><a title=\"css-compatibility\" \">CSS Browser Compatibility</a> 
- This link should have green background</p>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the attribute selectors. FireFox 1.0.1 displays the text according to CSS2 specification.

ID selectors

CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a “#” immediately followed by the ID value.

CSS code:

h2#m01 {color : blue;}

HTML code:

<h2 id=m01>ID selectors</h2>

IE 6.0 and Firefox 1.0.1 display the text according to CSS2 specification.

Pseudo-classes

:first-child pseudo-class

The :first-child pseudo-class matches an element that is the first child element of some other element.

CSS code:

div p:first-child strong {color : blue}

HTML code:

<div>
	
<p><strong>:first-child</strong>  should be black blue<p>
	
<p><strong>second</strong> paragraph should be black<p>
	
</div>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the :first-child pseudo-class. FireFox 1.0.1 displays the text according to CSS2 specification.

1. Create new file and set the file size about 20 x 20 pixels. It should be in RGB mode.
   
2. Set maximum zoom 1600% (Ctrl + + several times)
3. By means of pencil tool draw the sheet borders
   
4. Draw right angle
   
5. Make selection with Magic Wand, fill selection with white color. When filling be sure that anti-aliased combo is unchecked.
   
6. Apply the same actions to right angle but use grey color for filling. After using pencil with grey color try make something similar.
   
7. Crop the canvas and save file for web (Alt + Shift + Ctlr + S) in gif format.

The first of all it’s necessary to create CSS classes describing our elements

Selector “u” is used for definition of default properties. Selector “u.ov” determines behavior of the element when Mouse Over event and third selector is used when Mouse Out event occurs.

<style type="text/css">
	
     u  {
          color : #0000cc;
      }
     u.ov {
          color : #3333ff;
          cursor : pointer;
      }
     u.ou {
          color : #0000cc;
      }
	
</style>

The function setClassName() is used for dynamic CSS class setting. This function determines a browser and set CSS class to element.

The function dohref() gets the element collection and sets them event handlers.

Attribute ID contains the number which should be associated with element of the array arUrl[].

<script language="javascript">
	
onload = dohref;
	
function setClassName( element, className) {
  agt = navigator.userAgent.toLowerCase();
  if (agt.indexOf('mozilla')!=-1 && agt.indexOf('spoofer')==-1 && agt.indexOf('compatible') == -1)
    element.setAttribute("class", className);
  else
    element.setAttribute("className", className);
}
	
function dohref() {
  if (!document.getElementById) return
  var aarr = document.getElementsByTagName('u');
  for (var i = 0; i < aarr.length; i++) {
    if (aarr[i].getAttribute('id')) {
		aarr[i].onmouseover = function() {
         setClassName(this, 'ov');
        }
		aarr[i].onmouseout = function() {
		 setClassName(this, 'ou');
        }
        aarr[i].onclick = function() {
		var strU = this.getAttribute('id');
		document.location = arUrl[strU.substring(1,strU.length)];
        }
    }
  }
}
	
var arUrl = new Array(3);
	
arUrl[0] = "http://www.google.com";
arUrl[1] = "http://www.yahoo.com";
arUrl[2] = "http://www.dmoz.org";
	
</script>

Working demo

Most personal computers ( PCs ) offer a choice of settings for screen size and color depth. The amount of memory available to drive the display is fixed, but users can choose a large screen size ( resolution ) with a reduced number of colors, or a smaller screen size with the maximum number of colors.

The table on the right shows the choice of color modes and resolutions which might be found on a low-specification PC. The table below shows the standard range of color modes. Note that 32 bit color mode doesn’t increase the number of colors available, but it does allow video memory to be updated faster.

Maximum colors	Bits per pixel	Comments
16	4 bit	Virtually obsolete
256	8 bit	216 web-safe colors
65 536	16 bit	High Color
16 777 216	24 bit	True Color
16 777 216	32 bit	True Color

Web Safe Colors

A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that Microsoft and Mac operating system used 40 different “reserved” fixed system colors (about 20 each).

We are not sure how important this is now, since more and more computers are equipped with the ability to display millions of different colors, but the choice is left to you.

216 Cross Platform Colors

The color management system currently used by Web browser software is based on an 8-bit, 216-color (not 256) palette. The browser-safe color palette is a solution devised by Netscape to solve the problem of displaying color graphics in a similar way on many kinds of display screens, with browsers running under different operating systems (such as Macintosh, Windows, and UNIX). Because a majority of the Web audience years ago had 8-bit display screens, 256 colors was the upper limit for the color palette. But the various versions of the Windows operating system (which currently represent about 95 percent of the microcomputer market) reserve 40 colors for displaying such graphic interface elements as windows, menus, screen wallpaper, icons, and buttons, which leaves just 216 colors to display everything else. The 216 colors chosen by Netscape are identical in both the Macintosh and Windows system palettes. Although the browser-safe color scheme originated at Netscape, at present both of the dominant Web browsers (Netscape Navigator and Microsoft Internet Explorer) use the same color management system.

Most Web users have computers and monitors set to “thousands” or “millions” of colors, so the importance of the so-called Web-safe palette has sharply diminished in the past few years. When the user has a monitor set to thousands or millions of colors all colors display properly, so there is no longer any need to restrict your color choices to the 216 Web-safe colors.

As a rule, spammers use special programs - bots-that automatically look for vulnerable sites and spam them with hundreds of links. There are several ways to prevent spam attacks of the kind. Here is one of them. First of all, we must protect our site from spam-bots to guarantee that it is real people that leave messages and comments.

I recommend using Turing test for protection against spam-bots. It’s needed to install a script that will generate random numbers and show them as images. After this site visitors will enter this number in a special field for comparison. The thing is that bots can not read the text on the images.

button.php

<?php
	
$image = imagecreate(120, 30);
	
$white    = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
$gray    = imagecolorallocate($image, 0xC0, 0xC0, 0xC0);
$darkgray = imagecolorallocate($image, 0x50, 0x50, 0x50);
	
srand((double)microtime()*1000000);
	
/*
 * Print the random grey lines
*/
	
for ($i = 0; $i < 30; $i++) {
  $x1 = rand(0,120);
  $y1 = rand(0,30);
  $x2 = rand(0,120);
  $y2 = rand(0,30);
  imageline($image, $x1, $y1, $x2, $y2 , $gray);
}
	
/*
 * Fill array $cnum with random numbers
*/
	
for ($i = 0; $i < 5; $i++) {
$cnum[$i] = rand(0,9);
}
	
/*
 * Print random dark grey numbers from $cnum
*/
	
for ($i = 0; $i < 5; $i++) {
 $fnt = rand(3,5);
 $x = $x + rand(12 , 20);
 $y = rand(7 , 12);
 imagestring($image, $fnt, $x, $y, $cnum[$i] , $darkgray);
}
	
/*
 * Assemble random digits form array to single whole number
*/
	
$digit = \"$cnum[0]$cnum[1]$cnum[2]$cnum[3]$cnum[4]\";
	
/*
 * Start new session
*/
	
session_start();
$_SESSION['digit'] = $digit;
	
/*
 * Print image header
*/
	
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
	
?>

button.php should be used for image source.

<img width=120 height=30 src=\"button.php\" border=\"1\">

audit.php

<?php
 function audit() {
  session_start();
	
/*
 * Read the session variable
*/
	
  $digit = $_SESSION['digit'];
	
/*
 * Read the user entered numbers
*/
	
  $userdigit = $_POST['userdigit'];
	
/*
 * Destroy the session
*/  
	
  session_destroy();   
	
/*
 * Compare the numbers
*/ 
	
  if ($digit == $userdigit) {
    return true;
  } else {
    return false;
  }
	
}
?>

Scripts implantation

<form action=\"frm.php\" METHOD=\"POST\">
	
<img width=120 height=30 src=\"button.php” border=”1″>
<br>
<input MAXLENGTH=5 SIZE=5 name=”userdigit” type=”text” value=”\">
<br>
<input type=”submit”>
</form>

In action script you can use following code:

frm.php

<?php
 include \"audit.php\";
 if (audit()) {
  echo \"Passed...\";
 }
?>

The function audit() returns “true” if the number entered by the visitor coincides with the number on the image, and returns “false” in other cases.

Working sample can be found here