By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.

The easiest way to start experimenting with style sheets is to find a browser that supports CSS.

Source : http://www.w3.org/Style/

Hexadecimal notation

You probably already know how the hexadecimal notation looks, for each colour (Red, green and blue) you have two letters or digits, and in front of that a #. The higher the digits are, the brighter the colour. Pure black becomes #000000 while pure white becomes #FFFFFF.

But what do those digits actually mean? Hexadecimal notation uses a system of 16 digits. Because we only have 10 digits, the remaining 6 (they start at 0) are described using the letters A to F. Together, this allows for 256 numbers per primary colour. Those 256 numbers correspond with the current RGB colours in most screens, and allow for about 16 million different colours.

Next to the #rrggbb notation, there also is the #rgb notation that lets you pick red, green and blue with 16 increments, totalling 4096 colours. This means that #ff0000 and #f00 give the same colour.

RGB Notation

Another notation that has been in CSS for a while is “direct” RGB. It looks like this: rgb(255, 0, 0) for 100% red, 0% green and 0% blue. As you might already have guessed, this notation also uses 256 steps for each of the primary colours.

The only difference (apart from the syntax) is that RGB uses our own system of counting, while hexadecimal notation uses an alternative method. In theory, it’s easier to use the RGB notation because we understand it better. But when working with hexadecimal notation, it is my experience that you learn to think in 16 digits pretty quickly.”

Read the full article hosted by Kilina Valkhof’s personal blog and master the art of color control for your web page.

While XPath and XSLT are defined as separate specifications by the World Wide Web Consortium (W3C), XPath functions as a sub-language within an XSLT style sheet. The XPath specification provides a concise and intuitive way to locate and process items in an XML document based on a path through the document’s hierarchy of nodes. XPath uses a compact syntax for use within Uniform Resource Identifiers (URIs) and XML attribute values.

XPath models an XML document as a tree of nodes. XPath uses expressions to refer to different types of nodes—element nodes, attribute nodes, and text nodes—and XPath defines a way to compute a value for each type of node.

XPath expressions contain all the information to address a particular location in an XML schema. XPath expressions can contain location paths, function calls, variable references, unions of sets, comparisons, mathematical operations, and so on, all of which can be used together or independently to return a node set, a node value, or a mathematical or functional manipulation of that node value from an XML document. Additionally, an XPath expression can be evaluated to return three other object types: Boolean results, floating point numbers, and strings.
XPath Syntax

The purpose of an XPath expression is to identify one or more source nodes or to define how result nodes will be populated or modified. To address nodes in an XML document, XPath uses a syntax that is similar to an informal set of directions for finding a particular geographic location. For example, in XPath syntax, instructions on how to get to a particular beach in a park might look like this:

/Canada/BC/Vancouver/StanleyPark/ThirdBeach

Though its syntax is analogous to a file or directory structure, a key difference between XPath and earlier similar languages is that XPath specifies a route, rather than pointing to a specific set or sequence of characters, words, or other elements.

Similarly, if you wanted to locate the price of a particular line item in a purchase order, your XPath location path might look like this:

/PurchaseOrder/item[name=’Leaf blower’]/price

A basic XPath expression can consist of one or more location paths. An XPath location path is essentially a description of how to get from the current location to another one. It is made up of a series of location steps separated by a delimiting character. A location step can be composed of an axis, a node test, and a predicate, which are expressed as follows:

axis_name/node_test[predicate]

The axis specifies a route through the schema tree starting from a particular context node. The route is defined in terms of a list of nodes reached from the context node. The node test then selects a set of nodes using the selected axis. Expressions use predicates to further filter the set of nodes selected. For example, the following expression would return the Price child of the second occurrence of PurchaseOrder/Item within an XML document:

PurchaseOrder/Item[2]/Price

If a predicate is used to filter a node in an XPath expression, the node to which the predicate applies is known as the context node. You can access the context node directly using the expression “.”, which is the value of the select attribute within a <xsl:value-of> statement.

