Stack Overflow Asked by stratos la on November 20, 2021
I’m having some trouble with external CSS. For some reason it can work for my fonts and background pictures but it doesn’t apply the button styling and div placement.
@font-face {
font-family: h1font;
src: url("static/Milky.ttf");
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
border-radius: 50px;
padding: 9px;
text-align: center;
}
body,
html {
height: 100%;
margin: 0;
}
.h1 {
text-align: center;
letter-spacing: 20px;
color: white;
font-size: 40px;
font-family: h1font;
}
.bg {
/* The image used */
background-image: url("static/back.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper {
text-align: center;
}
.button_enter {
cursor: pointer;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
color: white;
border: 2px solid transparent;
border-radius: 10px;
border-right-color: #743ad5;
border-left-color: #d53a9d;
background: linear-gradient(to left, rgb(116, 58, 213) 0%, rgb(186, 58, 143) 70%, transparent 70%, transparent 85%, rgb(201, 58, 128) 85%, rgb(213, 58, 157) 100%) top/100% 2px, linear-gradient(to left, #743ad5 0%, #d53a9d 100%) bottom/100% 2px;
background-repeat: no-repeat;
position: absolute;
top: 50%;
}
<div class="bg">
<br>
<h1 class="h1">John Doe</h1>
<h1 class="h1">Photographer</h1>
<br>
<div class="wrapper">
<a class="button_enter" style="padding:10px">Enter</a>
</div>
</div>
Now, if I add the CSS inside the HTML everything works ok, but, as it is, the button is never centered and it doesn’t even have a style, it’s just text.
Did you add <link>
for linking the css file to you html?
Something like: <link rel="stylesheet" href="yourCssFile.css">
in your html.
Answered by swanf on November 20, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP