How to use an external (ready) CSS style in HTML code?

Navigation
0

My question is the following, I have an HTML code that I am using to learn in my course classes. So after CSS class I wanted to use one of the templates used during the explanation in my code. I put the folder with the style inside the folder that HTML is. So I wrote the following code: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Loja X-Sobre</title>
    <!-- Comentário -->
    <link rel="stylesheet" type="text/css" href="estilo2.css">
</head>
<body>
    <h1>Loja X</h1>
    <h2>Bem-vindo à Loja X, a sua loja de eletro-eletrônicos!</h2>
    <ol start="10"type="I">
        <li>Confira nossas promoções.</li>
        <li>Fique por dentro de nossos lançamentos.</li>
        <li>Veja nosso catálogo.</li>
        <li>Faça logo a sua lista de compras.</li>
    </ol>
    <h3>Ache o Olie</h3>
    <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
    <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
    <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
    <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
    <p>Texto Texto Texto<sup>Texto</sup><!-- Superior /-->Texto <sub>Texto</sub><!-- Inferior /--> Texto Texto Texto Texto Texto TextoTexto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto TextoTexto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto Texto Texto Texto <mark>Texto</mark><!-- Marca texto Amarelo /--> Texto Texto Texto Texto TextoTexto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto TextoTexto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto Texto <del>Texto</del><!-- Risca texto /--> Texto Texto Texto Texto Texto <b>Texto</b><!-- Negrito /--> TextoTexto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto Texto <ins>Texto</ins><!-- Sublinha texto /--> Texto Texto Texto Texto Texto Texto TextoTexto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto TextoTexto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto <strong>Texto</strong><!-- Negrito /--> Texto Texto Texto Texto Texto Texto Texto TextoTexto Texto Texto Texto Texto <em>Texto</em><!-- Itálico /--> Texto Texto Texto Texto Texto Texto</p>
</body>
</html>

I think it's something in head . Can you help me?

The CSS code below: 

========================================================================
/* Stylesheet 2: */
body {
    font-family: Arial;
    background-color: #d14836;
    line-height: 20px;
}

.wrapper {
    position: relative;
    overflow: auto;
}

header {
    color: #ffffff;
    padding: 15px;
    font-size: 30px;
    line-height: 26px;    
}

header h1 {
    margin:0;
    line-height: 50px;
}

nav {
    width: 190px;
    float: right;
}

#main {
    padding: 10px;
    background-color: #ffffff;
    font: 80% Verdana;
}

#main h1, #main h2 {
    color: #d14836;
}

aside {
    background-color: #F6DAD7;
    color: #d14836;
    padding: 10px;
}

footer {
    text-align: center;
    padding: 10px;
    font-size: 70%;
    color: #ffffff;
}

#menulist {
    padding:0;
    font: 16px verdana;
}

.menuitem {
    width: 155px;
    background-color: #d14836;
    border: 1px solid #d14836;
    border-radius: 40px;
    color: #ffffff;
    list-style-type: none;
    margin: 10px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.menuitem:nth-child(2) {
background-color:white;
color: #d14836;
font-weight:bold;
}

.menuitem:hover {
    background-color: #ffffff;
    color: #d14836;
}

a {
    color: #d14836;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
    
asked by anonymous 31.08.2018 / 03:04

2 answers

-1

use <link rel="stylesheet" type="text/css" href="exemplo.css"> within <head>

    
31.08.2018 / 19:40
0

The problem has been solved with a change in the folders where the html code is. With this adjustment I was able to decrease the CSS path by 1x so I could use it correctly in my code.

From now on, thank you to those who have helped me. Until next time!

    
31.08.2018 / 22:16
Calculation of top in the scss Python problems with too large List