This is the head tag of Noughts and Crosses:
<head>
<style>
#board {
background-color: red;
color: indigo;
font-size: 65pt;
text-align: center;
height: 330px;
width: 330px;
border: 5px solid indigo;
}
.row {
clear: both;
}
.row div {
height: 100px;
width: 100px;
border: 5px solid indigo;
float: left;
}
</style>
<title>Noughts and Crosses</title>
</head>
<title>Noughts and Crosses</title> makes the web browser’s title Noughts and Crosses.<head> and </head> switch the code within to CSS. #board { and } pair the code within to the element with the id board. .row { and } pair the code within to the element with the class row. .row div { and } pair the code within to all div tags inside the element with the class row. The code following background-color: determines the background colour of the element. The code following color: determines the colour of the text in the element. The code following font-size: determines the size of the text in the element in pt (points) or px (pixels). The code following text-align: determines the position of the text within the element. The code following height: determines the height of the element in px (pixels). The code following width: determines the width of the element in px (pixels). The code following border: determines the thickness in px (pixels), the type (solid, dotted, dashed, double) and the colour the element’s border. The code following clear: determines that nothing can be on specific side of the element. The code following float: determines the position of the element in relation to other elements.
