1

Today I tried to check my site using Google PageSpeed Insights and in it's recommendations was: "Eliminate render-blocking CSS in above-the-fold content". As I understand it's better to include all CSS for top part of the page (for example in <head> tag) and then include styles for other content later on the page. In docs for this recommendation was this example construction:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

But the problem is that HTML W3 validator throws and error ("Stray start tag link") the same is when I'm trying to include <link> inside <body> tags. So the question is: What's the better way to include CSS into the page (is it normal to use recommended construction or no)?

rajesh
  • 1,475
  • 10
  • 23
bashkovpd
  • 598
  • 1
  • 7
  • 21

2 Answers2

0

Put the CSS in the head, combine CSS if you can and label CSS files accordingly (media="print" for example). https://varvy.com/pagespeed/render-blocking-css.html This is a good source where it explains some more stuff you can do, but keep in mind that, for example, inlining css can't be cached and makes the page slower if it's requested again.

Another thing you can do that is not mentioned on the page is to dynamically insert CSS via javascript: create a link-element and insert it into the head on dom-ready.

cloned
  • 6,346
  • 4
  • 26
  • 38
0

You have three options for CSS (Cascading Style Sheets), an Internal Style Sheet, External Style Sheet or Inline. What you have attempted to use, is Internal Style Sheet, with External, you write you CSS in an external .css file and reference it in your html code.

In your code, you haven't specified what needs to be blue,

eg: 

<style>
body {
    background-color: lightblue;
}
</style>

You can replace body with whatever you want to enhance with css, e.g. h1, head, div etc.

For External Style Sheet, you would do the same but in a separate file and link it as you did, but in the head tag e.g.

<head>
<link rel="stylesheet" type="text/css" href="small.css">
</head>

Inline (as the name suggests), is done on the specific line itself. This is useful when you want to style only a single element. e.g.

<h1 style="color:green;margin-left:15px;">Hello World!</h1>

I recommend looking at http://www.w3schools.com/css/, dead helpful

stackman
  • 332
  • 1
  • 2
  • 10