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
Related
So, I'm pretty newbie and don't really know how to do this.
I am trying to create a main menu with a few buttons. I used center, padding and margin. (Not really sure if matters). I just noticed that the button is center (obviously), but the clickable thing is on the whole line of the button:
(Don't look at the text, it's not in English). I can click that whole thing until the button. Even after, the whole line before and after the button is clickable.
How can I fix it?
.button {
border: solid;
border-color: darkblue;
font-family: sans-serif;
text-align: center;
text-decoration: none;
font-family: sans-serif;
display: inline-block;
font-size: 15px;
margin: 1px 1px;
border-radius: 10px;
background-color: rgba(90, 203, 255, 0.979);
border: none;
color: black;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
That's the button parameters and that's the button itself:
<a href="keks">
<center><button class="button">Кекс</button>
</center>
</a></tr>
The reason the whole line is clickable is that you have wrapped your <button> inside another clickable element <a href="keks">.
That is not allowed. Interactive elements (that have a click default behaviour) cannot contain other interactive elements.
Also note that HTML does not have an element <center>. The old center element has been marked obsolete and removed from the specification decades ago.
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
}
.button {
border: solid;
border-color: darkblue;
font-family: sans-serif;
text-align: center;
text-decoration: none;
font-family: sans-serif;
font-size: 15px;
margin: 1px 1px;
border-radius: 10px;
background-color: rgba(90, 203, 255, 0.979);
border: none;
color: black;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
</style>
</head>
<body>
Kekc
<!--OR-->
<button class="button" onclick="window.location.href=('kekc')">Кекс</button>
</body>
</html>
Just remove the center tag inside the anchor tag and place it outside the anchor tag.
<center>
<a href="keks" class="button">
Кекс
</a>
</center>
Since you are using the center tag inside the anchor tag is conisdering the whole area to be a clickable.
I have the following HTML Code
<!DOCTYPE html>
<html>
<head>
<style>
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
</style>
<div class="tag12"><span> Click here for more information. </span></div>
</html>
I am looking to change the color when this is element is hovered, and go to an external site when it is clicked. For the hover, I have tried doing .tag12:hover{}, and .tag12 span:hover{} within the style brackets but neither of these have changed the color on hover.
just read more about CSS Selectors, so you can achieve your aim,
anyway here is a snippet to show up how to change element style in hover,
also read more about href attribute to learn how to create links
goodluck.
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
.tag12 span:hover {
color: lightgreen;
}
<div class="tag12"><span> Click here for more information. </span></div>
<!DOCTYPE html>
<html>
<head>
<style>
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
.tag12 a:hover{
color:red;
}
</style>
<div class="tag12"><span>Click here for more information.</span></div>
</html>
To remove the underline globally.
a:link{
text-decoration: none;
}
or for the class
.tag12 a:link{
text-decoration: none;
}
Change the whole element
.tag12 span:hover{
background-color:green;
}
You can check something like this
You can read more about available style options and the CSS selector on w3shool its a great source for beginners, Happy read :)
<!DOCTYPE html>
<html>
<head>
<style>
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
/* Use somthing like this to change style of hover element itself*/
.tag12:hover{
background-color:blue;
}
/* Use somthing like this to change style of siblings on hover on parent*/
.tag12:hover a{
color:red;
}
</style>
<!-- to redirect user to another page on click you can use a tag insted of span and replace # in href with target url -->
<div class="tag12"> Click here for more information. </div>
</html>
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.
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
So i have created a horizontal navigation with a drop down menu, I've simply red what i saw and tried it myself. I've copied and pasted the html and css, I've changed the html in my lines of codes and it seems to work pretty well, now i would like to change the divs name to something more commun for mee since i am going to continue my html.
header {
border: 10px ridge blue
}
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="collegecss.css" />
<title>college sainte marie </title>
</head>
<script type="text/javascript" src="collegejvs.js"></script>
<body>
<header>
<img src="../saintemarie.png">
<h1>
<titre>Bienvenue dans le site du Lycée Sainte-Marie</titre>
<h1>
</header>
<nav>
<div class="container">
accueil
<div class="dropdown">
<button class="dropbtn">information générale</button>
<div class="dropdown-content">
inscription
historique
accéder au collège
horaires
règlement
tarifs
</div>
</div>
calendrier
visite
pastorale
vie du collège
</div>
</body>
</html>
i would like to change the div class : "container","dropdown","dropbtn" and "dropdown-container".And at the same time, it would change the css class name as well
any suggestion? i'm using notepad++ .
thank you in advance!
You can try ATOM or Sublime Text. its available for free download. Open your files in any of these Editors. make your selection-pattern with simple selection method and use "CTRL + D" to select similar text as selection-pattern in whole file. Multiple cursors will appear and you can change the text.
Or Simple FIND & REPLACE can be used if it is solving your problem.
#user5014677 said :
I don't think this has naything to do with SO x) Anyway just copy paste everything in notepad and CTRL+F>replace> write the class you want to replace and the name of the new class > replace ALL
and it is right ^^ thank you #user5014677