One page website with JS functionality

I am fairly new to web development, and would like some feedback. It is HTML/CSS, with some JS (button hovers, anchor scrolling and image sliders) from elsewhere. Comments on best practices and any other suggestions would be great as I feel I'm probably doing a lot wrong, but specifically:

-
I used different-colored containers that stretch the whole width of the page. Each container is inside a div which specifies the background color. Is this the best way to do it?

-
Is there an easy way for me to vertically-center my text blocks, instead of adding lots of linebreak tags?

-
A lot of my divs have multiple classes, e.g. "column last half image" and "centered larger highlight" - should this be avoided and if so what's the best way to go about this?

Link

HTML:

```

MVX Training | Welcome to the future of training











$(function() {
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 700, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
});
});










Welcome
Features
Case Studies
Development
Pricing
Get in Touch










WELCOME TO THE FUTURE OF TRAINING

MVX is an innov

CSS

Instead of having 5 different rules all saying the same thing for 5 selectors. You can group them like this.

h1.light,
h2.light,
.darkgrey a,
.darkestgrey a,
.button.light
 {
    color: #fff;
}

body,
.underline.light {
    background-color: #fff;
}

Use one line for margins.

h1 {
    margin-top: 20px 0;
}

h2 {
    margin: 0 0 20px 0;
}

.underline {
    margin: 20px auto 30px;
}

.button {
    margin: 20px auto 20px -160px;
}

.nextbutton {
    margin: 20px 0;
}

Use one line for paddings.

.container {
    padding: 30px 0;
}

.column.third {
    padding: 30px 0;
}

HTML

You should remove this from your head.

Most search engines do not use the meta keywords for their algorithm top rankings anymore. From what I've heard, having the meta keywords can only count against you for SEO (Search Engine Optimization). Because I believe that search engines will still penalize a site for having false and or repetitive keywords. Yes, your keywords are correct, but there is no point in including them on websites anymore. http://en.wikipedia.org/wiki/Meta_element#The_keywords_attribute

The description is still used and is very important because it will likely show up when searching for your site.
However, search engines may show something other than your description based on the users search keywords.
The description should be more detailed and longer than just "3D Interactive Training".

http://en.wikipedia.org/wiki/Meta_element#The_description_attribute

There's nothing evil about line breaks, so it's whatever you prefer to use.
The way you used them here is pretty unusual though.

                
                WELCOME TO THE FUTURE OF TRAINING

I'd probably change that to this:

                WELCOME TO THE FUTURE OF TRAINING

#welcome { margin: 40px 0 0 0; }   /* adjust accordingly */
.firsth1 { margin: 20px 0 0 0; }  /* adjust accordingly */

How you have them here looks fine.

You have quite a few lines like this too.

NEXT     

I would change it to something like this:

NEXT

.nextbutton {
    text-align: right;  /* this might not work */
    padding: 0 0 0 20px; /* then you could do something like this instead */  /* adjust accordingly */
}

Lastly, I think your use of classes is just fine. I also like how you used a limited number of id's, which can too often end up making your css many more characters than needed.

StackExchange Code Review Q#39859, answer score: 12