I have this code:

```css
@font-face {
    font-family: lato;
    src: url(../rsrc/fonts/Lato-Regular.woff);
}

@font-face {
    font-family: audrey;
    src: url(../rsrc/fonts/Audrey-Normal.otf);
}

body {
    margin: 0;
}

.main {
    display: grid;
    grid-template-rows: 'head content foot';
}

.head {
    grid-area: head;
}

.barra1 {
    background-color: #000000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.g2 {
    text-align: center;
}

.g2 img {
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

.g3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
    border-color: red;
}

.e1 {
    display: inline-block;
    margin: 0;
    padding: 0;
    border-color: orange;
}

.e1 a {
    color: #ffffff;
    display: block;
    margin: 0;
    padding: 6px;
    text-decoration-line: none;
    font-family: lato;
    font-size: 12px;
    border-color: yellow;
}

.e1 a:hover {
    background-color: #7a7a7a;
    color: #fafafa;
}

.e1 a:active {
    background-color: #1e1e1e;
    color: #ffffff;
}

.barra2 {
    font-family: audrey;
    text-align: center;
}

.barra3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid #000000;
    border-right-width: 0;
    border-left-width: 0;
    background-color: #E6E6E6;
    text-align: center;
}

li.e3 {
    display: inline-block;
}

li.e3 a {
    display: block;
    padding: 10px 30px;
    text-decoration-line: none;
    font-family: lato;
    color: black;
    font-size: 20px;
}

li.e3 a:hover {
    background-color: #7a7a7a;
    color: #fafafa;
}

.e3 a:active {
    background-color: #1e1e1e;
    color: #ffffff;
}

.barra4 {
    padding: 0;
    text-align: center;
}

.e4 {
    color: #ffffff;
    display: inline-block;
    padding: 6px 6px;
    text-decoration-line: none;
    font-family: lato;
    font-size: 12px;
}

.e4:hover {
    background-color: #7a7a7a;
    color: #fafafa;
}

.e4:active {
    background-color: #1e1e1e;
    color: #ffffff;
}

.content {
    grid-area: content;
}
```

```html
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../css/estilo.css">
    <!----
    <style>
        .barra4 {
            padding: 0;
            text-align: center;
        }

        .e4 {
            color: #ffffff;
            display: inline-block;
            padding: 6px 6px;
            text-decoration-line: none;
            font-family: lato;
            font-size: 12px;
        }

        .e4:hover {
            background-color: #7a7a7a;
            color: #fafafa;
        }

        .e4:active {
            background-color: #1e1e1e;
            color: #ffffff;
        }
    </style>
    <!---->

</head>
<body style="margin:0">
    <!--foot--><div class="barra4">
        <a href="ej/1.jpg" class="e4">Políticas y aviso legal</a>
    </div>
</body>
</html>
```

The html file is called: C:\Users\silve\source\repos\TTWeb\html\foot.html
The css file is called: C:\Users\silve\source\repos\TTWeb\css\estilo.css
Both are in UTF-8 (not BOM or something else)

My problem is that when I give the style via internal css (inside tag in foot.html as it is inside a comment) works no problem and the result is exactly how I want. But when I use the external css file (estilo.css) (style for foot is at the end) it doesn't apply completely. Background is right but link not, for example.

The same problem is also in other html files I have.
I have no idea why it doesn't work and no clue found on the internet.