I currently have the following code:
<html>
<head>
<style>
.gr {
color: "#ffffff";
background: "#00ff00";
border-radius: 8px 0 0 15px;
}
.or {
color: "#00ff00";
background: "#ffa500";
border-radius: 0 15px 8px 0;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>
But the classes aren't having any effect at all. It remains this way even if I call an external stylesheet. But, if I do <span style="color:#ffffff;background:#00ff00;border-radius:8px 0 0 15px"> then it works. Can anyone help me with this?
you need to take away the quotes around the hex codes.
and change background to background-color (EDIT: I guess technically you don't need to it's more of a preference really)
fiddle here:
http://jsfiddle.net/zy8yq6rj/
You need remove the quotes in your css.
.gr {
color: #ffffff;
background: #00ff00;
border-radius: 8px 0 0 15px;
}
.or {
color: #00ff00;
background: #ffa500;
border-radius: 0 15px 8px 0;
}
Working jsfiddle here http://jsfiddle.net/u36k17v6/1/
It seems you have another CSS file that is overriding your config.
When you make a style="" inside a DOM object, it is the most important rule to follow. There you have a little explanation about that things.
Then add to your CSS code !important to make them the first to check:
<html>
<head>
<style>
.gr {
color: #ffffff !important;
background: #00ff00 !important;
border-radius: 8px 0 0 15px !important;
}
.or {
color: #00ff00 !important;
background: #ffa500 !important;
border-radius: 0 15px 8px 0 !important;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>
You can check the rules applying to the DOM object, for example in chrome, clickng second button on mouse over the desired object to check, and choose Inspect Element. On the Styles panel you´ll be able to see the rules aplying to this object, and the file they are coming from.
Hope it helps!!
Regards!
EDIT
I did´nt realize about the "" in the color and background !! Sorry!! Anyways I´m living the answer here. Thanks a lot to #deebs for the semicolon must go after the !important advice. will check better next time!!
When specifying a color in CSS, you need to use the background-color tag.
Also, you don't need to add quotations when specifying a HEX code.
So, your code should be:
<html>
<head>
<style>
.gr {
color: #ffffff; !important
background-color: #00ff00; !important
border-radius: 8px 0 0 15px; !important
}
.or {
color: #00ff00; !important
background-color: #ffa500; !important
border-radius: 0 15px 8px 0; !important
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>
Welcome to the world of CSS!
Here's some light reading for you:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
Also, as a go-to reference for all things CSS, I go to the MDN:
https://developer.mozilla.org/en-US/
Related
Any ideas on how i can execute this?
button {
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);}
i have tried to add "body .contact button" to let css file know it is the contact us page i am editing but it wont work it only goes to change the style on my other pages aswell so essentially.
body .contact button {
background:
but this doesnt work, any ideas how i can change the style of this button without affecting the others in my css file?
The .contact does not mean the contact page but instead refers to a class called contact.
You could give each of the buttons a different class for example if you wanted one to be red and the other blue:
HTML page 1:
<button class="button-red">This is a red button</button
HTML page 2:
<button class="button-blue">This is a red button</button
CSS file:
.button-red {
background-color: red;
}
.button-blue {
background-color: blue;
}
Just change the colours to your own styling.
Hope this helps.
You really need to search online for 'CSS selectors' and learn how and why to use them.
An example: create CSS rules that are true for all button and create exceptions to those rules using specific selectors. E.g. all buttons are green, except a contact button is red.
The generic rules can be put in a separate CSS file and <link>ed in a document. Create the specific rules in-document with a <style> block to override/modify/add to the linked generic rules.
There are many alternative ways to solve your issue, this is just one of them...
Tip: CSS rules are nothing more than an eleborate list of logical statements varying from easy to virtually unexplicable selectors to modify the style of your document:
if selector,
list-of-selectors,
very-special-selectors
what-does-this-one-do?!?-selector then { property: value }
example
/* put this in an external CSS file */
button { background-color: green }
/* put this in a <style> block */
button.contact { background-color: red }
<button>generic 1</button>
<button>generic 2</button>
<button>generic 3</button>
<br>
<button class="contact">contact</button>
Suppose we have a button
<button> your text </button>
and we ave to use this CSS/style
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
so, we will add a id to button like
<button id="contact-btn"> your text </button>
and then add style using id selector
#contact-btn{
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}
it will work thanks
When I created some code, I noticed something strange. The DOWNLOAD button touches the end of the left wall, there is no gap (500% zoom). But when I decrease the zoom from 500% to 250%, a piece of background appears (green color). Watch the video on which I show it. Below is the source code from the video. Is this a browser rendering bug or my code is bugged?
Windows 10, 10.0.18362, 64-bits
Google Chrome, 75.0.3770.100, 64-bits
video: https://youtu.be/uwAEixLBUeU
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; border: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 1em; line-height: 1.2; color: #222; }
html { background: #bbb; }
body { width: 1000px; margin: 0 auto; background: #fff; }
a { text-decoration: none; }
.modelerInputReport {
overflow: hidden;
padding: 5px;
}
.modelerInputReportDiv {
float: right;
}
.modelerInputReportDiv span {
display: inline-block;
}
.modelerInputReportDiv button {
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
.modelerInputReportDiv button:hover {
border: 1px solid #1B273F;
}
.modelerInputReportDiv button:active {
background: #cc7600;
border: 1px solid #402400;
box-shadow: inset 0 0 10px 2px #402400;
}
</style>
</head>
<body>
<div class="modelerInputReport">
<div class="modelerInputReportDiv">
<span id="modelerInputReportMsg">(generate to unlock) -</span>
<span>Report:</span>
<button id="modelerInputReportPrint" class="modelerInputReportPrint">PRINT</button>
<button id="modelerInputReportDownload" class="modelerInputReportDownload">DOWNLOAD</button>
</div>
</div>
</body>
</html>
In my experience this sort of thing is a rendering 'quirk', rather than a 'bug' per se. When you change the zoom level of a document, you're asking the browser to scale your '1px' border to a different number of pixels wide. Sometimes this doesn't equal a whole number of pixels, so the browser needs to do something to account for that. That something might be anti-aliasing, rounding widths to the nearest pixel, etc. This sort of thing needs to happen whenever you have anything that's not a whole number of pixels on screen. It's one of those things that happens at high-zoom levels, and in most cases it's not a big enough problem to worry about.
If it is a problem in your case, you can try doing things to minimise the effect, for example:
Use non-pixel measurements border: 0.1rem solid #CCC
Adjust the way the background is drawn: for example, include spacer elements between your buttons, and background color them, leaving the containing element background the same color as its border.
Experiment with small margin, transform or position adjustments (0.5px - 1px) to nudge the element slightly over the border.
These are all indirect ways of tricking the browser's renderer into doing something that's better for your specific case, and I'm not sure any of these will actually work. They might have undesirable side effects in other OS's and browsers, too.
TL:DR - It's the browser, and don't worry about it unless you really need to!
this is display:inline-block; issue because of inline-block use some spacing
Use float: left instead of display: inline-block,
Use this css
.modelerInputReportDiv span {
float:left;
}
.modelerInputReportDiv button {
float:left;
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
I have been struggling with this for a few days and cannot work out the answer:
I am trying to simply change the background of a box when on hover. I have managed to do this for the text but the rest of the box does not change.
The link to the problem can be seen here
Here is the current code I have:
HTML
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="spanish.css"
media="all and (min-width: 1300px)" />
<div class="pricebox1">
Conversational Spanish
</div>
</body>
</html>
CSS
.pricebox1 {
background-color: lightgrey;
width: 300px;
padding: 5px;
margin: 25px 0 0 400px;
text-align: center;
font-size: 1.5em;
}
.pricebox1 :hover {
background: #ffffff;
color: red;
What am I doing wrong?
Your code .pricebox1 :hover doesn't select the :hover state of the .pricebox1. It point to the :hover state of the children of the .pricebox1. Therefore, it doesn't change the box color.
If you want the hover state of a child change the background of the parent, it is not possible, as "Cascading Style Sheets only supports styling in cascading direction, not up"
So, you can use .pricebox1:hover to change the pricebox1 background color and .pricebox1:hover a to update styles of the a inside.
You can use a workaround solution for it here
Otherwise, you need to use Javascript to update the style of the parent when the child is hover, not only by css
Avoid the space in .pricebox1 :hover - make it .pricebox1:hover to change the background for .pricebox1 on hover.
You'll have to create a separate a:hover rule for the link then to change the text color.
This? In the .pricebox1 :hover {} is not background but background-color
.pricebox1 {
background-color: lightgrey;
width: 300px;
padding: 5px;
margin: 25px 0 0 400px;
text-align: center;
font-size: 1.5em;
}
.pricebox1:hover {
background-color: white;
color: red;
}
<div class="pricebox1">
Conversational Spanish
</div>
And if you want to change the color of the text at the same time, simply do:
.pricebox1 > a:hover{
color: red;
}
.pricebox1 {
background-color: lightgrey;
width: 300px;
padding: 5px;
margin: 25px 0 0 400px;
text-align: center;
font-size: 1.5em;
}
.pricebox1:hover {
background-color: white;
}
.pricebox1 > a:hover{
color: red;
}
<div class="pricebox1">
Conversational Spanish
</div>
From my end, the code is working fine. The only thing you need to change is the anchor inside .pricebox1 since have got default styling.e.g.
.pricebox1 a:hover{
color: red;
}
Since you can underline any text in CSS like so:
h4 {
text-decoration: underline;
}
How can you also then edit the 'line' that is drawn, the color you get on the line is easily specified as color: red but how does one edit the height of the line, i.e. the thickness?
Here is one way of achieving this :
HTML :
<h4>This is a heading</h4>
<h4><u>This is another heading</u></h4>
CSS :
u {
text-decoration: none;
border-bottom: 10px solid black;
}
Here is an example: http://jsfiddle.net/AQ9rL/
Recently I had to deal with FF which underlines were too thick and too far from the text in FF, and found a better way to deal with it using a pair of box-shadows:
.custom-underline{
box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}
First shadow is put on top of the second one and that's how you can control the second one by varying the 'px' value of both.
Plus: various colors, thickness and underline position
Minus: can not use on non-solid backgrounds
Here I made couple of examples:
http://jsfiddle.net/xsL6rktx/
There is text-decoration-thickness, currently part of CSS Text Decoration Module Level 4. It's at "Editor's Draft" stage - so it's a work in progress and subject to change. As of October 2022, it has about 93% coverage so it's pretty safe to use.
The text-decoration-thickness CSS property sets the thickness, or
width, of the decoration line that is used on text in an element, such
as a line-through, underline, or overline.
a {
text-decoration-thickness: 2px;
}
Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (Firefox only)
There's also text-decoration-color, which is part of CSS Text Decoration Module Level 3. This is more mature (Candidate Recommendation) and is supported in most major browsers (exceptions are Edge and IE). Of course it can't be used to alter the thickness of the line, but can be used to achieve a more "muted" underline (also shown in the codepen).
Very easy ... outside "span" element with small font and underline, and inside "font" element with bigger font size.
<span style="font-size:1em;text-decoration:underline;">
<span style="font-size:1.5em;">
Text with big font size and thin underline
</span>
</span>
Another way to do this is using ":after" (pseudo-element) on the element you want to underline.
h2 {
position:relative;
display:inline-block;
font-weight:700;
font-family:arial,sans-serif;
text-transform:uppercase;
font-size:3em;
}
h2:after {
content:"";
position:absolute;
left:0;
bottom:0;
right:0;
margin:auto;
background:#000;
height:1px;
}
I will do something simple like :
.thickness-underline {
display: inline-block;
text-decoration: none;
border-bottom: 1px solid black;
margin-bottom: -1px;
}
You can use line-height or padding-bottom to set possition between them
You can use display: inline in some case
Demo : http://jsfiddle.net/5580pqe8/
The background-image can also be used to create an underline. This method handles line breaks.
It has to be shifted down via background-position and repeated horizontally. The line width can be adjusted to some degree using background-size (the background is limited to the content box of the element).
.underline
{
--color: green;
font-size: 40px;
background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
background-repeat: repeat-x;
background-position: 0 1.05em;
background-size: 2px 5px;
}
<span class="underline">
Underlined<br/>
Text
</span>
a {
text-decoration: none;
position: relative;
}
a.underline {
text-decoration: underline;
}
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
<h1>Default: some text alpha gamma<br>the quick brown fox</h1>
<p>Working:</p>
<h1>Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</h1>
<br>
Final Solution:
http://codepen.io/vikrant-icd/pen/gwNqoM
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
Thanks to the magic of new css options this is now possible natively:
a {
text-decoration: underline;
text-decoration-thickness: 5px;
text-decoration-skip-ink: auto;
text-underline-offset: 3px;
}
As of yet support is relatively poor. But it'll land in other browsers than ff eventually.
My Solution :
https://codepen.io/SOLESHOE/pen/QqJXYj
{
display: inline-block;
border-bottom: 1px solid;
padding-bottom: 0;
line-height: 70%;
}
You can adjust underline position with line-height value, underline thickness and style with border-bottom.
Beware to disable default underline behavior if you want to underline an href.
Now, as can be seen in the picture below, the property is fully supported in most browsers (according to Mozilla).
So, you can use the following attributes:
.thin {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 1px;
}
.thick {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 5px;
}
.shorthand {
text-decoration: underline solid red 5px;
}
(example code from Mozilla).
I want the Tags tab to have the same background as the Search tab when the mouse is over it, how do I do this?
I have the search tab already with a background as a default but when going to click on Tags how can I get the same background that is on Search to appear behind Tags?
HTML:
<html>
<head>
<link href="arg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>
</body>
</html>
CSS:
.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}
.tab-mouseover {
background: #bdbdbd;
}
.tab-selected {
background: #c0c0c0;
}
Use the hover css pseudoclass
http://jsfiddle.net/mrtsherman/7FvR5/
tab-item:hover { background: #c0c0c0; }
unable to add a comment due to my low rep, but i wanted to say that right now what you're doing is just creating a class named "tab-mouseover" which has a background of #bdbdbd. If you apply this class to an element, it will just have a background of #bdbdbd. It doesn't actually mean it will change colors when you mouse over.
Please note that names of classes can be anything. However, in order to achieve the effect you want, you need to do what mrtsherman mentioned (except change the background color to: "#bdbdbd").