(Sorry for my bad grammar, English is not my native)

I started to refresh my knowledge about HTML5 and CSS.

Started with basics.

Made html file and CSS stylesheet in folder in my PC. Wrote some HTML code :

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="style/css" href="styles.css">
    <meta charset="UTF-8">
</head>
<body>

<a href="https://www.google.lv/"><button>Ej uz Google!</button></a>


</body>
</html>

And CSS stylesheet :

body {
  background-image: url("https://www.hdwallpapers.in/download/sunset_horizon_above_clouds_4k-1366x768.jpg");
  background-repeat: repeat-x;
}
button{
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
button:hover {
    background-color:#5cbf2a;
}
button:active {
    position:relative;
    top:1px;
}

But all is Ok when i open my HTML locally in Dreamweaver. When i open it locally in any of my browsers, it shows only simple button and nothing from CSS stylesheet :(

How can I fix it?

Thanks in advance!

Have a nice day!

2 Answers

-2
Community On Best Solutions

Sorry if my question was dumb, and thanks for helping.

I just made some changes by help of mighty Google and comments from this question :)

So i changed something in HEAD section :

<head>
    <meta charset="utf-8">
    <title>Seda Mājaslapa</title>
    <style type="text/css">
        @import url("styles.css");
    </style>
    <link rel="icon" href="https://img.icons8.com/color/48/000000/jacket.png">
</head>

Thanks for helping! I'm sorry if my question wasn't good. I'm just refreshing my knowledge in HTML5 and CSS :)

Have a nice day!

P.S. Where is some good HTML5 and CSS tutorials (i know w3schools already ) :)

-4
Community On

Bro Use this!

  • I have comment my css So you can get What I have added.
  • add css in your code and see changes if anything let me know

body {
  background-image: url("https://www.hdwallpapers.in/download/sunset_horizon_above_clouds_4k-1366x768.jpg");
  /*---I have added this CSS Try it--*/
  background-size: cover;
  height: 100vh;
  text-align: center;
  /*--------*/
}
button{
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
button:hover {
    background-color:#5cbf2a;
}
button:active {
    position:relative;
    top:1px;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="style/css" href="styles.css">
    <meta charset="UTF-8">
</head>
<body>

<a href="https://www.google.lv/"><button>Ej uz Google!</button></a>


</body>
</html>