View iGeeks entry at Web Creme.

PREVIEW, DOWNLOADS & DISCUSS

• Preview, Installation, Related Links and Notes available at the Kiss Template Page
• Download Movable Type, WordPress or Blogger Themes
• Technical Forum Discussion

ChugsDesigns is perhaps one of the only few web development entity in India which concentrates on web standards, valid codes, emphasize on structured semantic markup. ChugsDesigns already have an impressive portfolio.

Oinam Software is extremely glad to welcome ChugsDesigns to the team. We expect to push the possibilities of giving the best of Web Standards, Effective and Accessible Designs, Valid Structured Semantics realm and to provide the best experience for our Clients and their projects.

The thing I love about our team and the people involved is that, we do what we really love to. We are very fortunate to get the best opportunity to push forward our passion for these technologies. Driven by the urge to push the envelope beyond, way beyond and to compete at the highest level of quality and standards, to be in the forefront and a precursor of the technology we are involved with, Oinam will try to strive more and more towards developing high quality Software Applications for the web, desktop and other varied medias.

I am a big fan of Descendant Selectors and use it rather profusely. It is made up of two or more selectors cascaded by separating them with whitespaces. It helps me to match an element that is the descendant of another element in the document tree.

#myID { }
#myID .myClass { }
.myClass { }

Here in the above code, the attributes defined in the second line will be applied to .myClass elements in the document which is a descendant of the parent ID #myID. Whereas .myClass can be applied to other totally different set of elements that are not descendant of #myID.

div * p

will match only the paragraph elements that are grandchild or later descendant of a div element.

Attribute Selectors

Attribute Selectors allows us to specify rules that match a particular attribute defined in our documents. They can be matched in the following ways;

1. [att] – Match when the element sets the att attribute, whatever the value of the attribute
2. [att=val] – Match when the element’s att attribute value is exactly val
3. [att~=val] – Match when the element’s att attribute value is a space-separated list of words, one of which is exactly val. If this selector is used, the words in the value must not contain spaces (since they are separated by spaces)
4. [att|=val] – Match when the element’s att attribute value is a hyphen-separated list of words, beginning with val. The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches like the lang attribute in HTML

span[class=deprecated] { color: #ccc; text-decoration: line-through; }

Here, the selector matches all span elements whose class attribute has the exact value deprecated.

span[first="you"][second="me"] { font-weight: bold; }

Here, the selector matches all span elements whose first attribute has exactly the value “you” and whose second attribute has exactly the value “me”. Thus, multiple attribute selectors can also be used to refer to several attributes of an element, or even several times the same attribute.

Sometimes, we can combine Descendant and Attribute Selectors; div p *[href]. This will match any element that has the “href” attribute set and is inside a paragraph that is itself inside a div.

Child Selectors

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”.

body > p { font: normal normal normal small/normal Verdana, Helvetica, Arial, sans-serif; }

will set the style of all paragraph elements that are children of the body element.

div ul>li p

combines descendant selectors and child selectors. This will match a paragraph element that is a descendant of an li, the li element must be the child of an ul element, the ul element must be a descendant of a div. Here, we have the freedom to leave that optional whitepsace in “ul>li”.

Adjacent Sibling Selectors

Adjacent sibling selectors are something like FOO + BAR, where BAR is the subject of the selector. The selector matches if FOO and BAR share the same parent in the document tree and FOO immediately precedes BAR. Sometimes, adjacent elements generate formatting objects whose presentation is handled automatically (e.g., collapsing vertical margins between adjacent boxes). The “+” selector helps us to specify additional style to adjacent elements.

h1 + h2 { margin: 0 0 10px 0; }

directs the h2 element immediately following a h1 element to avoid margins but push the bottom margin by 10px.

h1.special + h2 { margin: 10px 0; }

We can also have special requirement in the formatting by adding an attribute selector. Here, this will apply only when h1 has the class=”special”.

The nice part of this book was that I could refer to the screenshot diagrams alongside the codes. The emphasis laid out on the Separation Of Content and Design through techniques that are semantic, well-structured markups proved to be effective yet simple, clear-cut and to-the-point. Accessibility too, is taken care of.

Chapter 1 deals with planning and explains the steps to be taken while developing a website, how to wire up the structures and hierarchy effectively. It details on how to have a management scheme for any website development.

Chapter 2 effectively drives home the aspects of writing valid XHTML and CSS. Starting from the very basic CSS, the author has used detailed methodology on explaining selectors, inheritance, multiple declaration, shorthand CSS and how, when to use them effectively. A clear and conscise explanation in this chapter includes that of the modern day CSS-Cult, Table Less Layouts Using CSS and also clear reasoning behind Why To Drop The Tables From The Design, all the best practices for XHTML and CSS.

It won’t be surprising to call it a norm to use Javascript for drop down menus, navigation rollovers though many web standard gurus are treating them as passe. To my understanding, it will be more effective to follow these web standard gurus as it would prove profitable in the long run.

Chapter 3 cleared my confusion over boxes, specially flexible width boxes and custom corners. This chapter also goes into explaining how to create RollOver Menus using List Items, complete with design improvements and how to tackle some of the browser-compatibility issues. The study of blogger.com redesign was set as the backdrop for this section.

Chapter 4 talks about the much acclaimed site, PGA Championship and this chapter makes you feel easy on how to create those cool nifty drop-down menus with CSS rather than using JavaScript.

Chapter 5 takes up University of Florida as an example and explains a good navigation system and gives an insight into the Flash Satay, including Flash Satay with Server Side Detection. Chapter 6 highlights ESPN.com and how to use HTML Elements properly. On a personal note, I would suggest a very competitive alternative to embedded Flash SWFs in a Web Standard manner, deconcept’s FlashObject.

Many web gurus believe that flexible or liquid layout is a better choice as it has the content area that expands and contracts according to the browser window size.

Chapter 7, goes deep into 3-column layout using FastCompany.com website as the example. This chapter explains the fundamentals of CSS positioning and when to use which positioning. Keeping the doctrine of proper CSS positioning, a developer would be able to create a well formed flexible 3-column layout effortlessly.

The chapter finalizes with an idea about CSS switching using Javascript and server side script. Finally, the book brings together of all the previous chapters through Christopher Schmitt’s site and explains the steps to follow before creating the website as well as how to create the site more effectively.