How to minify css and js

Im all about web design minimalism, keeping it simple and small allowing for quick load times. Minifying CSS helps this movement. A minified CSS & JS file is simply removing the line breaks and compressing the file up into almost unreadable fashion, saving you kb in file size.

Normal CSS:

h1, h2, h3, h4 {
    font-family: 'Fjalla One', sans-serif;
    font-weight: lighter;
    text-align: center;
    text-decoration: none ;
}

h1.heading {
    font-family: 'Kalam', cursive;
    font-size: 45px;
}

h2.heading {
    font-family: 'Kalam', cursive;
    font-size: 40px;
}

h4.heading {
    font-family: 'Kalam', cursive;
    font-size: 20px;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #ffffff url(https://domain/images/triangles.png) repeat 0 0;
    color: #4a4a4a;
    text-decoration: none;
}
a {
    text-decoration: none ;
    color grey;
}

Minified CSS:

a,h1,h2,h3,h4{text-decoration:none}h1,h2,h3,h4{font-family:'Fjalla One',sans-serif;font-weight:lighter;text-align:center}h1.heading,h2.heading,h4.heading{font-family:Kalam,cursive}h1.heading{font-size:45px}h2.heading{font-size:40px}h4.heading{font-size:20px}body{font-family:'Open Sans',sans-serif;background:url(https://domain/images/triangles.png) #fff;color:#4a4a4a;text-decoration:none}

Here you can see the minified file is squished up and whilst still editable it is hard. The same principle applies to javascript. To minify files Google CSS minfier or JS minifier there are plenty of websites.