In all of the above examples, the XPath expressions are relative to the starting location. In XPath, the current node is the starting point where the location addressing begins at runtime. A node becomes the current node when it is processed using an <xsl:apply-templates> or <xsl:for-each> statement. You can access the current node directly using the current() function. If within an XPath expression, a predicate is applied to the current node, then the current node is also the context node and you can access it directly using the expression “.”.

In addition to the context node, current node, and location paths, XPath applies two other key concepts: the hierarchical tree structure in XML documents and logical relationships, such as ancestor, attribute, child, parent, and self, which are defined in the XML Information Set specification from the W3C.

source : http://developer.capeclear.com/7_beta/help/index.jsp?topic=/com.capeclear.eclipse.studiohelp/studio/wstransform-introductiontoxpathandxslt.html

For a SharePoint 2003 Portal and WSS install, there are 7 separate style sheets (excluding themes), totaling to 7,403 lines of code and 1,227 style statements. Ouch! Luckily some of that we can slash off pretty quick. Four of the seven style sheets I have yet to ever have to edit to affect a site (Menu.css, OWSmac.css, OWSnocr.css, Paystub.css). The other three are pretty easy:

• SPS.css: SharePoint 2003 Portal style sheet
• OWS.css: SharePoint 2003 Portal style sheet AND Windows SharePoint Services style sheet
• OWSPERS.css: SharePoint 2003 Portal Personal Sites (My Sites) style sheet.
  OWSPERS.css is a combination of a copy of SPS.css and OWS.css with a few things tweaked here and there. You can condense the style statements in OWSPERS.css to something more manageable and less repetitive. I tell you how here.

SPS.css and OWS.css have a few quirks. There are style selectors that are repeated in each. In some cases, the duplicate styles are not connected and control WSS and Portal separately, but in other cases the two are connected and what you have in one can possibly override the other, making for a confusing and frustrating situation. Additionally, the styles may share the same selector, but list different properties in the declaration.

When a portal page is rendered, it pulls in several style sheets, in this order 1) OWS.css; 2) MENU.css; 3) SPS.css.

When a WSS site is rendered, it pulls in the OWS.css style sheet and then the theme style sheet if a theme has been applied to a site.”

Read the full article at the author’s personal blog.

Like most things in life, though, cascading style sheets have both advantages and disadvantages.

CSS Advantages

1.

Separates content from presentation. What happens when you want to change the margins on all the pages of your site? If you use tables for layout, then you have to change every page. With CSS, just change the default style of the <body> tag. Instead of changing all pages, you only need to change one style sheet. Using CSS makes site-wide presentation changes a snap. That allows you to spend your time on page content and structure, not presentation.
2.

Replaces frames. A fundamental Web design rule is frames are bad. They can help site navigation, but even in the best case problems remain: pages can’t be bookmarked, and it’s impossible to specify a set of frames as a link destination. CSS’s ability to give elements a fixed or absolute position allow Web designers to do away with frames; the frame is now part of the page itself.
3.

Graceful degradation. A site that uses CSS well will be just as usable on browsers that don’t implement CSS as on those that do. The site might not appear the same, but all the important information will be present. This “graceful degradation” was built into CSS by its designers, and is an example of excellent design.

Ah, if only it were all this good.
CSS Disadvantages

1.

Fails as a frame replacement. While eliminating frames is a noble idea, it’s a goal that has not yet been reached. As of this writing (2002-01-24), CSS is a failure as a replacement for frames, due to broken CSS implementations in recent browsers (Amaya 5.3, Internet Explorer 6.0, K-meleon 0.6, Netscape 6.1, Opera 6.0).

To be specific, try creating an element with a fixed position that includes a link to a named anchor. None of the browsers listed above followed the link & rendered the resulting page correctly; does your browser?

This problem should be remedied in time, but I suspect that CSS fails as a frame replacement for another reason. Consider a site with one navigation frame and one content frame. If I understand CSS correctly, the contents of the navigation frame must be replicated in each of the content pages. That can lead to a maintenance nightmare. The situation can be worse: consider a navigation frame that offers three alternative navigation pages, such as a table of contents, a subject index, and a search page. Must each content page have three different versions, one per navigation page? Yow! The headache of exponential potential!
2.

