home
CSS Introduction and Official Inauguration

Css3 Index

My Agenda is to explain all about new futures and methods of css3. we have written good stuff for the beginners and for experts

CSS = Cascading Style Sheets Css3 is latest and advanced version published on June 2012, there are over fifty CSS modules published from the CSS Working Group, and four of these have been published as formal recommendations.

Check the following below list of css3 futures.



Css Properties

Here all css properties and example code with definition check the below table.
Some properties have not support in css3.

Property Name
Simple Example code
Description
Animation
animation:mymove 5s infinite;
Use to animate the object
background-color
background-image
background-repeat
background-attachment
background-position
body{background-color:#6495ed;}
body{background-image:url("1.gif");}
body{background-repeat:repeat-x;}
background-position:right top;
(or)body{background:#ffffff url("img.png")
no-repeat right top;}
CSS background properties are used to define the background effects and position of an elements.

*Here in the example used only body element applying different background properties.
border
border-style:solid;
border-width:5px;
border-color:#98bf21;
The CSS border properties is use to specify the style and color and strength of border.
Caption-side
border-style:solid;
border-width:5px;
border-color:#98bf21;
Its specify the placement of the article caption
Clear
.div{clear:both;}
No floating elements allowed on the left or the right side of a specified div:
Column
.newspaper{
columns:100px 3;
-webkit-columns:50px 3;
/* Safari and Chrome */
-moz-columns:50px 3; /* Firefox */
}
Specify the width and number of columns
Content
a:after{
content: " (" attr(href) ")";
}
The following example inserts the URL in parenthesis after each link:
Counter
h1{counter-reset:subsection;}
h1:before{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before{
counter-increment:subsection;
content:counter(section) "."
counter(subsection) " ";}
A way to number sections and sub-sections with "Section 1", "1.1", "1.2", etc.:
Cursor
button. {cursor:crosshair}
button. {cursor:help}
button. {cursor:wait}
There are many different type of cursors are there
Display
div{display:inline}
Default value is inline, there are many values like block, flex, inline-block, inline-flex, inline-table, list-item, none, initial, inherit and more.
Direction
div{direction:rtl;}
Set the text direction to "right-to-left" of the object.
Fonts
p{font:arial 12px #ff0000;}
Define the font size and color of the font
Font-face
@font-face{
font-family: arial;
src: url(sansation_light.woff);}
Specify the font name with using URL where it can be found.
Color
p {color:red;}
Set the color of text
Float
div{float:right:}
float element is use not allow any element left and right side of the div
Height
div{height:150px;}
Set the height (150px) of div element.
Width
div{width:50px;}
Set the width (50px) of div element.
Letter Spacing
p{letter-spacing:2px;}
Set the letter space for paragraphs (p).
Line-Height
p{ling-height:20px;}
Its specify the light height for text
List tags
li{list-style:none;}
ul{list-style-type: circle;}
ol{list-style-type: lower-alpha;}
CSS list properties allow you to organise list in ordered lists, and unordered lists.
Margins
div{margin:20px;}
Set the margin 20px for div
Paddings
div{padding:20px;}
Set the padding 20px for div
Min-Height, Max-Height
div{min-height:250px;
min-height:250px;}
Set the min and max height for the div object
Min-Width, Max-Width
div{min-width:250px;
min-width:250px;}
Set the min and max width for the div object
Text-align
p {text-align:center;}
Use to set the text align
Style
<div style="font-size:16px;">div tag</div>
style property is use to write inline css in html.
Outline
p {outline:green dotted thick;}
Set the line(outline) around the element
Overflow
div{
width:150px;
height:150px;
overflow:scroll;}
overflow: visible|hidden|scroll|
auto|initial|inherit;
overflow used to scroll element and hide, visible the object.
Position
.artile{
position:fixed;
top:100px;
right:150px;}
Decide the element positions and overlap the element behind another.
Links
a:link {color:#F00;}/*unvisited link */
a:visited {color:#0F0;}/*visited link */
a:hover {color:#F0F;}/*mouse over link */
a:active {color:#00F;} /*selected link */
Use to make attractive Links different ways like hove, visited, active.
Verticale Align
 p{vertical-align:top;}
Set the align vertically
Z-index
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;}
To specify the image in order