1. Technology

Advanced Cascading Style Sheets (CSS)

Advanced CSS covers the more difficult topics of Cascading Style Sheets like positioning, CSS2, and browser compatibility. Once you've learned the basics of CSS you should become familiar with the more advanced cascading style sheets properties and effects.
  1. CSS Positioning (10)
  2. Image Replacement (5)

Troubleshoot 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 Rule
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
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.

Why Use @import for External Style Sheets
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.

Block Web Page Printing
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.

CSS Outline Styles
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.

CSS Initial Caps
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.

Can You Fix a Background Image to the Bottom of a Table?
Yes, it's possible to fix a background image to the bottom of a table - use CSS background-image and background-position.

CSS Inheritance
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.

How to Test Different CSS Media Types
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.

CSS Outline Styles
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.

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

Advanced CSS - Take Your Styles Further
Make sure that you're getting all you can out of your CSS.

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

Box Model Hack - Getting Internet Explorer to Play Well with CSS
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.

Cascading Style Sheets (CSS) Descendant Selectors
CSS descendant selectors make it possible to define styles on elements that appear in certain locations.

CSS Box Properties Using Cascading Style Sheets to Style Web Page Box Properties
Use box properties with CSS to define your paragraphs without using tables

CSS Navigation Elements - Make Them a Block Element - CSS Navigation
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
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.

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

Determine a Style Property's Specificity Rating
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.

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

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

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

Get Cooking with Photoshop and CSS - 3 Low-fat Recipes [Design Practic
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.

Organizing Your CSS Files
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.

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

Tips and Tricks for Using CSS
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.

Using CSS Site Wide
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.

Using Style Classes and IDs
Applying styles across sections of a document using class and id attributes

What does !important mean in CSS?
An explanation of the !important property as used in CSS or Cascading Style Sheets

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

CSS and HTML Used to Modify the Stacking Order with Z-index
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...

Z-Index in CSS
Learn how to control the stacking order of your positioned elements with the CSS property: z-index. Positioning elements with CSS can sometimes result in elements overlapping one another. With z-index you can control what element displays on top, in the middle, and on the bottom.

CSS Cursor
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.

HTML Scroll Box
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.

Understanding the CSS Clear Property
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.

How to Clear Floats
Knowing how to use the CSS float property is an important skill for web designers. But an even more important skill is knowing how to clear that float property so that only what you want floated is floated. This article shows you three ways to clear floats to get the page looking as you want it to.

Internet Explorer CSS Filters
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.

©2014 About.com. All rights reserved.