Modifications made to my style tab are not updating on the page

Asked

Viewed 28 times

-1

I’m making a calculator that I saw on youtube and I’m having a problem that what I did in my style isn’t changing what I should change. I’ve tried some videos that teach you how to handle documentation and organize everything, in the surveys I’ve also seen about upgrading using crtl + F5. I am at the beginning of my studies :) thank you. My code:

<html>
    <head>
        <title>
            <link rel="stylesheet" href="style.css">
        
        </title>
        
    </head>
    <body>
        <div id="container">
            <div id="calculator">
                <div id="result">
                    <div id="history">
                        <p id="history-value"></p>
                        
                    </div>
                    
                     

                   

                </div>
                <div id="keyboard">
                    <button class="operator" id="Clear">C</button>
                    <button class="operator" id="backspace">CE</button>
                    <button class="operator" id="%">%</button>
                    <button class="operator" id="/">&#247;</button>
                    <button class="number" id="7">7</button>
                    <button class="number" id="8">8</button>
                    <button class="number" id="9">9</button>
                    <button class="operator" id="*">&times;</button>
                    <button class="number" id="4">4</button>
                    <button class="number" id="5">5</button>
                    <button class="number" id="6">6</button>
                    <button class="operator" id="-">-</button>
                    <button class="number" id="1">1</button>
                    <button class="number" id="2">2</button>
                    <button class="number" id="3">3</button>
                    <button class="operator" id="+">+</button>
                    <button class="empty" id="empty"></button>
                    <button class="number" id="0">0</button>
                    <button class="empty" id="empty"></button>
                    <button class="operator" id="=">=</button>
                    </div>

            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>


body{
    font-family: 'Open Sans',sans-serif;
    background-color: black;
}
#container{
    width: 1000px;
    height: 550px;
    background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(bgImg.jpg);
    margin: 20px auto;  
}
#calculator{
    width: 320px;
    height: 520px;
    background-color: #eaedef;
    margin: 0 auto;
    top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#result{
    height: 120px;
}
#history{
    text-align: right;
    height: 20px;
    margin: 0 20px;
    padding-top: 20px;
    font-size: 15px;
    color: #919191;
}
#output{
    text-align: right;
    height: 60px;
    margin: 10px 20px;
    font-size: 30px;
}
#keyboard{
    height: 400px;
}
.operator, .number, .empty{
    width: 50px;
    height: 50px;
    margin: 15px;
    float: left;
    border-radius: 50%;
    border-width: 0;
    font-weight: bold;
    font-size: 15px;
}
.number, .empty{
    background-color: #eaedef;
}
.number, .operator{
    cursor: pointer;
}
.operator:active, .number:active{
    font-size: 13px;
}
.operator:focus, .number:focus, .empty:focus{
    outline: 0;
}
button:nth-child(4){
    font-size: 20px;
    background-color: #20b2aa;
}
button:nth-child(8){
    font-size: 20px;
    background-color: #ffa500;
}
button:nth-child(12){
    font-size: 20px;
    background-color: #f08080;
}
button:nth-child(16){
    font-size: 20px;
    background-color: #7d93e0;
}
button:nth-child(20){
    font-size: 20px;
    background-color: #9477af;
}
html5 css3 visual-studio-code

1 answer

0


Hello. You put the tag <link> within the tag <title>.

Leave it at that:

    <head>
        <title>Título</title>
        <link rel="stylesheet" href="style.css">
    </head>

  • I did what you said and it didn’t change anything on the page

  • HTML and CSS are in the same directory?

  • They are. I can make the changes when I use the style tag inside the head tag, but when in different tabs they don’t work

  • The file name should be the same as the one being imported into html. ("style.css"). Try using relative path (dot and bar) ". /style.css". <!DOCTYPE html> in the first line of your HTML.

  • It worked. I was wrong on this relative path, thanks for the patience.

Browser other questions tagged html5 css3 visual-studio-code

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