/*For actual detailed explanations of this look at 4.2 and 4.3*/

* /*Assigns this CSS to everything on the website, this notation of the asterisk also is present in SQL to indicate selecting all*/
{
    font-family: Arial, Helvetica, sans-serif;
}

body /*Changes the background colour of the body tag, this is often the background of the whole document*/
{
    background-color: antiquewhite;
}

header /*Changes the background colour of the header tag, it has padding around it to extend the colour out 8px, this does not happen if you use margin for this*/
{
    background-color: gainsboro;
    padding: 8px;
}

header h1 /*Applies the font weight of bold and underlines the text but only for h1 tags that are contained within the header tag*/
{
    font-weight: bold;
    text-decoration: underline;
}

.redText /*Applies red text to anything with class="redText" as an attribute, such as <p class="redText"></p>*/
{
    color: #ff6347;
}

.flexContainer /*Activates flex and sets the flex to position elements horisontally, add this class to a div and put other elements in there in order to stack them side by side*/
{              /*Learn how to use it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
    display: flex;
    flex-direction: row;
}

#textId /*Frequently used in Javascript in order to interact with page elements, can be assigned using id="id name here"*/
{
    color: rgb(32, 255, 255);
}

table, th, td /*Selects multiple elements*/
{
    border: 1px solid black;
    border-collapse: collapse;
}