A question commonly asked especially by newbie web developers is this: “should I embed the CSS in HTML or not?” Unfortunately, like most web development questions, this one doesn’t have a simple YES or NO answer.
The correct answer is “it depends.” There are times when it makes sense to embed CSS in HTML. There are times when it doesn’t. We shall consider all the options in a while. However, let’s begin by defining what embedding.
Embedding CSS is basically inserting the CSS styles within the <head> section of a webpage. The styles are included within the opening and closing <style> tags. Here is an example of an embedded CSS (aka an embedded stylesheet):
Embedding is just one the ways of including CSS on a webpage. The ways others are through adding inline styles, linking external stylesheets and importing external stylesheets. For now, let’s ignore importing and briefly define the other two.
Inline styles add the CSS styling directly into the HTML tag of a page element. It uses the element’s style attribute. For instance
<p style=” font-family: Arial; color:red;” > My short paragraph </p>
Linking attaches an external stylesheet (typically a .css file) to a webpage. It is done by using adding the <link> tag with a rel of stylesheet within the <head> tag. For example:
<link rel=”stylesheet” href=”stles.css”>
When considering whether to Embed CSS in HTML or not, it is important to consider it in comparison with the two options. That is the approach we will take. So, let’s now consider when embedding CSS makes sense, and when it doesn’t.
When You Should Embed
Embedding CSS has one advantage. It enables you to define styles which apply to all elements within a specific webpage. For instance, to style all paragraphs within a page, you simply style the <p> tag within an embedded stylesheet.
This makes it more advantageous than using inline styles. With inline styles, to style all paragraphs within the page, you have to add CSS to each <p> tag. This is not only exhausting, it makes maintaining the webpage extremely difficult.
So, when should you embed CSS? Well, you should embed it when you have styles which apply to a specific webpage only. There two possible scenarios for this:
First, if you are creating only one webpage.
Second, if you want the webpage to look unique from other webpages on the website. For instance, let’s imagine all the <h1> tags within your website look the same. If you want the <h1> tag within your home page to look slightly different from the rest, then it makes sense to include an embedded CSS within the homepage.
When You Should Not Embed
Embedding is disadvantageous for styles which apply to different webpages. It has two distinct disadvantages. First of all, it makes building and maintaining a website boring and stressful.
Let’s imagine you want all the headers and footers in your website to look uniform. Using embedded stylesheets makes no sense at all. It means you have to copy and paste the CSS code to every page. This is repetitive and boring. Also, if you want to change one thing, you have to edit all the pages. This is stressful.
Secondly, embedding CSS can lead to bloated webpages. Remember, every line on a webpage adds a few bytes to the overall size of the webpage. Wepages which contain embedded stylesheets can become bloated and therefore load slowly. This makes them a little less user-friendly.
The cure for such bloating is through linking. Use the HTML link tag to link to the single optimized CSS file. Pages with linked stylesheets tend to be lighter and load faster. This is because of something called caching. Stylesheets which are shared by numerous pages are often stored on the browser (cached). This means that they are loaded from the server only once. As such, subsequent pages which use the stylesheet load much faster (certainly faster than pages with embedded styles).
So, when shouldn’t you embed CSS? Well, when you want to create CSS styles which will be used in numerous pages within a website. In such a case, the best way is to create an external stylesheet, and link it to each of the pages.
Secondly, you shouldn’t embed CSS in HTML if you want to create faster-loading webpages. This is because embedding leads to slow-loading webpages. To create faster-loading webpages, use external stylesheets.
In a nutshell, those are the basics of when to embed the CSS in HTML or not. Hopefully, this clarifies the confusion. However, in case you prefer a straightforward answer, then it is NO – don’t embed the CSS in HTML.
The reason for this is simple: even when creating styles which are specific to a webpage, you can safely use external stylesheets. All you have to do22 is create unique ID or class names to identify the elements within a specific page. As such, if you are to err, then it is better to err on the side of not embedding CSS in HTML.