How set text-decoration to none in react of the link child text?
In my case this text with the 'preview-title' and 'preview-slogan' class.
I tried set it in app.css
.preview-title, .preview-slogan {
text-decoration: none;
}
As well i did that to a tag in index.css
a {
text-decoration: none;
}
Also attempted textDecorationStyle
to the element
<div className='preview-title' textDecorationStyle="none">
But that doesnt work too
In devtool we see the style is applied through .css but at the page it still with underline
Please try the below-given CSS code hope it will help you. You have to set !important because you are trying to override the pre-defined style of the particular element.
.preview-title{
text-decoration: none !important;
}
Hope it will help you in solving your issue.
Thanks.
Found out, it must be placed text-decoration: none in app.css, not in index.css.
Related
I created a div with "commonDiv" id (example), then is create multiple divs inside it, div, div in divs etc. All divs contains button(s). I want to add a common style for the buttons. I'd like to add a css only one settings for it.
I tried the following but it's not worked:
div#commonDiv .button{
background-color: #4CAF50;
border: none;
color: white;
}
What's the right way?
Well the best way is mentioning class for all of your <div>s and then adding style in the CSS code using your class.
.your_class_name {write any style you want for all of them !}
Try it this way:
div#commonDiv button{
background-color: #4CAF50;
border: none;
color: white;
}
I removed the period before .button.
The rules you declared didn't match the <button> tag but any element that has class "button"...
If it doesn't solve your issue feel free to leave a comment.
You can see a very good document about CSS selectors here. And if your buttons have not any class may be this code fix your problem:
div#commonDiv button{
...
}
I figured out the solution which is the following: div#commonDiv input[type=button]
I cant change the colour of navbar elements elements when working with bootstrap. Every other style like font size, font weight etc works but the colour doesn't change. I've tried to style the hyperlinks within the list elements too but it doesn't change anything. Every other style seems to be working fine. It worked when I changed it in the actual bootstrap.css file but that was a little inconvenient finding that particular line of code first and then changing it the style for it. It looks like my custom css fails to override the default bootstrap css when it comes to changing the colour property in navbar. Any idea why? Thanks
Here's the code:
.nav li {
color: red;
}
Just check in your Head tag; that you have mentioned your main css file after bootstrap link.
Might be this will be the one case.
Else post your code ; i will figure out the problem.
tyr this way
.navbar-default .navbar-nav > li > a{
color:red
}
Try this :
.navbar-nav>li>a{
color:red;
}
or this
.navbar-default .navbar-nav>li>a{
color:red;
}
Try changing the code to:
.nav li {
color: red !important;
}
I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
I'm working on a website: http://www.allaboutwinecellars.com
And on one of the galleries (the Accesory page) there are blue lines between the pictures and I don't know why, the layout is exactly the same as the first page.
Can anyone figure out why those lines are there?
Here is the first page (the correct one): http://allaboutwinecellars.com/gallery.html
Here is the second page (the one with blue lines): http://allaboutwinecellars.com/gallery-2.html
Edit: I tried adding outline:none; to my anchor tag CSS rules and it did not fix the problem.
The issue is your anchor tags. You need to explicitly set the text-decoration property. The line that you're seeing is the blue underline representing a hyperlink. It looks like you already have properties defined that alter anchor's behavior. Simply add to it:
a {
text-decoration: none;
outline: none;
}
a { text-decoration: none; }
should fix it
Try this:
a, img{
border:0px;
outline:0px;
}
add this to your css:
#content p a
{
color:#000;
}
It's actually a blue underline.
Use text-decoration: none;.
How to get a link not underlined in HTML?
It can be done in following ways:
1) If you want to remove underline from specific link, then use
Some text
2) To remove the underline from entire html page, Create a .css file, In that write following:
a { text-decoration: none; }
It will suppress underline from every anchor tag.
Just guessing at what your next question would be....
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
As everyone above said, but I wouldn't use inline styles.
Rather set a class for all links that you do not wish to have underlined.
Your link
CSS:
a.nolines{text-decoration:none;}
You'll probably want to do that in CSS.
a {
text-decoration: none;
}
Or, as an inline style:
link
for one link, use style="text-decoration:none"
if you want it for the whole site:
<style> a { text-decoration:none; } </style>
Using CSS. The property you need to set is text-decoration: none;