Join Sue Jenkins for an in-depth discussion in this video Utilizing master CSS files to speed up design, part of Productivity Tips for Web Designers.
- Hi there, I'm Sue Jenkins, and welcome to Productivity Tips for Web Designers. In this week's lesson, I'll show you how to save time during web development by creating and using a master CSS file. As master file is any time-saving file that you can use at the start of a project to jump start your development. A CSS master file is a file that contains all of your default CSS style information that you know you're going to use with every single project. It can contain things like styles for a body, heading one, heading two, p, header, footer, article, aside, links, lists, and so forth.
You can easily make your own master CSS file, or use an existing one provided by a third party, like Reset CSS by Eric Meyer, or Twitter Bootstrap by Twitter. Or, if you're starting your web project using a free or premium template, the master CSS file will already be provided to you with the template. Master files are extremely helpful and can be huge time savers by helping you eliminate redundant tasks from project to project. Not only that, but you can organize and comment your master CSS file to further streamline your workflow.
Then, use your master CSS file with every project you start from scratch for ultimate control. Remember though, if you're working with someone else's files, like a template or when someone else on your team develops the starter CSS, you may occasionally need to copy and paste a few styles here and there from your master into the site's pre-existing CSS. To make your own master CSS file, start by creating a fresh blank CSS file and save it as master.css, or some other file name that makes sense to you.
In Dreamweaver, you can do this by going to the File, New, menu, choosing CSS from the page type, and clicking Create. It's just the empty document, ready for you to use. Next, you may want to look at some of your completed web projects to see what code you tend to use regularly. You can then copy those styles right into your master CSS file. If you're starting from scratch, create the styles you think you'll use for every project. For instance, you may want to set the font size to 100 percent for the HTML tag if you're sizing your fonts with ems.
You may also want to zero out your margins and set the font size to one em for your body tag. Next would be to drop in font styles for headings and paragraphs. You could also add in list styles, link styles, and anything else you think would be useful. Here's an example of a simple master CSS file with comments to organize each section. When using third-party resources, like Twitter Bootstrap or CSS Reset, you'll start with that framework's master CSS file, which you can then customize as needed to match your design.
Bootstrap is a sleek, intuitive and powerful mobile first, front-end framework for faster and easier web development. Bootstrap includes styles for a grid system, typography, tables, forms, buttons, images, and so much more. You can download Bootstrap from their website at getboostrap.com. Reset CSS by Eric Meyer is also available for download along with a few other popular CSS Reset scripts, like HTML5 Doctor Reset CSS, at the cssreset.com website.
According to this site, a CSS reset, or what they call Reset CSS, is a short, often compressed or minified, set of CSS rules that resets the styling of all HTML elements to a consistent baseline. To get a copy of the code, just click any of the Get the Code buttons, and when the dialog box opens up, you can choose the minified version or the full version. I recommend the full version.
This website also contains really great information about how CSS reset files work and how to choose the best one for your particular needs. Whether you build a reset file from scratch or use a canned reset from a third party, CSS reset files are always a work in progress. But, as you develop new sites, you'll probably continue to discover new ways to improve and organize your master CSS file, which in turn can speed up your workflow and increase your productivity.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.