Like this theme? Would you like a similar one for your Wordpress Blog?
Wednesday, 5. August 2009
Should you use id or class? Classes can be used as many times as needed within a document. IDs can only be applied once within a document. If you need to use the same selector more then once, classes are a better choice.
However, IDs have more weight then classes. If a class selector and ID selector apply the same property to one element, the ID selector’s value would be chosen.
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.
Sunday, 2. August 2009
The background property combines background-color, background-image, background-repeat, background-attachment, and background-position.
border: 1px solid gray;
background: yellow url(tint.jpg) repeat-y 100% 0;
}
The list -style property combines list-style-types, list-style-postition, and list-style-image.
list-style: square inside;
}
Padding and Margins: Top, Right, Bottom and Left
padding: 1em 2em 3em 4em;
margin: 5px 4px 3px 1px;
}
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.
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
color: maroon;
font: 80% arial, helvetica, sans-serif;
padding: 1em 2em 3em 4em;
}
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.
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;
}
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;
}
Saturday, 1. August 2009
Shorthand Properties allow the values of several properties to be specified within a single property. Shorthand properties are easier to write and maintain. They also make CSS file smaller and faster to load.
For example, the h2 element can be styled with font-style, font variant, font-weight, font-size, line-height, and font-family or with a single font property. see below:
}
}
Most shorthand properties do not require the values to be placed in a set order. However, when using the font property, it is safer to set values in the order specified by the W3C, which is font-style, font-variant, font-weight, font-size, line-height, and font family.
When font-size and line-height are used within the font property, they must be specified with font-size first, followed by a forward slash(/), followed by line-height.
Values for the short hand font property include font-style, font-variant, font-weight, font-size, line-height, and font-family. However, all of these values do not need to be included in a shorthand declaration. Foe example, for the <p> element, you might want to only specify values for font-size and font-family
}
In this case , font-style, font-variant, font-weight, and line-height are not included in the shorthand property, so they will be assigned their default values.
Friday, 31. July 2009
Adding CSS Comments – CSS Comments can be added to CSS to explain your code. Like HTML Comments, CSS Comments will be ignored by the browser. A CSS Comment begines with /* and ends with */. Comments can appear before or within rule sets as well as across multiple lines. They also can be used to comment out entire rules or individual declarations.
Friday, 31. July 2009
When several selectors share the same declarations, they may be grouped together to prevent the need to write the same rule more then once. Each selector must be separated with a comma.
In the above code The h1 and h2 elements share two declaration, so parts of the two rule sets can be combined to be more efficient.
Friday, 31. July 2009
More than one declaration can be used within a declaration block. Each declaration must be separated with a semicolon.
In this CSS, How To Tutorial the h1 and h2 elements will be styled with a new declaration. {color: navy;} The h2 element will also be styled with {text-align: center;} which will align it in the center of the browser window.
Friday, 31. July 2009