My CSS is not showing in my browser, only the HTML is. Everything is linked up correctly (I think) but no browser shows the CSS. Now if I used something like live-server plugin in visual studio code the CSS is displayed correctly and works as intended.
Here is my css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap');
body{
background-color: rgb(35, 35, 35);
color: white;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.top{
text-align: center;
}
header{
align-items: center;
}
h1 span{
color: red;
}
p span{
color: red;
}
p{
font-weight: bold;
}
.explain{
color: white;
}
.explain p{
color: red;
}
.forum-container{
background-color: rgb(32, 32, 32);
margin: 1em 30em 1em 30em;
text-align: center;
align-items: center;
border-radius: 3em;
padding-top: 1.1em;
}
label{
display: block;
color: white;
font-weight: bold;
font-size: 1.4em;
}
input[type="text"]{
border: solid grey;
outline: none;
width: 50%;
padding: 1em;
border-radius: 4em;
margin-top: 1.1em;
margin-bottom: 1.1em;
}
input[type="number"]{
outline: none;
border: solid grey;
width: 50%;
padding: 1em;
border-radius: 4em;
margin-top: 1.1em;
margin-bottom: 1.1em;
}
input[type="button"]{
border: none;
outline: none;
background-color: red;
color: white;
border-radius: 3em;
font-weight: bold;
text-align: center;
padding-top: 1.1em;
padding-bottom: 1.1em;
width: 30%;
margin: 1.1em 1.1em 1.1em 1.1em;
cursor: pointer;
}
input[type="button"]:hover{
background-color: rgb(211, 5, 5);
}
Here is the part where I am calling my css file too:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.png"><title>title</title>
</head>
I only started learning HTML and css today so if you are taking a look at this and see some things I am doing wrong please do let me know.
Are you able to see the CSS file loaded in the Network tab of your browser?
How to:
Developer Console > Network
In order for the above to work, open the developer console for your browser (here is a good link to find out for your browser: Check Opening Browser Developer Console)
If the CSS file is showing up in the Network tab, it means your CSS selectors are not correct.
If the CSS file isn't showing up, your path isn't correct. As a test put the entire url (absolute) in the src', like this:
<link rel="stylesheet" href="https://mywebsite.com/css/main.css">
The CSS file link needs to have an attribute of type. So, the final code should look like this <link rel="stylesheet" type="text/css" "href="/css/main.css">
Change the CSS reference to the following:
<link rel="stylesheet" type="text/css" href="main.css" >
Then everything works perfectly fine.
I had that problem as well. Copying and pasting others' codes wasn't helpful, because it still needed some tweaking, nonetheless, I thought CSS won't show up and that was just it.
I use chrome as a console.
The CSS X HTML linking is external if that's not obvious enough.
Related
My background is interrupted by the list and by the h3 but it has to be one solid line. The yellow thing is a background image. Pleas need help. Is for a school project.
In the image you see a yellow driangle dis ist the interrupted image:
This is my code:
* {
background-image: url("https://placehold.it/300x300/");
background-repeat: no-repeat;
background-color: #252525;
color: white;
font-family: arial;
}
h1 {
text-align: center;
font-size: 42pt;
background-image: url("https://placehold.it/300x300/f00/fff");
text-transform: uppercase;
}
h3 {
text-align: center;
font-size: 28pt;
text-transform: uppercase;
}
li {
list-style-type: none;
margin-top: 20px;
margin-bottom: 20px;
}
a {
color: yellow;
list-style-type: none;
width: 120px;
text-align: center;
font-size: 18pt;
box-shadow: 3px 3px 3px black;
font-weight: bold;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jonas Ploberger">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Übersicht jonas Ploberger</title>
<link rel="stylesheet" href="startseite.css">
</head>
<body>
<h1>PlobergerJonas</h1>
<h3>Home</h3>
<ul>
<li>Home</li>
<li>PS Bilder</li>
<li>Ausbildung</li>
<li>Kontakt</li>
</ul>
</body>
</html>
Here:
* {
background-image: url("https://placehold.it/300x300/");
background-repeat: no-repeat;
background-color: #252525;
color: white;
font-family: arial;
}
you are using the universal selector '*' and so you are setting a background image to every element in your html document.
So you want to replace that selector with either 'body' or any other element you want to have that background image on.
My CSS stylesheet loads almost all the contents but it is not loading my CSS for button. It's strange because all other things are working fine. I use opera. I have posted the CSS below which is not loading, also how I load the CSS.
<link rel="stylesheet" type="text/css" href="/style.css">
.button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
JS fiddle https://jsfiddle.net/hpsj2e0L/
It works fine in the fiddle but not in my site.
The problem with your code is that you are writing CSS inside your HTML file without wrapping it into a <style> tag. Like this:
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also, you don't need both selectors if you are applying the style to a <button> you can just use button.
.button is only necessary if you are going to apply it as a class like in <div class="button"></div>
Check other style files to button class. Try give the different class name or load your style file later than others.
make sure you put your css in style tag or in css file
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also check if you have .button class in your html or maybe its button tag
https://codepen.io/rogercodes/pen/JJVXoV/
HTML:
CSS:
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
Above is the link which currently has both Font Awesome and Bootstaps added under settings.
Here is the w3schools link that shows the correct icons only using font-awesome and not bootstrap.
https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
As #Spharah said, all you have to do is remove the width: 30px rule for the .fa selector:
https://codepen.io/prahladyeri/pen/WOWwMz
(Or alternatively, change it to something like 70px if you want to tackle the facebook icon being slightly narrower, due to its icon width. This way, both icons will be equal sized.)
I am getting this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
</style>
</head>
<body>
<h2>Style Social Media Buttons</h2>
<!-- Add font awesome icons -->
</body>
</html>
output-preview:
this same script if i run in codepen it is giving same problem
Currently, I'm working on a basic navigation bar that changes the color of the text when clicked to go to a new page (So text on one page is a different color than text on another). I started the project ultimately using multiple CSS files to get the result I am looking for but it is horrendously inefficient. Obviously "if" statements don't exist in CSS but are there a way to call on an action if a certain page is loaded.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Project</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="navigation">
<ul>
<li class="login">Login</li>
<li class="shop">Shop</li>
<li class="wname">Website Name</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
</div>
</div>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
.header {
text-align: center;
width: 100%;
}
li {
color: rgba(102, 102, 102, .5);
padding: 20px;
margin: 20px;
font-size: 16px;
font-family: "Open Sans Condensed", sans-serif ;
text-transform: uppercase;
display: inline-block;
}
.wname {
font-size: 32px;
color: #F68404;
font-weight: 200;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:active {
color: #F68404;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:hover {
color: #F68404;
font-weight: 300;
}
/*.jumbotron {
background: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg") no-repeat top center;
background-size: cover;
height: 800px;
}
.main {
color: rgb(102, 102, 102);
font-family: "Open Sans Condensed", sans-serif;
text-align: center;
}
.btn-main {
font-size: 32px;
padding: 10px;
border: solid 1px #000;
background-color: aliceblue;
color: #000;
border-radius: 10%;
}
.btn-main:hover {
color: aliceblue;
background-color: #000;
border: solid 1px aliceblue;
}*/
/*Class Rules for all anchors/hyperlinks*/
a {
text-decoration: none;
color: inherit;
}
I would appreciate any help,
Jordan
Change this rule to add an active class as well:
li.active,
li:hover {
color: #F68404;
font-weight: 300;
}
And in your individual pages, use the class for the <li>. Let's say, in the Shop page, use this code:
<li class="shop active">Shop</li>
This is because, you aren't using anything that checks the location and does stuff. Also, you aren't using any back end applications, which generate dynamic header, based on the URL.
I styled this button with CSS and the style doesn't seem to be applied to the button. Links to websites. http://randomstufffrommybrain.neocities.org/TheRandomPage.html
The HTML:
<head>
<link rel="stylesheet" href=CSSFORTherandompage.css>
</head>
<div id="Button5">
<button><a href=Newsitetestcode/Newwebsitemainpage.html>New website</a>
</button>
</div>
The CSS:
#Button5 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
The style does not appear on button because you have added style on the div#Button5 but not button.
Apply this change in css
button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
JSFIDDLE
All <link> tags should go inside the <head>
Make sure you have your external CSS in the same folder as your HTML, as indicated in your link tag. If it is in another folder, give the appropriate path.
For further debugging, you can employ some JS:
function sheetLoaded() {
// Do something interesting; the sheet has been loaded
}
function sheetError() {
alert("An error occurred loading the stylesheet!");
}
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
You need to put the link tag in the head section of your HTML file.
Note: This element goes only in the head section, but it can appear any number of times.
Reference