A great power. Like any design tool, CSS requires practice and experience to use well. It offers great control over presentation; however, the more control a Web designer has over presentation, the more ways that designer has to make ugly and unusable documents. With great power comes great responsibility.

Consider the useful CSS Reference, 3rd edition at the House of Style. This edition is fine, but a previous edition used a style sheet that assigned the same background color to all header elements. This made it hard to distinguish headings from subheadings, since the primary visual cue (background color) made headers appear more similar, not less. (Here’s a demonstration of the problem, and a non-CSS version of the same.) This is the kind of problem style sheets were supposed to solve, not exacerbate. If a company that makes its living from CSS could make such a simple CSS mistake, what hope is there for amateur proficiency?
3.

CSS is not designed for horizontal layouts. CSS’s page layout model is to fill the page from the top down, flowing additional content off the bottom of the visible page. This vertical bias has its drawbacks. It’s not possible to make a multicolumn layout that scrolls new columns in from the side when needed. Also, unusual sites such as Scott McCloud’s Daily Improv (a horizontally scrolling comic) have to rely on HTML tricks to achieve their layouts.
4.

Hard to retrofit. It’s possible to retrofit a site with CSS, but when you have a site with almost three hundred HTML files containing over eighty thousand elements, visions of CSS become nightmares of editing hell.

Using CSS pays off when it’s a part of a site’s design from the planning stage on. Retrofitting a site, on the other hand, can involve more than simply peppering pages with class=”hot-quote” attributes. Converting a layout to CSS invariably requires adding new HTML elements (usually divs). So we’re still mixing semantic and presentation markup, which CSS was intended to separate.
5.

Makes downloading pages harder. If you want to save a copy of a Web page for offline viewing, you’ll have to do more work if the page links to style sheets. To get the page as it’s presented in your browser, you have to download not only the page’s HTML and the style sheets it links to, but also all of the style sheets they import, and so on down the chain of @import statements. Determining style sheet dependencies is a task that, while simple, must currently be done manually.
6.

Wastes time. Time spent twiddling style sheets is time not spent improving site content. How many people go to a site just to look at the pretty design? And what percent of those who do will have a reason to return? Content gives them a reason; design doesn’t.

Conclusion

Are cascading style sheets harmful? I can’t give a sage answer, since I’ve only been using them for a week or two, and there are CSS topics I’ven’t yet explored (e.g., printing). However, from what I have learned, I’ll offer this: CSS in moderation can be a good thing, but extensive use of CSS is harmful. It’s easy to improve page readability by modifying nothing more than the margins of the <body> and <p> elements. However, when you find yourself spending an entire day getting a style sheet just right, ask yourself what you could have done with the time instead: Writing new pages? Improving site navigation? Giving people a new reason to visit your site, rather than eye candy? One focuses on design at the expense of content, and CSS gives Web site designers a tempting tool for playing with design ideas. One must remember that search engines index content, not design.

Consider this lesson:

A student went to see his master. As he walked along a riverbank, he flushed a fox from its den. So startled was the student that he lost his footing and fell into the mud. With distaste he picked himself up from the muck and cleaned himself as best he could, then hurried on to his master’s house. When the master saw his student, he asked why the student cast his gaze downward. The student related the story of the fox, and apologized that he was no longer presentable. Then you must find a new master, said the wise man, for I do not know how to teach cloth.

Upon hearing these words, the student was enlightened.

source : http://www.rdrop.com/~half/Creations/Writings/TechNotes/CSS.html

Reinventing the Wheel

The focus of last week’s XML-Deviant was the concern expressed by several XML-DEV contributors that the interdependence of several W3C specifications may have exceeded the dictates of software reuse and become instead a tangled mess. Suggestions were floated for a refactoring of several standards in order to separate the component parts.

This debate has focused on XML Query in particular this week, following Evan Lenz’s claim that the overlap between XML Query and XSLT is so great that they are not really separate languages.

