Monday, 24. August 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. If one padding value is specified, it applies to all sides of an element:
p {padding:5px}
If two values are specified, the top and bottom margins are set to the first value and the right margins are set to the second:
p {padding: 5px 0}
If three values are specified, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third:
p {padding: 10px 0 20px}
If four values are specified, they apply to the top, right, bottom, and left:
p {padding 5px 0px 7px 15px}
Posted in CSS Block Quote by frenchsquared -
Sunday, 23. August 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);
}
Posted in CSS Adding Background Images by frenchsquared -
Wednesday, 19. August 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. If one margin value is specified, it is applied to all sides of an element:
p { margin: 5px;}
If two values are specified, the top and bottom margins are set to the first value and the right and left margins are set to the second.
p { margin: 5px 10px;}
If three values are specified, the top is set to the first value, the left and right ar set to the second, and the botton is set to the third.
p { margin: 5px 10px 3px;}
If four values are specified, they apply to the top, right, bottom, and left.
p { margin: 5px 6px 7px 8px;}
It should be noted that you can use negative values for the margin. This can cause the element to overlap another element.
Posted in CSS Box Model by frenchsquared -
Saturday, 15. August 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.
However, this method does not applie to IE 5 or 6, but who really cares. Anyone using IE 6 needs to upgrade.
Posted in CSS Box Model by frenchsquared -
Tuesday, 11. August 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.
There are cases where header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website. Rather than add this rule to an overall CSS file, a header style may be used.
The type=”text/css” attribute must be specified within the style element in order for browsers to recognize the file type.
<title>CSS Tutorial</title>
<style type=”test/css” media=”screen”>
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
width: 10em;
}
</style>
</head>
Posted in CSS Applying Styles by frenchsquared -
Tuesday, 4. August 2009
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.
These divisions of content can then be styled to suit your needs using descendant selectors.
Posted in Understanding CSS by frenchsquared -
Sunday, 2. August 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. The padding property can combine padding-top, padding-right, padding-bottom, and padding-left.
The margin and padding properties also can be used to style different values for each side of an element. Values are applied in the follow order: top, right, bottom, and left – clockwise starting at the top.
The <p> element can be styled with padding-top, padding-right, padding-bottom, and padding-left or with a single padding property.
CSS Longhand
p {
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
CSS ShortHand
p {
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding: 1em 2em 3em 4em;
}
Posted in Understanding CSS by frenchsquared -
Saturday, 1. August 2009
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;
}
Posted in Understanding CSS by frenchsquared -
