Difference between <style type="text/css"> & <link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Question

I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.

Why have both? Please simplify you answer, don't go so technical.

Answer 1

<style type="text/css"> is when you want to have style rules embedded within the page.

<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.

CSS has the @import directive, if you use <style>@import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between @import and link in CSS ).

Answer 2

Method 1 (using <style type="text/css">)

Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.

Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)

The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.

---

What is better?

In my opinion Method 2.