After reviewing the XQuery spec, I’m concluding that the overlap between XQuery and XSLT is far too great for the W3C to reasonably recommend them both as separate languages. If XSLT (or XSLT 2.0) isn’t considered adequate as an XML query language by itself, then the development of an XML query language should still build from the same semantic and syntactic base as XSLT.

Lenz has fully documented his opinion in a paper he’ll be presenting at the XSLT-UK conference in April. The most obvious overlap between XML Query and XSLT is their shared use of XPath. Indeed, the XML Query and XSLT Working Groups are coordinating on the development of XPath 2.0. XPointer took a similar approach, layering itself on XPath 1.0. At first glance this seems a reasonable approach.

However, Lenz believes that the overlappings go deeper than sharing XPath.

The “navigation part” is only a small part of the overlap. The result construction mechanisms, the flow control mechanisms, the variable binding mechanisms — these are all virtually indistinguishable (other than syntax) from XSLT’s mechanisms for doing the same. I demonstrate all of this in my paper.

The introduction of datatypes is making its way not only into XQuery but the XPath 2.0 and XSLT 2.0 requirements. Regardless of whether datatypes are only part of query or are part of both query and transformations, there should be a common semantic and syntactic core for XSLT and XQuery, rather than an invention of an entirely new syntax.

Lenz characterized XML Query as a subset of XSLT (no template rules, no abbreviated XPath axes) with the addition of data typing, and he claimed that this should be the model upon which XML Query is developed. Noting concerns over the optimizability of XSLT, Lenz pointed out that the XSLT 2.0 requirements refer to an XPath subset that could be used to develop XML Query.

Read full story at XML.com http://www.xml.com/pub/a/2001/02/28/deviant.html

This is old news, but why do I consider it noteworthy? Because it’s the #1 application where media-dependent CSS, on top of media-independent HTML, ought to come into play… and yet, and I’m guessing, only 5% of all pages make use of it. You’d think after years of evangelizing done by web developers, the likes of CNN or Wired would have gotten the point.”

Read the full article hosted by the Google Blogoscope.

“The essence of Pixy’s Fast Rollovers involves creating one image for each navigation item that includes normal, hover and active states stacked on top of each other. Later, we’ll use CSS to change the background-position to reveal each state at the appropriate time.Figure 1.1 on the right shows an example image that I’ve created and used for Fast Company’s new navigation. Each state is 20px tall with a total image height of 60px. The top 20px is the normal state, the next 20px shows the hover state and final 20px shows the active state (which is also used for the “you are here” effect). There are similar images for each tab we’d like to use.

Using one image for each state allows us to toss out ugly Javascript and instead make use of simple CSS rules for hover effects. This is good. It also eliminates the “flicker” effect that other CSS methods suffer from, where separate on/off images are used. This is good. We also don’t have to pre-load any additional images. Again… this is good.

The CSS: This is Where the Magic Happens

First we’ll set up the rules that all navigation items will need. This will save us from writing duplicate rules for each tab. Then we’ll add a separate rule for each list item id, giving the li it’s own background-image and width — the only two variables that will be different for each tab.”

Read the full article from SimpleBits.

HTML on the Web Today

While HTML 4.01 is formally an SGML-based document format, the only clients actually treating HTML that way are validators. Browsers, on the other hand, treat HTML documents as tag soup—they try to make sense out of, and display, even the most horridly broken document to their best ability. Very little content on the web is valid HTML 4.01; most of it is invalid and ill-formed, but browsers still have to parse it, or they will soon be disregarded as users switch to browsers that support their favorite sites.

Tag-soup handling—trying to correct errors in documents—is essential, but every browser does it a little differently. All browsers try to get as close as possible to how their largest competitors do it, but even when broken content works the same in different browsers, it doesn’t necessarily mean that they are performing error correction in the same way, just the way that both works for the common case and is most practical for them. HTML5 tries to put an end to this need for reverse engineering of competing browsers by defining exactly how this error correction is to be done. HTML5 doesn’t just define how valid documents are to be parsed, it also defines how parsing should work if documents are invalid, ill-formed, and broken, so that browser vendors can make their products fully interoperable with each other.”

Read the full article at Digital Web Magazine