Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Useful Short Hand and CSS Rule Set

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 460
    Comment on it

    Hello readers,

    Below is some useful example of css rule set and css shorthand. By using css shorthand you can save your time.

    CSS rule set-

    Rule set for font declaration:-
    body {font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;}
    body {font: font-style font-variant font-weight font-size/line-height font-family;}
    
    Rule set for pseudo :-
    .container p:first-child::first-letter{ color: Green; }
    .Selector:Pseudo-Class::Pseudo-Element { Declaration; }
    
    Rule set for animation :-
    .div{ animation: myfirst 5s linear 2s infinite alternate running;}
    selector{ animation-name| animation-duration| animation-timing-function| animation-delay | animation-iteration-count|animation-direction|animation-play-state; } 
    
    Rule set for keyframes :-
    @keyframes myfirst {
        from {background: red;}
        to {background: yellow;}
    }
    
    @keyframes animation-name {
        form{ First change point}
        to{ Last change point}
    }
    
    Rule set for box-shadow :-
    div{ box-shadow:inset 10px 10px 5px 2px #888888;}
    div{ box-shadow: right -left offset, top - bottom offset, blur radius, shadow size, color}
    

    Note: inset use for inner shadow.

    CSS ShortHand-

    Shorthand for animation :-
    div {   
        animation-name: myfirst;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
    } 
    
    div {animation: myfirst 5s linear 2s infinite alternate running;}
    
    Shorthand for Background :-
    div {
        background-color: #CCCCCC;
        background-image: url(images/bg.gif);
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: top left;
    }
    
     div{ background:url(images/bg.gif) #ccc no-repeat top left scroll;}
    
    Shorthand for margin or padding :-
    div{
        margin-top: 1px;
        margin-right: 2px;
        margin-bottom: 3px;
        margin-left: 2px;
        }
    
     div{margin:1px 2px 3px 4px}
    

    Note: If margin:1px 2px 3px 4px (Its for top right bottom left)
    margin:1px 2px 3px (Its for top right-left bottom )
    margin:1px 2px (Its for top-bottom right-left)

    Shorthand for font declaration :-
    body {
         font-style: italic;
         font-variant: small-caps;
         font-weight: normal;
         font-size: 13px;
         line-height: 150%;
         font-family:Arial, Helvetica, sans-serif;
    }
    
    body {font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;}
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: