Css Tag Name
Style Rules
Usage
Psuedo selectors
:first-child
p:first-child {color: lime;}
represents the first element
among a group of sibling elements.
:nth-child
li:nth-child(2) {
color: lime;
}
matches the 2nd element(child of ul tag)
-- li color changed to lime.
:checked
input:checked {
height: 50px;
width: 50px;
}
represents any radio, checkbox ,
or option element in checked state.
:target
input:checked {
height: 50px;
width: 50px;
}
represents any radio, checkbox ,
or option element in checked state.
Css Combinators
direct child selector
{article > p}
This rule will change any element
which is a direct child of the body element.
General Sibling
{h3 ~ p}
allows sibling elements to be selected
which share the same common parent.
Adjacent Sibling
{h3 + p }
allows sibling elements to be selected
which share the same common parent.
Css Transitions
transition
transition-duration: 500ms;transition-delay: 1s;transition-timing-function: linear;
CSS transitions allows you to change property values smoothly, over a given duration.
transition-delay
transition-duration:transition-delay: 1s;transition-timing-function: linear;
specifies a delay (in seconds) for the transition effect.
transition-timing-function
div {transition-timing-function: linear; }
property specifies the speed curve of the transition effect.
Choices are easein, ease-out, linear , and cubice-bezier.
Css Transforms
transform: choices are rotate, scale and skew
{transform: rotate(20deg);{transform: scale(0.7);}transform: skew(15deg, 15deg);
Transforms can scale, rotate, skew html elements.
Css Animations
animation-name:
animation-name: clockwork;{animation-duration: 4s;}
Name of the animation
animation-duration
animation-name: clockwork;{animation-duration: 4s;}
length of animation.
animation-iteration-count:
animation-iteration-count: 3;
Determines x times animation runs.Another choice is infinite.
animation-direction
div {
height: 100px;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
Determines direction of animation. Choice are:forward, backward, and alternate.
transition-timing-function
div {transition-timing-function: linear; }
property specifies the speed curve of the transition effect.
Choices are easein, ease-out, linear , and cubice-bezier.
Keyframes
Keyframes
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
the animation will gradually change from the current
style to the new style at certain times.