Below is the code in which I tried using text-decoration:none. However, text is always underlined.
<html>
<head>
<style type="text/css">
.search, .search_b1, .search_b2{
display: block;
color: #000;
text-decoration: none;
}
.search_b1:hover {
color: red;
}
</style>
</head>
<body>
<div id="left">
<a href = "#">
<span class="search">
<span class="search_b1">Text text</span>
<span class="search_b2">Text text</span>
</span>
</a>
</div>
</body>
</html>
You set the span element to a block element.
Block elements can not have text-decoration. Only inline elements can.
You need to apply the text-decoration to the anchor elements.
Related
I have this HTML
<html>
<head>
<style>
.text-box {
color: red;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div style="color: blue;">
<p class="text-box">Hello</p>
</div>
</body>
</html>
that produces
The second paragraph works as expected because the paragraph element does not have a font-weight style to be overridden.
Is there a way to override the CSS priority order so the class on the third paragraph is overwritten by the style defined in the container div so that the text is blue?
you're actually asking if you can override a CSS rule.
obviously the answer is NO.
CSS thinks in a correct way in my opinion, i.e. you can set rules on containers, but at the same time you can set them on children.
the priority states that the rules on children win over fathers, so if you don't need the CSS rule on the child, why set it?
Your goal with this code:
<html>
<head>
<style>
.text-box {
color: red;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div style="color: blue;">
<p >Hello</p>
</div>
</body>
</html>
You can give class to parent div and target the 3rd paragraph to give the color blue
<html>
<head>
<style>
.text-box {
color: red;
}
.text-boxDiv .text-box{
color: blue;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div class="text-boxDiv">
<p class="text-box">Hello</p>
</div>
</body>
</html>
<div>
<p class="text-box" style="color:blue;">Hello</p>
</div>
You will have to directly give the color property to the p tag inside your div tag
Or you could add a class to the div and do something like this:-
/* CSS */
.myDiv > p {
color: blue;
}
In my website, I have a div with some content in it, which links to another part of the page. The code is shown here with placeholders for the actual content. When the div is clicked, the page does scroll as intended, but I want the entire div to darken on hover, so it is more clear to the user. I am not completely sure how to do this with divs in CSS. How could I do this?
<a href="#testing">
<div class="w3-third">
<img src="media\[image]" width="171" height="80">
<h1>
[title]
</h1>
<h3>
[item]<br>
[item]<br>
[item]
</h3>
</div>
</a>
<!DOCTYPE html>
<html>
<head>
<style>
#darkOnHover:hover {
background-color: #383838 ;
}
</style>
</head>
<body>
<a href="#testing">
<div class="w3-third" id="darkOnHover">
<img src="media\[image]" width="171" height="80">
<h1>
[title]
</h1>
<h3>
[item]<br>
[item]<br>
[item]
</h3>
</div>
</a>
</body>
</html>
You have a space in the hover selector. This matters because the space is the descendant selector in CSS
div.w3-third :hover{
background-color: #E3E3E3;
}
This means that only hovered descendants of .w3-third are affected by the rules. Remove the space.
check the example fiddle
You can use the filter property https://developer.mozilla.org/en-US/docs/Web/CSS/filter
div.w3-third:hover {
filter:brightness(50%);
}
<!DOCTYPE html>
<html>
<head>
<style>
.w3-third {
background: #216efc;
}
div.w3-third:hover {
filter: brightness(50%);
}
</style>
</head>
<body>
<a href="#testing">
<div class="w3-third">
<img src="media\[image]" width="171" height="80">
<h1>
[title]
</h1>
<h3>
[item]<br> [item]
<br> [item]
</h3>
</div>
</a>
</body>
</html>
use :visited CSS pseudo-class -> https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
a:visited > div:hover {
filter:brightness(50%);
}
I am trying to add a new line between the btn and the txtbox but nothing worked. I tried , and \n
It is shown as:
My code:
<td>
<div>
<a class="btn btn-default pull-left" style="color: inherit" id="btn">my button</a>
</div>
<div>
<input id="mytxt" >
</div>
</td>
This being HTML, your best bet is to either add some CSS to increase the margin/padding on either the bottom of your first div or the top of the second one. Alternatively, you could add an empty div in between and apply your styles to that.
Just add css padding style in the head:
<head>
<title>Page Title</title>
<style>
#btn-div {
padding-bottom: 20px;
}
</style>
</head>
<body>
<td>
<div id="btn-div">
<a class="btn btn-default pull-left" style="color: inherit" id="btn">my
button</a>
</div>
<div>
<input id="mytxt" >
</div>
</td>
</body>
You can try inserting between code.
<p> </p>
Also, you can try
<br />
And my favorite, make a CSS file
<html>
<head>
<style>
.gap-10 {
width:100%;
height:10px;
}
.gap-20 {
width:100%;
height:20px;
}
.gap-30 {
width:100%;
height:30px;
}
</style>
</head>
<body>
<!-- this div will give a gap of 10px -->
<div class="gap-10"></div>
<!-- this div will give a gap of 20px -->
<div class="gap-20"></div>
<!-- this div will give a gap of 30px -->
<div class="gap-30"></div>
</body>
I hope it helps
I would like to render text vertically one by one using CSS. If using rotation method, we can get like below,
But I am expected to render the text like below,
Could anybody tell me your suggestion on this?
Note: I am setting this text using 'content:attr(data-content)' in CSS and data-content is "HELLO".
You can break each character of content:attr(data-content) like following way:
.test::after {
content: attr(data-content);
font-size: 25px;
}
.test {
width: 0;
word-break: break-all;
}
<div class="test" data-content="Hello"></div>
How about this:
h1 span { display: block; }
<h1>
<span> H </span>
<span> E </span>
<span> L </span>
<span> L </span>
<span> O </span>
</h1>
or you can try like this using word-wrap: break-word;:
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
<h1> HELLO </h1>
Try using this with simple HTML instead of with CSS
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U </span>
<span> T </span>
<span> S </span>
</h1>
</body>
</html>
I have header in such a way that I would like to hide my image and span's in my pheader div if "banner" exists. Is there a quick way to do this using CSS selectors? Below is the HTML code.
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="../images/defaultHeadshot_lg.png" class="userimg">
<!-- Hide This -->
<span class="caret" id="down-arrow"></span>
<span class="hey-user d2c-header-username"><b>Hello</span>
</div>
</header>
Yes.
#banner + .pheader img,
#banner + .pheader span {
display:none;
}
This selector only applies if .pheader is directly after #banner.
You might find this Tutsplus article useful:
The 30 CSS Selectors You Must Memorize
.pheader {
padding: 1em;
background: lightblue;
}
#banner + .pheader img,
#banner + .pheader span {
display: none;
}
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="http://lorempixel.com/output/animals-q-c-100-100-3.jpg" class="userimg" />
<span class="caret" id="down-arrow">Arrow</span>
<span class="hey-user d2c-header-username"><b>Hello</b></span>
</div>
</div>
</div>
</header>
It's probably worth noting that I've had to close a few divs in your original HTML structure which were missing from your code.
Try this. Link https://jsfiddle.net/7bv53xqd/
#banner + .pheader img {
display: none;
}
#banner + .pheader span {
display: none;
}