I have a basic HTML/CSS website for fun and put a custom font on it. The problem is that when ever I click on a link on my sidebar the custom font changes to a standard font, and won't revert to the custom font unless I close the tab and re-open it. How can I get it to stay?
CSS:
#font-face {
font-family: 'VHS';
src: url('http://hashfastr.com/fonts/VHS.ttf');
}
body {
background-color: black;
}
.upper {
font-family: 'VHS';
font-size: 400%;
color: white;
}
.lower {
font-family: 'VHS';
font-size: 300%;
color: white;
}
.mini {
font-family: 'VHS';
font-size: 150%;
color: white;
}
.list {
font-family: 'VHS';
font-size: 100%;
color: white;
}
The website is here
Edit: The problem does not work on mobile, only chrome and firefox. I assume this is due to a caching error?
Related
When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>
I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>
I am new to HTML and CSS. I'm wanting to add an image to the background of my page but I do not know how to do that.
I am wanting to keep the CSS internal to the page, so that this background image is specified by the CSS in the <head> of my page:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can set an image for the background of your page via the background-image CSS property. Here, a background image is specified via a URL and applied to the body element of the document:
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
Here is a complete example with your existing HTML:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can use background attribute ,
<body background="bgimage.jpg">
Using CSS,
body
{
background-image: url("bgimage.jpg");
}
You can also use background shorthand property as well which allows you to set different background properties which includes background-image as well,
body {
background: lightblue url("bgimage.jpg") no-repeat fixed center;
}
I'm trying to make a simple button in HTML using an image and basic CSS styling.
When I load up the html file in a browser, it shows the text of the button as well as some of the button image, but whatever falls outside the text gets cut off.
I'd like the button to be fully shown (it's pretty large) with no text at all.
Here's my HTML code:
<link rel="stylesheet" type="text/css" href="style.css">
Fake Button
And here's my css file:
a.likeAButton {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_inactive.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:active {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
Any help would be appreciated.
Anchors are inline by default, so they have no size. Try this:
a.likeAButton {
display: inline-block;
...
}
a.likeAButton {
display: inline-block;
width: 500px;
height: 600px;
background-image: url(http://placehold.it/500x600);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
background-image: url(http://placehold.it/500x600/0000ff);
}
a.likeAButton:active {
background-image: url(http://placehold.it/500x600/ff0000);
}
Fiddle demo
Notice that I stripped most of the style statements from your :hover and :active pseudo-classes. There's no need to repeat them.
How do i override facebook shaer button css ?
Is that any way to change the sharebutton css ?
I am using asp.net and i want to change or override the facebook share button css how do i do it ?
.sp_plugin-button {
background-image: url("https://fbstatic-a.akamaihd.net/rsrc.php/v2/y1/r/LVx-xkvaJ0b.png");
background-repeat: no-repeat;
background-size: auto auto;
display: inline-block;
height: 14px;
width: 14px;
}
How do i change the image of that share button i have override this class but not worked..
You can create one like this using Font Awesome as the unique dependency:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css
HTML
<div class="facebook-share">
<i class="fa fa-facebook-square"></i> <span>Share</span>
<div>
CSS
.facebook-share {
background-color: #3b5998;
border-radius: 3px;
height: 20px;
width: 66px;
color: white;
padding: 0 0 1px 4px;
font-family: "Lucida Grande", "Tahoma", "Helvetica", "Roboto";
font-size: 18px;
}
.facebook-share span {
font-size: 14px;
}
Here is the fiddle:
http://jsfiddle.net/yu8j5bny/
If you're referring to this button: https://developers.facebook.com/docs/plugins/share-button/
All you have to do is target the same classes that Facebook is styling to override them.
Example:
This is what Facebook is styling
.pluginCountButton {
color: #6A7180;
font-size: 11px;
line-height: 18px;
text-align: center;
white-space: nowrap;
}
override with something like:
.pluginCountButton {
color: #000;
font-size: 16px;
}
Edit: I see you've updated your question with m ore details. Facebook is using a sprite, so they are also setting the background position:
.sx_plugin-button_favblue {
background-position: 0 -42px;
}
You need to override that too.
Edit 2:
Do this:
.sp_plugin-button {
background-image: url("YourImagePathHere");
}
.sx_plugin-button_favblue {
background-position: 0 0;
}
I tried to remake that 3D style button on Flat websites like the share button on G+ but when I press it, it affects the whole page by adding a margin-top:3px to everything. It somehow works the way I want it, but it doesn't apply only to self.
This is my code:
.button {
width: 100%;
background-color:#f1c40f;
color: #000000;
border: 0;
border-bottom: 3px solid #f39c12;
height: 50px;
font-family: 'Source Sans Pro', Montserrat, Helvetica, sans serif, Arial;
font-size: 24px;
}
.button:active {
border-bottom: 0;
margin-top: 3px;
height: 47px;
outline:0;
}
Figured the problem. I assigned a dip display:inline-block to the form. Works now! Watch out with that positioning. Can cause a lot of trouble!