What is the best way to call a CSS file from an HTML file? I am facing many possibilities and have no experience with the best Possible possibilities
1 -
<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/screen600.css">
<link rel="stylesheet" media="screen and (max-height: 400px) and (max-width: 600px)" href="css/screen600x400.css">`
2 -
@media only screen and (max-width: px) {}
On
In my opinion, you should use one css file with the exteternal metod in your html using <link> tag, ( <link rel="stylesheet" type="text/css" href="style.css"> ) and put in there your media querys on all screen sizes.
Your css file will contain much code but is easy to navigate from a size to other instead open more css files to change something on a certain screen width.
On
Am not sure you need the specifics to call css into html
if you already have a file eg: stylesheet.css and you wish to include it into your HTML file, all you need to do is open your HTML file, go to the header area and do this;
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
so eg:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
I usually do this and do all my extra definitions in the CSS. From Screens to what have you. This makes it easy to do "separation of concerns" so you don't have to go back to your HTML and CSS just to change a screen size, add or even remove.
I hope this answers your question. If not let me know, I may just need to understand and give a proper answer.
In the first example, by adding the media query to your HTML, you will only download the file if it matches that media query
media="screen and (max-width: 600px)". (in your example, some users will download two CSS files, which are are render blocking resource and will delay the page rendering)Placing the media query in the CSS (second example) you will always download that file and then the browser will decide whether to apply those styles or not. So potentially you would be downloading more CSS than you are using.
So there is no single correct answer, but I believe the second approach is the most common because it is easier to maintain.