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...
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); }
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...
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...
Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files Read More...
The <div> elements is a generic container that can be used to add structure to an HML document. Although it is a block level element, it does not add any other presentation to the content. In many of the examples on this site the <div> element has been used to contain logical division of conent, such as navigation and footer information Read More...
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...
Border properties can be converted to the shorthand border property. The <h1> element can be styled with border-width, border-style. and border-color or with a single border property. Longhand Properties h1, h2 { text-align: center; color: navy; } h1 { border-width: 1px; border-style: solid; border-color: gray; } h2{ font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; } p { color: maroon; font: 80% arial, helvetica, sans-serif; } Shorthand Border h1, h2 { text-align: center; color: navy; } h1 { border: 1px solid gray; } h2{ font: italic small-caps bold 100%/120% arial, helvetica, sans-serif; } p { color: maroon; font: 80% arial, helvetica, sans-serif; }
Home