0161 941 5330

Responsive web design – where should I put the CSS?


Cascading Style Sheets, or CSS, were a huge step forward in web design, enabling site designers to separate the content of a web page from its formatting and structure for the first time.

They are a way to create a consistent visual style across an entire site – using styles and classes to format elements in the same way as one another, or simply adjusting the appearance of all bullet point lists, or all hyperlinks, or all of any other page element.

Now CSS is crucial in enabling responsive web design, in which the layout of a page adjusts to suit a smaller screen resolution – one of the fundamental features of mobile web access.

But where does the CSS go? It’s a question that has been asked since CSS was first created, with the option to use in-line styles, to define classes within the header of your page, or to refer to an external CSS file.

The answer depends largely on context, and while in-line CSS styles are generally frowned upon, they can still be useful on occasion.

Including your CSS in your page header could be problematic for old-fashioned HTML websites, where it would need to be duplicated page after page, and here an external CSS file would allow the same classes to be applied across an entire site.

But these days, many websites are built using content management systems like WordPress – and these typically give you a very clear indication of where the CSS should be stored.

Depending on your CMS, it may be better to include your CSS in the header of your page template (particularly if you have several sections to your site with very distinct visual themes, each with their own template).

Or it may be easy to directly edit a standalone CSS file within your CMS, and refer to this from each individual page template.

Ultimately, you can leave this decision largely to your web designer – all it should mean to most people is that, when you resize your browser, your website adjusts so everything is still displayed effectively.

This is good for your audience, and for your search rankings too, with Google now prioritising mobile-friendly sites – so if your website hasn’t been redesigned in recent years, it’s worth checking whether your CSS is responsive or not.