CSS Tips, Tricks and Trouble Shooting

Below are common CSS (Cascading Style Sheets) articles. Each article is geared towards either providing some sort of tip, trick or help with trouble shooting issues.

The CSS Box Shadow Property

Learn how to create box shadows around any HTML element you want.

CSS Negative Margins Example

The margin attributes in CSS doesn't necessarily have to be a positive value. See an example of how to overlap two div's with negative CSS margins.

CSS Padding Text (HTML and CSS Example)

Text padding in CSS defines the distance between the borders of the container and the content inside.

CSS Clear Styles Coding Example

With the CSS "clear" property you can instruct the browser to allow or disallow floating on a specific side of a block element.

CSS Custom Bullets Example

Don't settle for the dull circle markers in your unordered HTML lists or the default numbering in the ordered ones. You can style your lists with CSS to get pretty much any output.

CSS3 Transform

CSS3 allows you to do some nice image modifications you could only have done with an image editor in the past.

CSS3 Animation Techniques

CSS3 allows you to do some neat animation effects which you could have only done with Flash or some third party plugin before.

CSS3 font-face

You can define custom CSS3 font families to use in your design. Upload your TTF or OTF file to your host and apply the CSS properties.

CSS DIV Shadow

Shadows around DIVs are no longer novelty with CSS3. Learn how to create the effect here.

DIVs with Rounded Corners in CSS3

CSS3 allows designers to get blocks with rounded corners without the corny use of images or nested DIV's from previous versions.

CSS Gradients Tutorial - Applying CSS3 Gradients

Before CSS3 you had to use background images to get gradient effects. Fortunately you can do it with a simple CSS hack now.

CSS Flashing Text

CSS Flashing Text can be used to over-emphasize a certain paragraph or word. You can do it with a single line of CSS.

CSS Custom Fonts

You may sometimes need to use non-standard fonts with your design. Here is a way you can embed standard .ttf fonts with CSS.

Blinking Text in CSS

If you want to display blinking text in css on your page and don't want to use the deprecated BLINK tag, here is a way to do it.

Linking a CSS style sheet

Separating code from presentation should be a well-known practice to all designers. Here is how to link an external CSS file from within your HTML code.

CSS Transparent Images

Before the emergence of CSS, designers had little tools to control transparency of images. This is no longer the case -- CSS3 gives you the tools to do it.

CSS Style Scrollbar

The color of the browser's scroll bar can be changed with a little CSS tweaking. Here is how to do it.

CSS Overriding Styles

Rather than overriding CSS styles inline, here's an approach that will help you maintain your code over the long run.

CSS No Image Border - How To

Using the "border" property of the "img" tag to set borders to zero is cumbersome and difficult to maintain.

CSS Dotted Border Style

Dotted borders around a DIV tag are a nice effect you may want to use in your design.

CSS Display Visibility

You can show or hide images, paragraphs or entire sections with a few CSS hacks. Learn how to do it here.

CSS Display Block Inline

This short tutorial will assist you with various ways of displaying blocks of text with CSS.

CSS Border-Left Property

The looks of the left border of a block can be customized with CSS.

Cell Borders and CSS

This article will show you how to customize the borders of a cell with CSS.

HTML CSS Classes and IDs

Classes and IDs in CSS are often confused. If you aren't sure where to use each, read this short tutorial.

Body HTML and CSS | Inline CSS

If you design HTML emails, you will find that the HEAD tag is stripped. You will have to place all relevant bits of code (including CSS) inside the BODY tag.

HTML Style Font Size with CSS

You can change the html font size with the CSS property font-size. Learn how to do it here.

HTML DIV Position | Positioning a DIV with CSS

You can change the position of an HTML DIV with the use of CSS (Cascading Style Sheets). It's very simple and we'll show you how to do it here with margin.

HTML Link without an Underline

Sometimes you don't want one of those annoying underlines for specific links on your page, which is understandable. Learn how to remove that line with CSS.

CSS Span Width

Learn how to set a css span width. Find an easy to understand HTML and CSS example inside.