Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<link> vs <style> for including CSS stylesheets with HTML documents [duplicate]

Tags:

html

css

I was surprised to find the following lines in the markup of the Free Software Foundation's home page:

<link rel="stylesheet" media="print" href="//static.fsf.org/nosvn/plone3/css/print-2011-10-13.css" />
<style type="text/css" media="screen"> @import url('//static.fsf.org/nosvn/plone4/css/fsf-2016-11-15.css');</style>

Am I right in thinking that the effect of these lines is similar (except that the first loads the "print" stylesheet and the second loads the "screen" stylesheet)?

If so, then what might be the rationale for using a different syntax in each case?

Alternatively, if I am mistaken in thinking that the lines have similar effects, then what is the difference between them?


1 Answers

<link> is used for specifying the CSS location if you are doing CSS externally (eg. 'index.css'). <style></style> is used for internal CSS (for when you have the CSS with the HTML in the same file).

Here is an example of a link being used to define external CSS: <link href="index.css" rel="stylesheet" type="text/css" />

P.S link is used for other things besides defining a location to external CSS.

like image 94
CyanCoding Avatar answered Sep 07 '25 19:09

CyanCoding