How to create blogspot template css

See the following example:

<b:skin>   
<![CDATA[    

/*DATE*/   
div.date-outer h2 {    
    margin:10px;    
    font-size:13px;    
    background-color:#ffffff;    
}
/*MAIN POSTS*/   
div.date-outer div.date-posts div.post-outer {     
    margin-top:10px;    
    padding:0px;    
    border:solid 1px #b9b7a2;    
    border-top:solid 5px #b9b7a2;    
}    
div.date-outer div.date-posts div.post-outer div h3 {    
    background-color:#c4c1b2;    
    padding:10px;     
    padding-top:5px;    
    margin:0px;    
}    
div.date-outer div.date-posts div.post-outer div h3 a {    
    color:#ffffff;    
    text-decoration:none;    
}    
div.date-outer div.date-posts div.post-outer div h3 a:hover {    
    color:#fafafa;    
}    
div.date-outer div.date-posts div.post-outer div {    
    background-color:#fafafa;     
}    
div.date-outer div.date-posts div.post-outer div div.post-body {    
    padding:5px;    
}    
div.date-outer div.date-posts div.post-outer div div.post-header, div.post-outer div div.post-footer {    
    padding:0px;    
    padding-left:10px;    
    padding-right:10px;    
}
div.date-outer div.date-posts div.post-outer-alternate {    
    border:solid 1px #ffa904;    
    border-top:solid 5px #ffa904;    
}    
div.date-outer div.date-posts div.post-outer-alternate div h3 {    
    background-color:#ffd83b;    
}    
div.date-outer div.date-posts div.post-outer-alternate div {    
    background-color:#ffffff;     
}    
/*COMMENTS*/    
div.date-outer div.date-posts div.post-outer div.comments{    
    padding:10px;     
    padding-top:0;    
}
div.date-outer div.date-posts div.post-outer div h4 {   
    background-color:#ffffff;    
    border:solid 1px #b9b7a2;    
    padding:10px;     
    padding-top:10px;    
    padding-left:5px;    
    padding-right:5px;    
    margin:0px;    
    font-size:12px;    
}    
div.date-outer div.date-posts div.post-outer div div#Blog1_comments-block-wrapper {    
    padding:10px;     
}

/*WIDGETS*/    
div.sidebar div.widget {    
    margin-bottom:10px;    
    padding:0px;    
    border:solid 1px #aba281;    
    border-top:solid 5px #aba281;    
}    
div.sidebar div.widget h2 {    
    background-color:#b9b496;    
    padding:10px;     
    padding-top:5px;    
    margin:0px;    
    font-size:12px;    
    color:#ffffff;    
}    
div.sidebar div.widget div.widget-content {    
    padding:10px;    
    background-color:#fafbed;     
}
div.sidebar div.widget-alternate {   
    border:solid 1px #4d453a;    
    border-top:solid 5px #4d453a;    
}    
div.sidebar div.widget-alternate h2 {    
    background-color:#5b5147;    
}    
div.sidebar div.widget-alternate div.widget-content {    
    background-color:#8d8777;     
}    
div.sidebar div.widget-alternate div.widget-content a {    
    color:#ffffff;     
    text-decoration:none;    
}    
div.sidebar div.widget-alternate div.widget-content a:hover {    
    color:#fafafa;     
    text-decoration:underline;    
}    
div.sidebar div.widget-alternate div.widget-content ul {    
    color:#ffffff;     
}
/*PROFILE IMAGE*/   
img.profile-img {    
    border:solid 5px #ffffff;    
    margin:10px;    
}    
/*POST IMGs*/    
.profile-datablock {    
    color:#ffffff;     
    text-transform:capitalize;    
}    
.profile-name-link, .profile-link {    
    font-weight:bold;    
}    
.title a {    
    color:#262626;    
    text-decoration:none;    
}
.text-counter-wrapper {   
    color:#ffffff;     
}
/*FOCUS OUTLINE*/   
* {    
    outline: none;    
    outline-width: 0;    
} 
button::-moz-focus-inner,    
input[type="reset"]::-moz-focus-inner,    
input[type="button"]::-moz-focus-inner,    
input[type="submit"]::-moz-focus-inner,    
input[type="file"] > input[type="button"]::-moz-focus-inner {    
    border: none;    
} 
/*remove outline from clicked links*/   
*|*:-moz-any-link:focus{outline-width:0!important}    
/*remove outline inputs*/    
input:focus::-moz-focus-inner{border-color:transparent!important}    
]]>    
</b:skin>