How to Css: Working with Padding

February 3rd, 2010

Padding can be applied to the outside edges of the content are 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: 0px;} h3{padding-left: 0px;} h4{padding-bottom: 0px;} Padding can also be applied using a single shorthand property Read More...

CSS, How to work with content areas.

October 3rd, 2009

The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents. p { width: 100pt ;} p { width: 20pc;} p { width: 300px;} p { width: 40em;} p { width: 50ex;} p { width: 600mm;} p { width: 8in;} p { width: 50%;} The color property can be used to style the text color Read More...

CSS, How to properly use Border Styles.

August 26th, 2009

The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border. p {border-top: 1px solid red} p {border-right: 2px solid blue} p {border-bottom: 1px solid red} p {border-top: 2px solid black} h1 {border: 1px solid black}

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 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 understand inline and block level elements.

August 14th, 2009

Block level  elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs and block quotes. Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after Read More...

CSS, How to Hide Styles from Older Browsers?

August 12th, 2009

Some older browsers, such as Netscape Navigator 4 and IE 4, have poor support for CSS. It is possible to hide styles from these browsers using specific media types and @import rules. All styles will be hidden from Netscape Navigator 4 by changing the link element's media type from screen to screen, projection Read More...

CSS, How to use External Style Sheets!

August 11th, 2009

The third method of applying styles to  document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages. To change the header style to an external style, move the rule set to a new CSS file Read More...

CSS, How to Use Header Styles

August 11th, 2009

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

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