CSS or cascading style sheets are an important part of most websites. Having a CSS file has many advantages in the development and maintenance of the website. Some of the prominent advantages are:

Decoupling: Having a different file for CSS allows you to decouple the content of the website from the styling and layout of the site. This helps with maintenance of the website in the long run and allows you to change the layout or the content without disrupting the other.

Reuse or Sharing: Most of the time, the look and feel of the various pages of the website tend to be similar if not the same. Having the CSS styles decoupled from the content allows for the styles to be shared easily between pages.

Complexity: It reduces the complexity and redundancy of the style code. This allows you to update the style and layout of multiple pages by just changing the single CSS file.

The CSS files should contain only the markup language that defines the presentation of the content and layout. These files are then included with every page in the website using the link tag in the HTML head tag. Although this is the most often used and easiest of the methods to maintain your CSS files, there are several other places in the code that this presentation semantics can be defined and included.

CSS Files: This is the same technique as mentioned above. You have all your styles in a few or in a small number of CSS files, each or some of which are included in the web pages as appropriate.

Style Tags in HTML Pages: It is not necessary that you have a different file for styles. You can define the styles right in the HTML file as needed by using the style tags. You can define these style tags pretty much anywhere in the HTML code. Sometimes it is advisable to use these tags sparingly if you want to override some default styles locally within the scope of the page.

Style Attribute of the Tags: Almost all HTML tags have an attribute named style. You can define styles in this attribute and it is localized within the tag. This is a good place to define styles if you need to override a style from the parent or from the included CSS file itself.
You can see that having the css code in different places have different advantages and disadvantages. Depending on the requirements of your website, you can choose one or a combination of these methods to define the styles.

When you have one or more CSS files, the client or the web browser have to make yet another request to get the linked file which adds to the latency of the total rendering time of the webpage. So, for the SEO purposes you will need to make the best decision so as to make the webpage rendering the fastest. This essentially comes down to a decision between the size, reuse and request latency.

There is really no one simple rule to follow when it comes to deciding whether and when to inline CSS. But, having said that you can follow certain rules based on your website and requirement to achieve the best possible SEO for your pages.

Let see some the use cases where using one or more separate CSS file might be a better option than inlining the styles. These mostly depend on the usage of the styles as well as the traffic patterns on your site.

Usage: If your site has a lot of pages, and your styles are pretty consistent across most of these pages, then you should maintain separate CSS files. In most cases, this also means that you have a good amount CSS to style the large number of files.

High PPV Sites: If your site has a high PPV (pages per visit), then it is advantageous to have separate files for styles. The CSS files needs to be downloaded only once and then can be cached by the browser to be reused across pages that will be rendered later.

Now, let us also look into some scenarios where inlining the CSS is a better choice.

Size: If you happen to have only a small amount of styles that it does not add much to the download of the page time, then it is best to inline the code. This will save on another request being made to the server in order to download a small amount of data.

Usage: When your style is used only on one page and is not shared with other pages, then it is best to include it in the HTML code.
If and when you do want to in-line CSS, you have a couple of options to do this manually.

Using Style Tags

You can copy the markup code within the head or anywhere in the body within the style tags. Use style tags as shown below, anywhere with the HTML tags, such as the head or the body tag.

<style>
.myredtag {
 color: red;
}
.greenback {
 background: green;
}
</style>

Using Style Attributes

You can use the style attribute of the HTML tags to define your styles as, when and where it is used. This is probably the least preferred method, as there is virtually no reuse of the code.

<p id="para1" style="margin: 0.3em 0.5em;">This is a paragraph.</p>

Adding the style code towards the end of the page seems to slightly help with rendering as the content can be displayed faster while the style part is still being downloaded. This is more a technical factor, rather than a real-life scenario as your style is anyway going to be small in size, one of the prime reason as to why you are putting it in-line.

Using a Plugin

If you are on WordPress or another similar platform, then you do have the option is to use an SEO plugin to inline your CSS. Google’s Page Speed Service also provides you with an option to inline CSS based on the size of your file. Dynamically inlining CSS in this fashion provides you with the advantages of both methods: maintaining a separate stylesheet file as well as inlining it when rendered.