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

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.

Answer 2

Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.

Answer 3

The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.

Answer 4

<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 5

The first is used to insert css code directly in your html files, while the second is calling an external css file.