subhoworld.wordpress.com
h1(color:blue;text-align:center;)
h1-> Selector
color-> Property
blue-> Value
colour:blue;-> Declaration
<p style="color:red;">hello!! this is inline css</p>
<head>
<style>
h1{color:green;}
p{margin-left:20px;}
body{background-color:lightblue");}
</style>
</head>
<body>
<h1>Mozilla Webmaker</h1>
<p>i am attending the CSS Workshop"</p>
</body>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Mozilla Webmaker</h1>
<p>I am attending the CSS Workshop<p>
</body>
h1{color:green;}
p{margin-left:20px;}
body{background-color:lightblue");}
background properties:
background-color : (value in hex, rgb, name)
background-image : url(image_url)
background-attachment: fixed | scroll;
background-size: (x y px)
background-repeat: repeat | repeat-x | repeat-y | no-repeat)
background-origin: border-box | padding-box | content-box ;
background-clip: border-box | padding-box | content-box ;
background-position: left top | left center | left bottom
right top | right center | left bottom
center top | center center | center bottom
body{background-color:lightblue;
background-image: url("http://i1285.photobucket.com/albums/a581/scriptcon2013/subhendu/background-image_zpsd9b69169.jpg")
background-repeat:no-repeat;
background-position:right top;
color: (value in rgb,hex, name)
text-align: right | center | left | justify
text-decoration: overline | line-through | underline | none
text-transform: uppercase | lowercase | capitalize
text-indent: value px
line-height : value px
letter-spacing: value px
word-spacing: value px
text-shadow: (x y px color)
white-space: nowrap | wrap
h1{colour:#191970;
text-align:center;
text-decoration:underline;
text-transform:capitalize;}
p{text-indent:40px;}
font-family: value main, default 1 , dafault 2 ;
font-style: normal | italic ;
font-size: value in px or % or em;
font-weight: normal | bold | bolder | ligheter | value ;
font-varient: small-caps | normal ;
Defining your own font:
@font-face{font-family: name; src=url(font_url)}
h1{font-family: Times New Roman, serif;
font-size:25px; /* 2em */
font-weight:bold;}
p{font-family: courier, serif;
font-style:italic;}
list-style-type: circle | square | upper alpha | upper roman | lower roman | lower-alpha
list-style-image: url(image_url)
ul.s{list-style-type: circle;}
list
margin: value in px
padding: value in px
border: value in px
td{padding:5px;}
border: value px;
border-collapse: collapse;
height: value px;
width: value px;
vertical-align: top | middle | bottom ;
padding: value in px;
border-style: solid | double | dashed | dotted | groove | ridge | inset | outset
table, td, th {border:1px;
border-style:solid;
border-color:green;}
th{background-color:green;
color:white;}
#hide{visibility:hidden;}
ul>li{display:inline;
position:relative;
float:right;}
opacity: value
filter:alpha(opacity=100)
border: value px
box-shadow: value px
height: value px
width: value px
img {opacity:0.5;filter:alpha(0.5);
border:2px solid blue;}
transform: rotate(value) | scale(value,value) | skew(value,value) | ;
-ms-transform: rotate(value); /* IE 9 */
-webkit-transform: rotate(value); /*safari ,chrome*/
3D Transform ::
transform: rotateX(value) | rotateY(value)
div.trans{height:100px; width:100px;
transform: rotate(45deg); -ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
:link
:hover
:focus
:visited
:first-line
:first-child
:first-letter
div { width:100px; height:100px; background:white; transition:width 2s, height 2s; -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */ -webkit-transform:rotate(45deg); } div.trans:hover
{ width:200px;
height:200px; transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari */ }
div
{width:100px;
height:100px;
background:red;
animation:anim 5s;
-webkit-animation: anim 5s; /* Safari and Chrome */}
@keyframes anim
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes anim /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@Subhorokz
IRC Nick: subho
email: subho.prp@gmail.com
blog: subho.wordpress.com
foss contributor: mozilla