CSS, How to Style with Margins

December 16th, 2009

When designing a CSS based website it is very useful to understand Margins. I have found that it is much easier to deal with browser compatibility when  one uses proper margin styles. Trying to set a top: -10px seems to cause browser issues that can be easily avoided by using margin-top:-10px. Margins can be applied to the outside of any block level or inline element Read More...

CSS, How to Padding Padding and more Padding

August 24th, 2009

Padding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content. Like margins, padding can be applied to individual sides of a box. p {padding: 10px} h1 {padding-top:0px} h2 {padding-right:5px} h2 {padding-bottom:7px} h3 {padding-left:10px} Padding can alse be applied using a single shorthand property Read More...

CSS, How to deal with background color and images.

August 23rd, 2009

The background-color property sets the background color of an element. The backgound-image property applies a background image to an element, which will appear on top of any background-color. body { background-color:#000 } h1 { background-image:url(header.png); }

CSS, How to deal with margins?

August 19th, 2009

Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements. Margins  can be applied to individual sides of a box: p { margin-top: 0;} p { margin-right: -5px;} p { margin-bottom: 10px;} p { margin-left: 5px;} Margins can also be applied using a single shorthand property Read More...

CSS, How to properly set box width.

August 15th, 2009

Setting the Box Width The width of an element is applied to the content area. Other measurements such as padding, border and margins are added to this width. For example, if an element is specified with width: 200px; the content area is 200px wide. If padding, boder, or margin are applied to the same element, their measurements are added to the overall width Read More...

CSS, How to use Universal Selectors

August 6th, 2009

Universal selectors are used to select any element. For example , to set the margins and padding on every element to 0, * can be used. *{ margin: 0; padding: 0; } Universal selectors also can be used to select all elements within another elements. The code below will select any element inside the <p> element Read More...

CSS, How to use Shorthand Margins and Padding.

August 2nd, 2009

Margins create space between the edge of an element and the edge of any adjacent elements. Padding creates the space between the edge of the element and its content. The margin and padding shorthand properties also can be used to make CSS code more concise. The margin property can combine margine-top, margin-right, margin-bottom, and margin-left Read More...