HTML CSS don't function-CodePudding

how can i link css in a html template? Please help me, i can't figure it out, why the code don't function.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <link rel="stylesheet" href="test.css">
   
</body>
</html>

CodePudding user response：

Check if your css file exist in the same folder your html file. and put the link in the <head> or you could do your stying inside HTML but for good practices ALWAYS put your style files away from HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <!-- <link rel="stylesheet" href="test.css">-->
   <!--<style>
        /*or you could put test.css style*/
    </style>-->
</body>
</html>

CodePudding user response：

There are a few ways to incorporate CSS to your HTML template.

1. Inline CSS: In this method you add a style attribute to your HTML tag, in your HTML template's code. For example:

<h1 style="font-size:20px; color: blue;">Hello World</h1>

2. Internal CSS: Using internal CSS, you can incorporate styling in the HTML's head section using the style tag. For example:

    <style>
        h1 {
            font-size:20px; 
            color: blue;
        }
    </style>

3. External CSS: This is probably what you are looking for. In your folder, add an external sheet i.e. a "styles.css" file. You can add all your CSS styling in this file just as you would add in between the style tag in the head section.

While using this method, the most important thing to do is linking your CSS file to your HTML file by adding the following line of code to your head section:

<link rel="stylesheet" href="style.css">

And that should do it!