This question already has answers here:
Different Color Links on the Same HTML Page
(5 answers)
Closed last year.
I'm trying to apply CSS to this specific button, but it keeps cascading for all the buttons on the page. How do I make the style specific to this one button? I have no preference on what type of selector is used. Please help, I have 0.0 coding knowledge.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
Instead of doing this:
Buy Here
Use it as this:
<a id="buy_button" href="URL" target="_blank">Buy Here</a>
Then apply the CSS to that specific id like this:
#buy_button{
background-color: gray;}
This is a good example of a time where you can use an ID selector. You can do this by adding id="idValue" to your html element and target it with CSS using #idValue. Here's an example of how that'd look:
<html>
<head>
<style>
#customButton:link,
#customButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#customButton:hover,
#customButton:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
As mentioned in the comments, you can use the id - but there are maybe better ways to handle it.
<html>
<head>
<style>
#myButton:link,
#myButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#myButton:hover,
#myButton:active {
background-color: gray;
}
</style>
</head>
<body>
<a id="myButton" href="URL" target="_blank">Buy Here</a>
</body>
</html>
is this what you need?
a.btn:link,
a.btn:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.btn:hover,
a.btn:active {
background-color: gray;
}
Buy Here
<a class="btn" href="URL" target="_blank">Buy Here</a>
Related
<!DOCTYPE html>
<html>
<head>
<title>replit </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=""dropin">
<button class="dropdownbutton">dropdown button</button>
<div class="dropdownmenu">
List
List
List
List
</div>
</div>
</body>
</html>
css code:
.dropdownbutton{
background-color: blue;
color:white;
padding:13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropin{
position:relative;
display:inline;
}
.dropdownmenu{
display: none;
position: absolute;
background-color: orangered;
min-width: 150px;
}
.dropdownmenu a{
color: black;
padding: 11px 15px;
display: block;
text-decoration:none ;
}
.dropdownmenu a:hover {
background-color: aliceblue;
}
.dropin:hover .dropdownmenu{
display: block;
}
.dropin:hover .dropdownbutton{
background-color: grey;
}
I checked every single words and tags that I followed the process in YouTube by free code camp but it still does not work. This is the link to that YouTube video. (https://youtu.be/nu_pCVPKzTk?t=11602)
You have a typo in the class name, here's the working demo: https://codepen.io/dreambold/pen/eYjZejd
So it should be <div class="dropin">
I am trying to hyperlink two separate words which sit in either corner in the footer and I don't want any text decoration (underline or changing to blue). However I would like text to turn blue when I hover over.
My code below isn't right and I'm looking for this to be corrected.
Does anybody know the html code for this?
Thank you!!!
<head>
<style type="text/css">
.footer {
position: fixed;
text-align: left;
justify-content: space-between;
display: flex;
bottom: 10px;
width: 100%;
font-family:Helvetica, sans-serif;
Font-size: 30px;
letter-spacing:0em;
line-height:1.1em;
color:#0000FF;
padding:1em;
}
.footer span a {
color: black;
text-decoration: none;
}
</style>
</head>
<div class="footer">
<span><a href="https://www.blank-site.com/Profile">NAME</span>
<span><a href="https://www.blank-site.com/Work">WORK</span>
</div>
</style></a></a>
I want both words 'NAME' (left corner) and 'WORK' (right corner) to link to separate pages and turn blue when you hover over but black when inactive and without the underline.
Try this:
<head>
<style type="text/css">
.footer {
position: fixed;
text-align: left;
justify-content: space-between;
display: flex;
bottom: 10px;
width: 100%;
font-family:Helvetica, sans-serif;
Font-size: 30px;
letter-spacing:0em;
line-height:1.1em;
color:#0000FF;
padding:1em;
}
.footer span a {
color: black;
text-decoration: none;
}
.footer span a:hover {
color: blue;
text-decoration: none;
}
.footer-item-1{
float: left; }
.footer-item-2{
float: right;
color:black;
text-decoration: none;}
.footer-item-2:hover {
color: blue;
}
</style>
</head>
<div class="footer">
<span><a class="footer-item-1" href="https://www.blank-site.com/Profile">NAME</span>
<span><a class="footer-item-2" href="https://www.blank-site.com/Work">WORK</span>
</div>
</style></a></a>
We can take NAME and WORK and float them to the left and right.
Also, text-align: left for the footer class would be unnecessary so I'd remove it, unless you are going to add more text to the footer.
And if you aren't planning on adding more hyperlinks to your footer that have color, the selector for span in ".footer span a" is mostly unnecessary.
Also, you have to open and close tags in the correct order and remember to use and correctly, this is what would cause the most errors.
<!DOCTYPE html>
<head>
<title>HTML is not a real language.</title>
<style type="text/css">
.footer {
position: fixed;
justify-content: space-between;
display: flex;
bottom: 10px;
width: 100%;
font-family:Helvetica, sans-serif;
font-size: 30px;
letter-spacing:0em;
line-height:1.1em;
color:#0000FF;
padding:1em;
}
.name-left {
float: left;
}
.work-right {
float: right;
}
.footer a {
color: black;
text-decoration: none;
}
.footer a:hover {
color: blue;
}
</style>
</head>
<body>
<div class="footer">
<span class="name-left">NAME</span>
<span class="work-right">WORK</span>
</div>
</body>
</html>
<!--Tip on Opening and Closing Tags: <p><span>Text</p></span> is incorrect and <p><span>Text</span></p>
would be correct. Also, remember to use <html> and <body> and <style> correctly. (You had a style tag all the way down here.) Please proofread your code. EDIT: Irony 100-->
I am trying to make a program that will make a button for every file in a directory.
They need to go equally on both the red lines on this image.
This is my code
<!DOCTYPE html>
<head>
<title>Games</title>
<style>
html, body {
background-color: #000000;
}
.text {
background-color: #000000;
font-size: 100%;
color: #00ff00;
padding: 10px;
}
a {text-decoration: none;}
.button {
padding: 15px 25px;
position: absolute;
top: 770px;
left: 45%;
font-size: 50px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
</style>
</head>
<body>
<div style="text-align:center;">
<h1 class="text" style="font-size:300%;">Thing</h1>
<img src="logo.png" alt="logo" width="600" height="600">
</div>
</body>
Any help would really be appreciated.
reddit.com/r/domyhomework
In all seriousness though, you need to provide more information. What sort of language are you working with besides HTML and CSS?
Obviously, your first step will be generating a list of the files in your directory. I don't know if these files are server side or client side, but here is a good place to start:
Get list of filenames in folder with Javascript
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
I have the following code :
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.nodecor
{
text-decoration: none;
}
.strowb1
{
width: 150px;
height: 35px;
background-color: #1F375F;
text-align: center;
color: #999999;
font-family: calibri;
font-weight: bold;
font-size: 110%;
display: block;
}
.fullcell
{
height: 100%;
width: 100%;
color: #999999;
}
</style>
</head>
<body>
<table>
<tr>
<td class="strowb1">
<a class="nodecor" href="#">
<div class="fullcell">Watch</div>
</a>
</td>
</tr>
</table>
</body>
</html>
When executed, "Watch" has a very persistent underline on hover. Setting text-decoration: none does not seem to remove it.
I have tried setting text-decoration to none on the table, tr, td and div as well.
Please suggest ideas to do so.
Note: Removing the link to bootstrap css does remove the underline, but I need it in other areas of the code.
You should increase specificity of your rule because bootstrap targets a:hover and takes precedence. Another option is to put a same specific rule after bootstrap one. If two declarations have the same weight, origin and specificity, the latter specified wins.
.nodecor:hover {
text-decoration: none;
}
.strowb1 {
width: 150px;
height: 35px;
background-color: #1F375F;
text-align: center;
color: #999999;
font-family: calibri;
font-weight: bold;
font-size: 110%;
display: block;
}
.fullcell {
height: 100%;
width: 100%;
color: #999999;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table>
<tr>
<td class="strowb1">
<a class="nodecor" href="#">
<div class="fullcell">Watch</div>
</a>
</td>
</tr>
</table>
Reference: MDN - Specificity - w3.org - Cascading order
Try this:
<style>
a{
text-decoration:none;
}
a:hover
{
text-decoration: none;
}
<style>
Setting text-decoration to div, and other table specific tag is not useful. This property is specifically defined for anchor <a> tag.
See, if that helps.
add also
.nodecor:hover
{
text-decoration: none;
}
a:hover, a:active, a:focus use also this style if you check with Developer Tools(google chrome) you will see that.
Overwriting a:hover not enough.
.nodecor:hover,
.nodecor:active,
.nodecor:focus {
text-decoration: none;
}
It is probably not removing it because it is under fullcell. Try
.nodecor .fullcell {
text-dcoration:none;
}
It will remove line on hover:
a:hover
{
text-decoration: none;
}
Use this css
.strowb1 a:hover {
text-decoration: none;
}