Deixando o site estiloso... parte 3 | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Estrutura html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio de Helder Razif</title>
    <link rel="icon" type="image/x-icon" href="/img/Helder 2.jpeg">
    <link id="stylesheet" rel="stylesheet" href="css/styles.css">
    <script src="js/mudaEstilo.js"></script>
</head>
<body>
    <header>
        <nav>
            <a href="#" onclick="changeStyle('css/styles.css')">Estilo 1</a> | 
            <a href="#" onclick="changeStyle('css/styles 2.css')">Estilo 2</a> | 
            <a href="#" onclick="changeStyle('css/styles 3.css')">Estilo 3</a>
        </nav>
    </header>
    <main>
        <h1>Transforme boas <span>ideias em negócios</span> lucrativos</h1>
        <h2>Contrate Helder Razif</h2>
    </main>
        <p>Atuo com engenharia, gestão, tecnologia da informação e inovação aplicada ao desenvolvimento de produtos com o propósito de <strong>transformar ideias em negócios sustentáveis.</strong></p>
        <p><h3><a href="https://www.linkedin.com/in/hrazif/">LinkedIn</a> | 
        <a href="https://github.com/helder-razif">GitHub</a> | 
        <a href="https://www.behance.net/arte1">Behance</a></h3></p>
        <img id="foto-razif" src="img/razif.JPG" width="234" height="303" alt="Helder Razif">
    <footer>
        <p>Helder Razif - Nexialista</p>
        <p>Contato: <a href="mailto:helder.net@gmail.com">helder.net@gmail.com</a></p>
    </footer>                
</body>
</html>

Folha de Estilos 1

body {
    background-color: #001D3D;
    color: whitesmoke;
}

strong {
    color:#FFC300;
}

h1{
    font-weight: bold;
}

span{
    color: #fd226b;
    border: 1px solid #fd226b;
    padding: 10px;
}

img {
    width: 234PX;
    height: 303px;
}

Folha de Estilos 2

body {
    background-color:#FFC300;
    color: black;
}

strong {
    color:#fd226b;
}

h1{
    font-weight: bold;
}

span{
    color: whitesmoke;
    border: 1px solid whitesmoke;
    padding: 10px;
}

img {
    width: 234PX;
    height: 303px;
}

Folha de Estilos 3

body {
    background-color:whitesmoke;
    color: #fd226b;
}

strong {
    color:black;
}

h1{
    font-weight: bold;
}

span{
    color: #FFC300;
    border: 1px solid #FFC300;
    padding: 10px;
}

img {
    width: 234PX;
    height: 303px;
}

Script

function changeStyle(sheet) {
    document.getElementById('stylesheet').setAttribute('href', sheet);
}