Free CSS templates can save hours of work on a new website. You download a folder, open the HTML file and you already have a layout, colours and fonts in place. That speed is the whole appeal. Before a template goes live with your content, though, it pays to give it a proper check.
A few simple checks can catch licence problems, broken code and hidden extras. None of them need special software or paid tools. This guide walks through what to look at, in a sensible order. It suits anyone building a small site, from a hobby blog to a local business page.
Start with the licence
Free to download does not always mean free to use any way you like. Every template should come with a licence file or a note on the download page. Read it before you change a single line. The licence spells out if you can use the template on a client site, sell it on or remove the credit link.
Many free templates are released under a Creative Commons licence. The Creative Commons Attribution 3.0 licence says you can share and adapt the material for any purpose, even commercially. In return, you must give appropriate credit and provide a link to the licence. If you create a changed version, you must also indicate that changes were made.
That credit is often a small link in the footer back to the designer. Removing it can break the licence terms, even if the rest of your site is fine. Some designers offer a paid option to remove the credit, so check the download page for that. If the licence is missing or unclear, it is safer to pick a different template.
Check the extras that came with it
A template folder can also include photos, icons and fonts. These may carry their own licences that differ from the one covering the code. The Creative Commons deed itself warns that the licence may not give you every permission you need. Other rights such as privacy or moral rights can still limit how material is used.
Look at the files and structure
Open the folder and see how it is laid out. A tidy template usually has one or more HTML files, a CSS folder, an images folder and perhaps a JavaScript folder. If you are new to this, our guide to what CSS templates are explains how these parts fit together. A messy folder full of unused files suggests the template has not been looked after.
Next, open the main CSS file in a text editor. Look for clear comments that label each section, such as the header, menu and footer. Good comments make it far easier to change colours and spacing later. A single huge file with no structure will slow you down every time you edit it.
Validate the HTML and CSS
The W3C, the body that publishes web standards, offers free checking tools for both HTML and CSS. The W3C Markup Validation Service checks whether a web document follows the rules of its markup language. W3C says validation can dramatically help improve quality. It adds that validation can save a lot of time and money.
W3C is also clear about the limits. It says validation is neither a full quality check nor strictly the same as checking for conformance to the specification. So a clean result is a good sign, not a guarantee. A page can pass and still look poor or be hard to use.
The W3C CSS Validation Service does a similar job for style sheets. W3C describes it as free software that helps designers and developers check their CSS. It compares a style sheet against the CSS specifications to find errors, typos and incorrect uses of CSS. It also flags CSS that poses some risk to usability.
Do not panic if a free template shows a few warnings. The CSS checker tests against CSS 2.1 by default, and other CSS profiles can be chosen in its options. Newer code may be flagged under an older profile even though it works. What you are really looking for is a long list of genuine errors.
Check for scripts, fonts and links you did not expect
Free templates sometimes load files from other websites. Common examples are web fonts, icon sets, analytics code and JavaScript libraries. Search the HTML for any script or link tag that points to an outside address. Each one is something your site will rely on, so you should understand it before going live.
Outside files are not bad in themselves. What matters is knowing what each one does and if you really need it. Remove anything you cannot identify or do not use. Our article on website security measures covers other steps worth taking once the site is running.
Also look for hidden links. Now and then a template includes links to unrelated sites tucked into the footer or styled so they do not show. These have nothing to do with your site and can reflect badly on it. If the licence does not require them, take them out.
Test it on different screens and browsers
A template that looks great on a big monitor may fall apart on a phone. Open the demo on your own phone and tablet as well as a laptop. Drag the browser window narrower and watch how the layout responds. Menus, images and columns should rearrange themselves without forcing you to scroll sideways.
Try more than one browser too. Chrome, Firefox, Safari and Edge can each display the same CSS a little differently. Click every button, open every menu and fill in any sample forms. Small faults are much easier to fix now than after you have added your own content.
Think about how much you will change
Be honest about how far the design is from what you need. Changing colours, fonts and images is quick work in a well built template. Rebuilding the whole layout is not, and at that point a different template may suit better. Our tips on how to use CSS templates cover the practical side of adapting one to your own project.
It also helps to weigh up the advantages of CSS templates against starting from scratch. A good template gives you tested layouts and saves design time. A poor one can cost more time than it saves. The checks above help you tell the two apart before you commit.
Frequently asked questions
Can I use a free CSS template on a business website?
Often yes, but it depends on the licence. A Creative Commons Attribution licence allows commercial use as long as you give credit and link to the licence. Other licences may not allow it. Always read the terms that come with the download.
Is it all right to remove the footer credit link?
Only if the licence allows it. Under an attribution licence the credit is part of the deal. Some designers sell a version without the credit, which is the proper way to remove it. If in doubt, leave the credit in place.
Does passing validation mean a template is good?
Not on its own. W3C says validation is not a full quality check. A template can pass and still be slow, hard to read or poor on phones. Use validation as one check among several.
Do I need to know how to code to check a template?
Not much. Reading a licence, testing on your phone and running a free validator need no coding at all. Looking through the HTML for outside scripts takes a little more confidence. A basic understanding of HTML and CSS will make every step easier.