I'm building a tic-tac-toe game, and built the squares of the gameboard with p HTML elements. Whenever a square is clicked on, I'm running a function that takes a variable of turn, which is equal to 'X', and inserts it into the square when the square is clicked on. The function also toggles the variable's text, so 'O' is next.
Is there a way to directly style these 'X's and 'O's? I've tried to style the p elements color and font-size, and this worked, but now I'm trying to style the position of the 'X's and 'O's within the square.
You can add the classes to your CSS file and then add them to the corresponding elements.
An example:
let elementX = document.getElementById("element_x");
elementX.classList.add("element_x_class");