How to connect my CSS and HTML using JavaScript

Question

I have to do some homework with JavaScript. The Exercise is: We programmed a Game called ColorClicker. Very simple. When you win this game, I want to show the 10 best Scores in a list. Now I want to connect this list with my CSS, so I can make it look cooler etc.

My Code in JS:

function showHighscoreList(topTen) {
    var rank = 1
    topTen.forEach( function(entry) {
        var list = document.getElementById("highscoreList"),
            listElement = document.createElement("li"),
            entryElement = document.createElement("i");
        entryElement.innerHTML = "Platz "+rank+" - Username: " + entry.user + " | Score: " + entry.score;
        rank++;
        list.style.backgroundColor="orange";
        listElement.style.fontSize = "larger";
        listElement.addEventListener("click", onHighscoreListClicked);
        listElement.appendChild(entryElement);
        list.appendChild(listElement);
    });
}

And that's my code in HTML:

<div id="highscore">
        <ul id="highscoreList">
        </ul>
</div>

So, now I want to manipulate the HTML elements with CSS. How can I do that in detail?

Answer 1

样式表使用link标记链接到HTML文档，

<link rel="stylesheet" href="path-to-your-file/style.css">

Answer 2

This two lines are already css manipulation:

list.style.backgroundColor="orange";
listElement.style.fontSize = "larger";

Maybe you can add a class attribute and then apply some css to them:

list.class="list-element list"+rank;

And in css:

.list-element {
    font-size: 12pt;
    /* Other common styles */
}
.list1 {
    color: red;
}
.list2 {
    color: blue;
}

/* And so on...*/

I hope it helps.