External css file half works in html

I have this code:

@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;
}
<!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.

1 answer

  • answered 2019-11-22 18:20 Maria K.

    Internal style tag and external files are prioritized differently: Based on its priority level, the internal style is higher, so it will overwrite the external styles.

    https://www.hongkiat.com/blog/css-priority-level/

    Try to figure out what properties are being overwritten and adjust accordingly, i.e. with important! (if nothing else works).