I am new to CSS !
I would like to overwrite a span style using external CSS. Any suggestions?
!important did not work for me.
Sample code below.
<div class="abc" id= "xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span> </div>
basically I would like to overwrite the #009530 for the text using a external css.
I tried like below external css. It did not work for me.
#xy {
color: blue !important;
}
TIA
Use following css:
#xy span{
color: blue !important;
}
<div class="abc" id="xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
</div>
<span id="xy" style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
css
#xy
{
color: blue !important;
}
Related
I have a movie card where the content is dynamic. I'm trying to select the first child DIV of the left-side-bar, however, since the content is dynamically generated, the background-color is changed to all divs.
#left-side-bar div:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
The :first-child selector is intended, like the name says, to select the first child of a parent tag.
But in your example there is a tag as a parent element on the div. So if you apply nth-of-type to it, you will solve your problem. So this example will work as follows.
#left-side-bar a:nth-of-type(1) .card-sb {
background:red;
}
#left-side-bar .card-sb:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
Add an Id to your div, then refer to it to change the attribute of that specific element.
<div class="card-sb" id="CardSb">
then refer to it in your style sheet:
#CardSb {background-color: #e50914}
or try this:
/* Selects every first element among any group of siblings */
#left-side-bar a:nth-child(1n) {color: #e50914;}
I want to increase C and I . I also use ::first-text{}. It works Now, how can i increase I.
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
</style>
<span class="a">Creating</span> <span>and</span> <span>Implementing</span>
</p>
</center>
Its very simple, You have to change you p tags like
<p>
<span class="highlight-first-letter"><b style="font-size:20px;">C</b>reating</span> <span>and</span> <span class="highlight-first-letter"><b style="font-size:20px;">I</b>mplementing</span>
</p>
your output is look like
I'm not sure about first-text, but first-letter should work for the C.
For the I, you would have to wrap it in a span and give it a class unfortunately.
https://caniuse.com/#feat=css-first-letter
--Update--
I'm not sure if you aware, but style tags are not 'scoped'. This means that all <p> tags will have their first letters increased, is this what you want?
Also, the center tag is deprecated and should not be used.
<style>
p{
text-align: center;
font-size: 32px;
color: #424242;
margin-top: 15px;
font-family:Rockwell;
}
.highlight-first-letter::first-letter{
font-size:40px;
display: inline-block;
}
</style>
<p>
<span class="highlight-first-letter">Creating</span> <span>and</span> <span class="highlight-first-letter">Implementing</span>
</p>
i have done it with jquery it can be achieved also in javascript bydocument.getelementbyid
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=o>c js isj kl</div>
<script>
var txt = $('#o').text();
var new_text = txt.replace(/i/gi, 'I') ;
$('#o').text(new_text.replace(/c/gi,'C'));
</script>
after your update i havev found that in css
introduce span in between your text
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
.l::first-letter{
font-size:40px
}
</style>
<span class="a">Creating</span> <span>and</span> <span class=l>Implementing</span>
</p>
</center>
I want to have the same size for 3 containers defined as follows:
<div class="workingItemContainer">
<div id="workingItemContainer" runat="server">
<a class="workingItem" runat="server" id="workingQuoteAnchor">
<%=quoteNumberAnchor%>
</a>
<br />
<a class="workingItem" runat="server" id="workingPOMAnchor">
<%=pomNumberAnchor%>
</a>
<a class="workingItem" runat="server" id="workingProdCancelAnchor">
<%=prodCancelNumberAnchor%>
</a>
</div>
</div>
This is the code the code in css that implements the background and the font:
.workingItemContainer {
text-align: center;
}
.workingItemContainer div {
display: inline-block;
background-color: #ff9900;
}
If I display the workingQuoteAnchor, it shows differently from the others.
Maybe try removing the <br> tag that is after the #workingQuoteAnchor . That is most probably creating the extra space. Also if you need any spaces do that using CSS instead of changing the DOM for such cosmetic purpose.
I added : max-width in
.workingItemContainer div {
display: inline-block;
background-color: #ff9900;
}
and solved the problem.
Currently the HTML looks like this:
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p><a class="email" href="mailto:your-email#your-domain.com" style="color: #ffffff; hover:#006b33">sales#higherpromos.com</a></p>
</div>
and my CSS looks like this:
.col-lg-4 text-center a.email:hover {
color: #006b33;
}
I can't figure out what I'm doing wrong? Any suggestions?
To change the hover color you will have to change it in a CSS-Style that is correct. But to apply it to only one special element you need to create a special class or map it to an id. Note that you must declare the standard color in CSS as well otherwise it won't work.
By Class:
.email {
color: #ffffff;
}
.specialColor:hover {
color: #006b33;
}
<a class="email specialColor" href="#" style="">LINK</a>
By Id:
.email {
color: #ffffff;
}
#specialColor:hover {
color: #006b33;
}
<a id="specialColor" class="email" href="#">LINK</a>
You are applying a style directly to your anchor. That style is taking precedence over your other styles.
You could use the following style:
.text-center a.email {
color: #fff;
}
.text-center a.email:hover {
color: #006b33;
}
and change your html like this:
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p><a class="email" href="mailto:your-email#your-domain.com">sales#domain.com</a></p>
</div>
:-)
You're not combining selectors correctly.
.col-lg-4 text-center a.email:hover
This is nonsensical because you're asking for an element called text-center which isn't a valid element. In this particular case you want to use:
.col-lg-4.text-center a.email:hover
The .col-lg-4.text-center part of the selector is combining both class names (selecting an element that has BOTH .col-lg-4 and .text-center applied. But it's probably not necessary. In general you want your selectors to be as nonspecific as possible.
I want to fix this link appearing in the color blue, when it should be white. It happens in outlook 2010.
<span style="font-family: Arial; font-size: 10px;">
You are subscribed with email address
<font style="color: rgb(255,255,255);"><%user.Email%> </font>
<a href="<%unsubscribe_link_text%>"
style="color: rgb(174, 215, 51) ! important;">
<font style="color: rgb(255,255,255);">Click here</font>
</a> to unsubscribe.
</span>
Can anyone see whats wrong with that and help me? :)
try with
<span style="font-family: Arial; font-size: 10px;">
You are subscribed with email address
<font style="color: rgb(255,255,255);"><%user.Email%> </font>
<a href="<%unsubscribe_link_text%>"
style="color: #ffffff ! important;">
<span style="color: #ffffff;">Click here</span>
</a> to unsubscribe.
</span>
notice the span inside the a
I've always set my colours in the style sheet against the a tag as follows and should work fine in Outlook.
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:active {
color: #666666;
Try change this
style="color: rgb(174, 215, 51) ! important;
to
style="color: #ffffff";
Try using hex colors instead of RGB.
Master guide: http://www.campaignmonitor.com/css/