css3,div+css,css templates,web design,xhtml,html
CSS pseudo-elements are used to add special effects to some selectors.
Syntax
The syntax of pseudo-elements:
selector:pseudo-element {property:value;}
CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property:value;}
Continue reading ‘CSS Pseudo-elements’ »
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements:
For aligning text, see the CSS Text chapter.
In this chapter we will show you how to horizontally align block elements for layout purposes.
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left: Continue reading ‘Elements Float’ »
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.
Continue reading ‘CSS Positioning: Relative Absolute’ »
Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
Example:
h1.hidden {visibility:hidden;} Continue reading ‘CSS Display and Visibility’ »
In style sheets there are often elements with the same style.
h1{color:green;}
h2{color:green;}
p{color:green;}
To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
h1,h2,p{color:green;} Continue reading ‘Grouping Selectors’ »
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. Continue reading ‘CSS Padding Properties’ »
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. Continue reading ‘The CSS margin properties define the space around elements.’ »
The number in the “CSS” column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Property | Description | Values | CSS |
|---|---|---|---|
| outline | Sets all the outline properties in one declaration | outline-color outline-style outline-width inherit |
2 |
| outline-color | Sets the color of an outline | color_name hex_number rgb_number invert inherit |
2 |
| outline-style | Sets the style of an outline | none dotted dashed solid double groove ridge inset outset inherit |
2 |
| outline-width | Sets the width of an outline | thin medium thick length inherit |
2 |
IE6 is not very standards compilent. IE7 is better, but still isn’t as compliant as Firefox. Also, you should note that you need to design sites that are also compatible with Safari. This won’t be an issue as Safari is now on the PC side, and as far as I can tell (I use both Windows and Mac OS X), it’s not much different.
Continue reading ‘Diffirence IE6,IE7,FireFox’ »
