Advanced Cascading Style Sheets (CSS)

Troubleshooting CSS problems can be tricky. There are all the different ways that browsers handle the CSS as well as errors in your CSS and genuine bugs that cause problems. But in order to solve the problems your page is having with CSS, you need to learn to troubleshoot your designs and your CSS.

The @page or at page rule is a an at-rule for paged media. It is a way of defining specific styles by the page of a document. You can also add specific styles for the first page of a document and the left and right pages of a paged document.

CSS sprites are a way to take one large master image and use it to display all the images on your site. CSS sprites help speed up your website and they provide a great way to manage the images on your site. This tutorial will take you through the steps to create a CSS sprite button bar for your website.

It used to be that the only reason people used the @import property in CSS style sheets was to block those styles from being seen by browsers like Netscape 4. But now that those browsers are practically unheard of, it might seem like there's no good reason to use @import in your style sheets. But @import does help streamline your CSS and make it easier to manage.

Use CSS to prevent your Web pages from being printed. This technique relies on advanced CSS attributes that some browsers don't support. But in general, you can use this method to make it difficult for people to print your Web pages.

The CSS outline property is different from the border property in several ways. The CSS outline property does not take up space and they may be non-rectangular.

Learn how to use CSS to create fancy initial caps for your paragraphs. There is even a simple image replacement technique to use a graphical image for your initial cap.

Yes, it's possible to fix a background image to the bottom of a table - use CSS background-image and background-position.

CSS inheritance is what defines how styles will be applied to child elements in a document. Inheritance in CSS allows the Web designer to define one set of styles for a top-level, parent element and have child elements beneath it carry the same styles, without explicitly calling them out.

One of the biggest frustrations of building CSS style sheets for different media types is that it can be very difficult to test them without the devices in question. While you should always do some testing on the devices, initial testing can be done on your monitor with this simple technique.

The CSS 2 outline property is different from the border property in several ways. Primarily in that they do not take up space and they may be non-rectangular.

CSS selectors of elements that are right next to one another. These elements are called adjacent elements or sibling elements.

Make sure that you're getting all you can out of your CSS.

Use CSS style elements to change the backgrounds of your Web pages and elements within them. Set up things like watermarks quickly and easily.

The CSS box model has very specific rules for how wide a box should be when a width is applied and padding, borders, and margins are applied. However Internet Explorer doesn't follow these rules. So we need a hack to make boxes in CSS the same width or height (whichever is defined) in Internet Explorer as in other browsers.

CSS descendant selectors make it possible to define styles on elements that appear in certain locations.

Use box properties with CSS to define your paragraphs without using tables

When using CSS for navigation elements, you should make the element a block-level element to aid usability on your Web site. CSS navigation is easy to do and this CSS property makes them usable.

CSS selectors are the basics of cascading style sheets. Once you understand CSS 1 selectors you'll be able to select many of the more common elements and situations to create a well-styled document.

Some nice looking examples of how to use CSS to create drop shadows on both images and boxes of text.

There are some simple steps to determine the specificity rating of a style property so that you can determine which styles will apply in which situations. CSS specificity helps determine when a style property will be applied regardless of where it appears in the style sheets. The more specific a style property is, the more likely it will be applied to the element.

Learn how to use Dynamic HTML to use stylesheets that take advantage of the browser.

It reall doesn't matter where you put the decendants to make them work correctly in CSS

Use font properties to adjust the look of the text on your Web pages.

If you're trying to learn CSS positioning, or maybe you know CSS really well, but you want to understand layout better, then this article will be of great help. With this article, you'll go from an empty canvas in Photoshop to a complete Web site.

Writing a CSS stylesheet is often just a matter of slapping all your styles into a document so that your pages look okay. But if you organize your stylesheet, your pages will be more easily maintained in the long run.

Adjust the look of the text with properties that affect your text. Like the spacing, decoration, alignment, and other things.

The biggest problem with CSS is that it is interpreted differently in every browser. But there are some methods to overcome this, without using JavaScript to create browser detection scripts.

When you want to use CSS across your entire site, the easiest way to do this is to create an external style sheet. Learn how in this article by Jennifer Kyrnin, your HTML/XML Guide.

Applying styles across sections of a document using class and id attributes

An explanation of the !important property as used in CSS or Cascading Style Sheets

Changing the scrollbar with certain CSS commands is illegal in valid XHTML documents, but you can prevent designers from affecting your browser.

Learn how to position overlapping elements so that they stack the way you want them to using the CSS property z-index. This page shows the HTML and...

Positioning elements with CSS can sometimes result in elements overlapping one another. With z-index you can control what element displays on top,...

CSS cursor is a great property to use to modify how the cursor displays on your web pages. You can use CSS cursors to display custom CSS cursors or just display a different cursor than the default. By changing the cursor with CSS you can even create easter eggs or hidden links on your web pages.

CSS makes it easy to take a large box of text and place it in a smaller box with scroll bars. Learn how to set up scroll bars on text, tables, and even images.

When you float an element with the CSS float property, sometimes you want to turn off that float before the wrapping text has reached the bottom of the element. To do this, you should use the CSS clear property. But there are some challenges you should be aware of when clearing floated elements as well.

CSS filters are a workaround that Microsoft created for Internet Explorer to handle many of the features that CSS3 handles natively. This article explains what CSS filters are and why you should avoid them.