Link HTML pages to CSS stylesheets. This goes in the head of the document.
<link href="style.css" type="text/css" rel="stylesheet">
Meta tags for viewport that allows certain devices read media queries. Read this post about viewport codes.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Set up some sort of container element. This will make the math easy later on.
It's a good idea to keep anything "left", "right", or width related in percents (except max-widths). Use pixels or ems for anything "top", "bottom", or height-related. All width is in percentages, except max-widths (in some cases).
If you stick with the "mobile first approach", all media queries start from smallest to largest (the mobile-first approach), starting with a @media and closing with a } that doesn't belong to another element. You also begin with a global CSS that does not need to be in a media query.
Check out Bourbon's responsive friendly grid called Bourbon Neat.
List two or more fall-back typefaces.
font-family: "Adobe Caslon Pro", Georgia, serif;
Typography in pixels is fine, but it can stop the end user from zooming in text using the 'font-size' settings on most browsers (which is different from page zoom which zooms in everything on the page). The website, PXtoEM, is helpful for conversions from pixels to ems, which allow users to zoom in or out just by changing font-size settings. By default, 16px is equivalent to 1em. For calculator-free conversions, add the following to body, which makes 10pixels the same as 1em (yay, less math and TI-83 calculators!):