My CSS connected to my HTML isn't working-CodePudding

The aim of my project is to make a color palette maker and be able to save the palette. However, my squares in CSS aren't being connected. I checked the Dev Tools in Chrome, and when I clicked on the square div tag it didn't have any formatting.

MY HTML CODE:

<html>
<head>
    <meta charset="utf-8">
    <title>Utility Page</title>
    <style src="styles.css"></style>
</head>
<body>
    
    <script src="script.js"></script>
    
    <div > </div>
    <div > </div>
    <div > </div>
        
    <button onclick="changeColor1()"> Change The Color </button>
    <button onclick="changeColor2()"> Change The Color </button>
    <button onclick="changeColor3()"> Change The Color </button>
</body>
</html>

CSS CODE:

.square1 {
    background-color: red;
    height: 100px;
    width: 122px;
}
.square2 {
    background-color: green;
    height: 100px;
    width: 122px;
}
.square3 {
    background-color: blue;
    height: 100px;
    width: 122px;
}

JS CODE:

import Math
var colorValue = Array("#000000", "#000000", "#000000")
const hexademical = Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D","E","F")

const function changeColor1() {
    document.querySelector(".square1").style.background = colorValue[0];
    colorValue[0] = colorDecide()
}
const function changeColor2() {
    

    document.querySelector(".square2").style.background = colorValue;
    colorValue[1] = colorDecide()
}
const function changeColor3() {

    document.querySelector(".square3").style.background = colorValue;
    colorValue[2] = colorDecide()
}


const function colorDecide() {
    let tempValue = "#"
    for (var i = 1; i <= 6; i  ) {
        let x = Math.floor(Math.random() * 16)
        tempValue = tempValue.concat(x)
    }
    return tempValue
}

The text editor I'm using is Sublime 3. Should I use the WebStorm IDE by JetBrains?

CodePudding user response：

You're linking your .css file wrong. Here is how you should do it:

<link rel="stylesheet" href="styles.css"/>

instead of

<style src="styles.css"></style>