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

Asked

Viewed 354 times

0

My question is this, I have a code HTML which I am using to learn in my course’s classes. So after my course’s CSS wanted to use one of the templates used during the explanation in my code. I put the folder with the style inside the folder HTML is. Soon 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 believe 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;
}
html css

  • Do you want to download a third-party CSS and use it on a website? If so, just use the CSS URL in the attribute href in the element link. Ps.: I did not understand very well.

  • So I was in class. The teacher provided some css styles. In this case I chose what has the name: style.css But something went wrong because in the example code it is great but in my code it didn’t even appear. A and I didn’t understand exactly what you meant by "href" in the "link" element . <DOCKTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Shop X-About</title> <!-- Comment --> <link rel="stylesheet" type="text/css" href="style2.css"> </head>

  • href of your . CSS link is wrong. It should be like this href="filename/style2.css"

  • That shouldn’t be it. I’ve tried just about every folder I could and still haven’t solved.

  • CTRL + ALT + J -> Flap Network -> press F5, see if the file has been loaded.

  • take advantage and put the code css in your question also.

  • This shortcut you put up didn’t do anything on my pc. At least not that you noticed.

  • 1

    Regarding your HTML file, where is the CSS file? If the file is being included, the next problem is that HTML does not match CSS (and vice versa), in CSS you have a rule like this for example, header h1 { ... but in HTML, the only <h1> you don’t have a father <header>.

  • @Milk is there! NOTHING, as stated in CSS exite in HTML, there is no way to work hahaha. In CSS you have header, Nav, footer, aside, and in HTML you don’t have these tags to receive the styles, there’s no way...

  • Yes, my html is poor. But the css worked. I’ll study more to understand better. Thank you anyway. The issue was resolved by stirring the folders. it seems that the css had 1 more and more internal folder than the html code. 1 more way than html understands ?

  • It is not poor, it is normal for those who are taking the first steps. Here the point is that the css that your teacher created was for a html that he had, with a different structure than you have in yours, hence some of the styles of css not being present. At this stage of learning it is not yet easy to see how the html and the css If they do, when it happens it will be instantaneous to realize this kind of problems, but there will always be others more complicated to solve. Good luck with your studies, and don’t forget to ask questions that we’re here to help

  • Gabriel you’re on the right track, I’m sorry if I sounded disrespectful. What I meant is that if in HTML vc you do not have the element that you referenced in CSS, there is no way the style can be applied, the element has to exist and be referenced in both files. Good luck with your studies!

  • You should place the answer in the area below and delete the answer from the question location

  • Firstly Hugo It was not disrespectful no. I do not have much knowledge and I was not understanding what you had said. Amadeu will do it. I was just thinking it was enough:" The problem solved".

Show 9 more comments

2 answers

0

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

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

-1


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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.