- Be sure to also check the links that follow this section.
If you're interested in advanced HTML, XHTML, CSS, and DHTML, you've come to the right place. We have tutorials, book reviews, specifications, and references to all that you need, and more.
Just in case you're not sure what all that means, here are a few definitions that might help you:
- XHTML: eXtensible HyperText Markup Language. XHTML 1.0 is the first document type in the XHTML family. It is a reformulation of the three HTML 4 document types as applications of XML. It is intended to be used as a language for content that is both XML-conforming and, if some simple guidelines are followed, operates in HTML 4 conforming user agents. (W3C)
- CSS: Cascading Style Sheets. A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
- DHTML: Dynamic HyperText Markup Language. Combines HTML, style sheets, and scripts to make Web pages dynamic or interactive.
Working with the DOM Stylesheets Collection
The DOM exposes the style sheets as a property of the document object. Using the document.styleSheets property, you can create, delete and modify existing rules within any style sheet in the page.
Customizing and Managing Your Site's Appearance - Part 3
When a page that uses a master page (i.e. a content page) is requested, ASP.NET merges the content page and master page together (assuming both have been compiled) by inserting the master page's content at the beginning of the content page's control tree. This means that the master page content is actually a control added to the page.
Customizing and Managing Your Site's Appearance
ASP.NET 2.0 provides a number of ways to customize the style of pages and controls in your Web application. This week we examine the various properties of Web server controls, how to use CSS with ASP.NET and how to work with themes, master pages and user controls.
Joomla Templates: Creating a Pure CSS Template - Part 4
This week we look at how to make a Joomla 1.5 template. We begin with a comp, the design which is the basis of the template. From there we get into slicing (creating small sliced images), setting up module locations, column backgrounds and more.
Joomla Templates: Creating a Pure CSS Template - Part 3
In this installment, we look at modules in templates, menus in templates, hiding columns and module code. All of this creates a pure CSS layout that has dynamic collapsible columns.
Joomla Templates: Creating a Pure CSS Template - Part 2
This week we delve deeper into CSS with Joomla. We cover templateDetails.xml, index.php, creating a blank Joomla template body, using CSS to create a tableless layout, CSS shorthand, Joomla specific CSS and more. By Barrie North.
Page Structuring Using Cascading Style Sheets: Part 2
This week we look at how to modify AP element properties with the AP elements panel, design tableless Web pages with AP elements, work with built-in CSS page layouts and more.
Page Structuring Using Cascading Style Sheets: Part 1
This week you'll learn about AP (or Absolutely Positioned) Elements. These are CSS-driven "content blocks" in Dreamweaver that can contain text, images, media elements and more. Additionally, you can freely position the AP Element anywhere you want on a page.
CSS Support in Visual Studio 2008
It sure took Microsoft long enough to add decent style sheet support to Visual Studio, but man was it worth the wait. This article examines the new CSS capabilities available in Visual Studio 2008.
Review: SiteAssist 3.0
Designing Web pages can be a time consumng endeavor, especially if you have to start from scratch. Fortunately, if you use Dreamweaver, you can make use of SiteAssist, a Dreamweaver extension that allows you to build customized templates using table-based or CSS layouts.
Controlling Web Page Backgrounds With CSS
Once derided, backgrounds now form the basis of many well-designed Web sites.
Ajax Components - Part 2
How to Create Form Posts with Ajax
Now that Ajax is becoming a standard for handling interactions on the Web it's time to use it to update form submissions. In this article you'll learn how to create a reusable Ajax process for all forms. The source code and a working demo is included.
This week we look at the process of building a user interface. You'll learn how to encapsulate Ajax functionality into both imperative, as well as declarative, components.
Anatomy of an Ajax Application
This week you'll learn about the individual building blocks of Ajax and how they fit together to form the architecture of an Ajax application. Subsequent lessons will examine these components in more detail and will create a working Ajax application.
Partial Page Rendering Using Hidden IFrame
Partial page rendering removes the need for the entire Web page to be refreshed as the result of a postback. Instead, only regions that have changed are updated, speeding up user interaction with the Web site.
Implement an Ajax-enabled scrollable table, in which rows are dynamically fetched from the server, as the user scrolls, without the whole page refreshing. This technique is unique and very convenient for implementing pages with a lot of dynamic content in a readable form; for instance, a live news feed.
Display Text on Web Pages With Flash
Using Flash for text display can add typographic polish to your Web pages.
Customizing a MySpace Page for a Band
Most musicians today have a Web site which they use to market their CD's, band schedules and merchandise. Among the many marketing options, one approach is to customize a Web page on MySpace to use for your band.
A common misconception among many people is that Web development and Web design are synonymous. This article explores the distinctions between the two careers, including some of the skills you need to pursue them.
How to Redesign Your Web Site
Occasionally, a Web Site can benefit from a facelift or a completely new design. In this article, we look at methods you should consider before you begin.
Controlling Layout in Ajax Web Applications Using the GWT and Java
Learn how to control the layout of a GWT Ajax web application using HTML layout capabilities, the capabilities of the layout classes in the GWT API, and a combination of the two. Also learn more essential aspects of the creation and deployment of GWT Ajax web applications.
Review: Expressions Web
A new editor issued by Microsoft, this application is designed to replace FrontPage, which will be discontinued. Our reviewer takes a look under the hood of this program and finds some unexpected surprises.
How to Use CSS for Search Engine Optimization
Using external CSS files to determine the design attributes creates clean HTML code and will create better search engine rankings. With some knowledge of CSS you can change the code without destroying the visual layout.
How to Create Great HTML E-mails with CSS
HTML emails have great appeal and are widely used for all kinds of professional correspondence, but ensuring that your message displays correctly can be a daunting task. Fortunately, we have options.
Creating CSS Friendly Websites with ASP.NET 2.0
This article, by Scott Mitchell, looks at using the free CSS Friendly Control Adapters from Microsoft to build CSS friendly websites.
CSS Layouts Without Tables
Cascading Style Sheets (CSS) are the most flexible way to create attractive, standards-compliant websites. This article will address the drawbacks of relying too heavily on tables for layout as well as the benefits of using CSS.
Review: CSS: The Missing Manual
CSS can be a difficult to master as there are many aspects to learn. So what do you do? First of all, don't give up. Secondly, check out this volume, which uses a new approach, enabling the reader to quickly learn the technical aspects of CSS.
Review: CSS Tab Designer
If you've ever tried to create CSS tabs for your navigational systems you know how frustrating that can be. Fortunately there's another option, a piece of software which promises to be the solution to the problem.
Browser Support for CSS
CSS rules are always interpreted by Web browsers. These standards give specifics on how browsers should display those rules - but they're not always followed. To design pages with CSS, you need to know the standards, and to understand how browsers' quirks and flaws will affect your Web design results.
CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns
So far (in the previous article), all the examples have used widths defined in pixels. This type of layout is known as fixed-width layout, or sometimes "ice layout" due to its rigid nature. This week we look at fixed-width, liquid and elastic layouts.
CSS Tips and Tricks
This article is aimed at helping people improve the CSS code they write, whether they're beginning developers or elite 12th dan webdev masters who may have missed a trick or two!
CSS Mastery: Page Layout
One of the major benefits of CSS is the ability to control page layout without needing to use presentational markup. This week you'll learn how to horizontally center a design on a page, create two and three column float based layouts and more.
Review: Site Kreator
Want to create an interactive Web site, but have little or no experience? Check out Site Kreator, an application with many options, such as CSS, blog creation, image galleries, mailing lists and more.
Why Most--But Not All--Tables Are Bad
Still using Tables for your Web site development? Rachel Andrew and Dan Shafer suggest it's time to move on.
Solving Box Model Problems
Having problems with web page element dimensions being different in every browser you try? Read on for the solution to the box model problems you may encounter.
Scripting in the Browser: Part 1
CSS 2.1 Properties
Cascading Style Sheets (CSS) are used for Web page layouts and aid in separating the document's style from its structure. Used correctly, CSS can be a powerful Web design tool. This extensive reference covers all the properties of the current version.
Style Sheets 'Made' Easy
One of the biggest problems many people have with setting up a Web site is creating the cascading style sheets (CSS). If you don't know how to create a style sheet, or don't do it that often, here's an alternative.
Delicious Recipes for Your Web Site
This cookbook offers a wide range of solutions to real-life problems that come up regularly when creating and growing a Web site. If you've been wanting to learn how to build Web sites that people will visit, bookmark and revisit, read this review.
Software Review: NoteTab Pro
If you're comfortable with HTML and CSS and don't want or need a WYSIWYG program, then NoteTab Pro may be the editor for you. Its many features and clip libraries make it an excellent choice for getting down and dirty in the midst of your code.
Book Review: Cascading Style Sheets - Designing for the Web
Written by the creators of CSS (Hakon Wium Lie and Bert Bos), this book covers all aspects of CSS, beginning with the basics, such as the anatomy of a rule, linking styles sheets to documents and progressing to more advanced topics.
The HTML Hierarchy: Thinking Inside the Box
When we think of HTML coding, we tend to think of elements ("tags") used to structure a Web page, but our attention is usually focused on the appearance of the final product. In contrast, learning to visualize the structure of the code can actually help in the design of the page. By Lee Underwood.
Book Excerpt: Sams Teach Yourself CSS in 10 Minutes
In this lesson, you will learn how to position a two-column page layout with a header and a footer. This method involves floating them both because it is the most reliable method across most modern browsers.
How to use CSS to Create a 'Two Step' Photographic Gallery
In the wake of his success with 'How to Create a Photographic Gallery Using CSS,' author Stu Nicholls has created a new method which doesn't require thumbnail images and has a unique two step method of display. The 'mouse hover' stage creates a half size image and the 'mouse click' creates a full size image.
Using CSS to Position Horizontal Unordered Lists
Let's say that you've chosen to use a horizontal styled unordered list for your navigation and have followed the CSS methods as posted on the web. All's well until you decide to position your menu centrally or to the right and this is where it starts to get tricky.
Book Review: Spring into HTML and CSS
Do you need to quickly get up to speed when building Web sites? Were you recently elected to create a small Web site for your company? Perhaps you work in a small office and just want a presence on the World Wide Web. Whatever your reasons this book offers a simple solution.
How to Use CSS to Solve min-width Problems in IE
How to Join Classes with CSS
If you've just started to learn CSS and have looked at multiple tutorials, bought the latest books, etc., you might not have realized that it's possible to join up your classes. You aren't limited to having a single class in a tag. In fact, you're not limited to having just an id!
How to Add Fluid Borders to Your Boxes with CSS
In the last tutorial you learned how to style a definition list. This week, you'll delve deeper into this process and learn how to add different fluid borders to your boxes using just CSS.
How to Style a Definition List with CSS
Many tutorials on the styling of CSS lists for menus use unordered lists, but these can be difficult to understand since extra styling is needed to remove the bullets. This week, you'll learn how to style a Definition List, which is equally suitable for menus, but is a little easier to understand.
Controlling Graphical Page Elements with CSS
Christopher Schmitt provides table-free techniques for accurately positioning graphical elements on Web pages.
How to Create a Frames Layout with CSS
By far the most sought after use of CSS is to emulate the dated html 'frame' layout, whereby the header, navigation and footer stay on screen at all times and the content area will scroll. This week, you'll learn how to all these things with CSS. By Stu Nicholls.
How to Create Flick Animations with CSS
Fed up with Flash and GIF animations? Try out the new alternative - CSS Flick Animation. These animations normally appear as static images on the page but they spring into life when you move your mouse across them. By Stu Nicholls.
How to Create a Photographic Gallery Using CSS
Web sites (both personal and professional) often make use of galleries to show off photographs, artwork, etc. This week you'll learn how to create a professional gallery using an unordered list of photographs and a Cascading Style Sheet (CSS).
Creating Graphical Navigation with Rollovers
HTML 4.01 Element Reference
HTML is the most basic and common language on the world wide web and is relatively easy to learn. If you've been looking for an excellent resource, this is the HTML 4.01 element (tag) list as recommended by the W3C.
How to Create an Image Map Using CSS
This week, you will learn how to turn an ordinary definition list into an image map using nothing more than CSS, and what's more, it should work in all modern browsers, including IE 5.5. Each styling styling step is fully explained so you can see how to implement it for yourself. By Stu Nicholls.
How to use CSS for Flickerless Image Replacement
One use of CSS is the styling of unordered lists used to hold menu links. This week you'll learn how to remove the unordered list items, replace them with images and, using two images per link, have a hover state that is flicker free in Internet Explorer.
Using the DOCTYPE Tag
Having trouble with your Web pages? Can't get them to display correctly in your browser? It might be that your page is a little "quirky." Even if you address all errors in a web page, one problem that many developers overlook is a <DOCTYPE> statement or, if used, failure to use the right one.
HTML 4.01 in Netscape and Explorer
This is an updated and revised annotation to the HTML 4.01 Specification published by the World Wide Web Consortium (W3C), detailing the differences between the specification and its implementation in Netscape Navigator 7.2 and Microsoft Internet Explorer 6.0.
Dynamic HTML Lab: Pop-up Calendar 1.2
In the first maintenance release of our Popup Calendar, we added better navigation bar styling and the ability to clear read-only input fields. In this latest release, we include new functionality that enables you to separate form elements to display any combination of a user-selected date, month and year.
Dynamic HTML Lab: Fun with Mozilla Border Radii
The Mozilla people have jumped the gun on CSS3 and prematurely put an end to purely rectangular elements with their curved elements and borders. Here's a preview of what to expect in CSS3, and a demonstration of what you can do right now in Gecko browsers.
Dynamic HTML Lab: Pop-up Calendar 1.1
The first maintenance release of our new, but already popular, Popup Calendar includes better navigation bar styling, the ability to clear read-only input fields and fixes a couple of minor problems missed the first time around. By Peter Belesis.
To fully appreciate the functionality of dltypeof(), you should be familiar with the JS operator it attempts to replace, typeof(), and the frustrations associated with the limitations of the typeof() operator.
Dynamic HTML Lab: Pop-up Calendar 1.0
Behind the Scenes with XHTML
In a previous article, we touched on the requirements for proper XHTML coding, especially in relation to HTML 4.01. Today, we look at what some of those requirements are in relation to the head portion of the Web page.
Software Review: Layout Master 1.1
Creating a layout with CSS can be quite complicated. And even though some WYSIWYG HTML editors offer visual authoring, many Web designers prefer to code by hand. Layout Master 1.1 is a powerful editing tool designed to help remedy that problem.
Software Review: Style Master v.3.5
Cascading Style Sheets are an important element of current Web design. Today, Lee Underwood examines Westciv's Style Master, an application dedicated to the creation and tweaking of Style Sheets.
Browser Wars v.2004: Part 2
As the browser wars continue, the battle appears to be changing as many users are switching to other, lesser-known browsers, resulting in an increase in their popularity. Whether a statement of personal choice or a reaction to Microsoft, that remains to be seen.
Browser Wars v.2004: Part 1
As the World Wide Web evolves, it seems as if a war is raging between the biggest players - the World Wide Web Consortium (W3C), other browser manufacturers, and Microsoft. And the developers? They're caught in the middle.
Why Switch to XHTML?
For Web developers, the learning process never seems to end, especially with coding. As the web evolves, so do the standards, which are moving from HTML to XHTML. Learn why you should consider migrating to this new standard sooner than later. By Lee Underwood.
A (CSS) Horse of a Different Color, Part 1
Currently, the World Wide Web Consortium (W3C) is working on enhancements and improvements to CSS. One of these deals with color, and HSL (Hue, Saturation and Lightness) has been proposed as a a more intuitive way of specifying color values than hexadecimal code or RGB decimal values. By Keith Schengili-Roberts.
Determining Element Page Coordinates, Part 4
Just when you thought it was safe to find element coordinates in Internet Explorer, DHTML expert Peter Belesis returns, this time squashing positioning problems with objects located inside absolutely and relatively positioned content.
Determining Element Page Coordinates, Part 3
When it comes to getting the x/y position of in-page elements, Internet Explorer isn't the only browser with pixel problems. We continue our quest to create the perfect cross-browser DHTML element locator by ironing out some Gecko-based wrinkles. By Peter Belesis.
Determining Element Page Coordinates, Part. 2
"No matter where you are, there you are." Unless, of course, you're in a bordered IE table, in which case you're actually one pixel away from where you are. DHTML Expert Peter Belesis tackles the missing IE pixel problem in part 2 of this series.
Determining Element Page Coordinates, Part 1
Using CSS to assist with printing a Web page
This FAQ discusses how to use CSS tags and client-side code to print a Web page, and what can and cannot be done with regards to formatting and print options.
DHTML Lab: Speeding Up Frame Rates For Animation
DHTML Lab: DHTML Application Toolbars
As part of our continuing series on building Web apps with DHTML we show how to build application-like toolbars with Internet Explorer, complete with rollovers and keyboard shortcuts.
DHTML Lab: Smooth Animation Using DHTML
Do your animations dawdle? Have your smooth moves gone herky jerky? Fear not Bunky, Morten Wang shows how to make your pages dance to a brand new beat.
Making Headlines With Cascading Style Sheets
It only takes a dash of CSS to spice up otherwise bland content and grab your reader's attention. In this tutorial, guest author Christopher Schmitt provides specific examples for dressing up your page and section headers.
Advanced CSS Layouts: Step by Step
Learn how to layout your pages without tables using CSS. Months in the making, this step by step tutorial shows how we duplicated WebReference.com's home page using CSS. By Rogelio Lizaola and Andy King.
Cascading Style Sheet (CSS) Articles and Tutorials