For most individual pages, leaving the scripts and styles inline will result in them loading quicker and rendering faster. This is because the client’s browser doesn’t need to make as many HTTP requests to the server. While it’s true that most browsers can issue multiple HTTP requests simultaneously, you still get some slow down due to network latency. Not to mention the fact that most web pages include images and other assets which the other HTTP requests could be fetching instead.
So with those points in mind, when should you use inline scripts and styles and when should you link to external files? If you’re going to use something more then once, it’s usually best to place it in an external file and link to it. If the script or style in question will only be used on one page, then by all means leave it inline on that page.