I have a basic clickable text with black color, and I want to make another text green, but if I change it, the text that changes in black
How can i do this?
a {
color: black;
font-size: 40px;
font-weight: bold;
text-decoration: none;
}
<p class="margin-ot">Reviews from past exams</p>
Give the element you wanted to be green a specific class, then use that class to style it. Notice that i declared that style below the original style with a class selector next to it to give it the priority.
All of the above is related to CSS selectors, Selector Specificity. I suggest to take a research about all those CSS concepts which is really important to understand.
Additional, you can wrap the inner text of the black text by a span, then style it the way you want.
a {
color: black;
font-size: 40px;
font-weight: bold;
text-decoration: none;
}
a.green{
color: green;
}
a span{
color: green;
}
<p class="margin-ot">Reviews from past exams</p>
<p class="margin-ot">Reviews from past exams</p>
<p class="margin-ot">Reviews from past<span> exams </span></p>
Your question is confusing, please explain better what exactly you want to achive here.
If you have element with nested ones, then styles from parent also will affect it's children. The cleanest way to set different styling to children elements is to add to it various classes, for example:
.text-green {
color: green;
}
.text-big {
font-size: 1.2rem;
}
<p>A paragraph text with <span class="text-green text-big">span element in different color and size</span>.</p>
Related
For example, say I want to create text in HTML with the color blue and a size of 13px.
Is there any way I can do something like:
<h1 class = "blue 13px">Hallo</h1>
And then use CSS to make it blue and 13 px without doing:
.blue 13px {
color: blue;
font-size: 13px;
}
Instead of using CSS classes, you could use inline styling in your HTML elements:
<h1 style="color: blue; font-size: 13px;">Hallo</h1>
Because of its poor maintenance and reuse qualities, this styling strategy is generally not advisable though. Use with caution. ;)
Also note that the CSS code that you provide in your question is invalid. CSS class names have to be valid CSS identifiers. This would be more correct:
<h1 class="blue-13px">Hallo</h1>
.blue-13px {
color: blue;
font-size: 13px;
}
And also note that you can include CSS rules inside your HTML page as well (without using a separate CSS file):
<style>
.blue-13px {
color: blue;
font-size: 13px;
}
</style>
<h1 class="blue-13px">Hallo</h1>
CSS
:root
{
--css_h1_color: rgba(204,204,204,.2);
}
h1 {color: var(--css_h1_color);}
JavaScript
getComputedStyle(document.documentElement).getPropertyValue('--css_h1_color');
I have an h2 in a div, and the h2 itself is a link. The link is displayed in one color already (code example below)
<div>
<h2 class="className">
Title</h2>
</div>
.className
{
color: #006BA6;
font-size: 20px;
padding-left: 14px;
}
What I need to do is make it so when I hover over the h2 link "Title" the color will change to another color. I have searched everywhere and have yet to find a successful way to do this.
I have tried something like this:
h1, h2, h3{
a{
color:#d99a30 !important;
&:hover{ color:#37404e !important;}
}
}
And a handful of other options, including a new class for the h2 and a new class for the link and nothing is working. Any tips would be greatly appreciated!
Edit: I want to take one quick second and apologize for potentially asking a duplicate question. It was not my intention to waste anybody's time by not being thorough enough in my searching. I am still very, very new to CSS and kind of figuring things out as I go. A lot of the code I am working with is pre-existing, so I am worried about small kinds of changes making large changes throughout the entire site. Thank you all for your help, suggestions, and links to tutorials/documentation. I will be sure to be more thorough in the future before asking a question.
Try:
.className
{
color: #006BA6; /*General color for text in this class*/
font-size: 20px;
padding-left: 14px;
}
.className a{
color: red; /*Color for hyperlinks in this class*/
}
.className a:hover{ /*:hover selector is self-explanatory :)*/
color: green;
}
<div>
<h2 class="className">
Title</h2>
</div>
Additional notes:
don't use "!important" unless You now what are You doing
go to https://www.w3schools.com/css/ and improve Your knowledge about basics of CSS
Why do you not have an own class for your link? Just remove the style attribute in the link, so your html looks like this:
<div>
<h2 class="className">
Title
</h2>
</div>
And then add the following style sheet:
.className
{
color: #006BA6;
font-size: 20px;
padding-left: 14px;
}
.link
{
color: #006BA6;
}
.link:hover
{
color: #37404e;
}
So your class name sets the color of the Title, but the color of the link will be overwritten by the link, and the link has an own hover, which will override the color from the normal link.
Please brush up on your basic HTML/CSS knowledge and read up on how to ask a good question.
For the time being, check this out:
h2 a {
color: #006BA6;
}
h2:hover a {
color: #ff0000;
}
<div>
<h2>
Title
</h2>
</div>
Note that I removed the inline-styling of the a element, as inline styling always has priority over that coming from a style section or external stylesheet. Plus, it is considered bad practice.
Also note that h2 a:hover would work just as well. The difference is that the one I chose will change the color of your a when you hover anywhere over the h2, while the latter will only trigger when you actually hover the a within a h2.
For reasons explained below, I am using relative positioning on <span> inside <a> in order to slightly change the position of the text wrapped with <span> (to place it 2px higher than it's placed automatically). When I do this, obviously, the text-decoration: underline; is broken and below my <span> it is also starting 2px higher. Please see the fiddle: http://jsfiddle.net/8qL934xv/
I would like know, if there is a way to make the <a> underline run below the <span> as well, unbroken and preferably with HTML/CSS only.
How I came across this problem:
I am building a bilingual website, where sometimes English words are still in secondary language content. In these cases I wrap these words with <span lang="en"> and apply corresponding font-family this way:
* [lang="en"]
{
font-family: 'Ropa Sans', helvetica;
}
However, the font-family I use for my secondary language headings and 'Ropa Sans' do not look nice next to each other and they appear as if "not sitting" on the same line. To fix this, I had been using relative positioning on my <span>-s. For example:
h1 span {
position: relative;
top: -2px;
}
This solution worked just fine, before I realized that it messes up with the underline when applied to links. I could avoid using text-decorations on links like these, but I would prefer to know if there is some simple CSS solution that I was not able to identify.
This isn't possible, but you could do something like
a {
display: block;
border-bottom: 1px solid transparent;
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom: 1px solid blue;
display: inline-block;
}
This works.
For example, given these two rules
p { color: red; background: yellow }
p { color: green }
paragraphs would appear in green text. They would also have a yellow background however, because the first rule is not completely negated. Its value for the color property is overridden by the second rule but its background-color is not in conflict, so it still applies.
So Is there anyway to stop applying background color property?
I am requiring such method because first rule may have n no. of attributes which i don't know beforehand.
looking forward for positive reply.
That's why you can define classes in CSS.
The style defined for the same element will be always overwritten if there are duplicated properties and inherited from the previous definition for the same element.
Try:
CSS
p.red { color: red; background: yellow }
p.green { color: green }
HTML
<p class="green">Some text</p>
<p class="red">Another text</p>
Define a class to each <p> element. Set CSS style for each defined class.
HTML File (index file)
<p class="content-1">This is content 1</p>
<p class="content-2">This is content 2</p>
CSS file (style.css)
p.content-1 {
color: red; background: yellow;
}
p.content-2 {
color: green;
}
JSFiddle: http://jsfiddle.net/SCLP8/
You can add the background property to your own CSS like this:
p { color: red; background: yellow; }
p { color: green; background: none; }
There won't be a yellow background.
Ok here is the thing. I need 2 different font sizes in my <h1> heading.
The text after the <br> need to be larger than the text before.
<h1>Welcome text from<br>Name</h1>
So I tried it with
h1 {
color: #c3c2c2;
font-size: 35px;
}
h1 br:after {
font-size: 50px;
}
But this doesn't work, any ideas or suggestions?
If you don't want or cannot change the markup, you could use the :first-line selector from CSS3. Something like this:
<h1>Welcome text from <br/> Name</h1>
h1 {
color: #c3c2c2;
font-size: 50px;
}
h1:first-line {
font-size: 35px;
}
According to Quirksmode the compatablity is quite okay, especially if you use the one-colon syntax over the ::first-line syntax (all good browsers support it, and IE from 5.5 and up as well).
See a jssfidle for a working demo.
If you are able to edit the markup, wrap "name" in a span and target the span with your selector.
Here is one way of doing it:
HTML:
<h2>Heading<br><span class="name">Name</span></h2>
CSS:
.name {
font-size:200%;
}
Example:
http://jsfiddle.net/ghWKm/
However, its more common to keep the heading to one line and put the subheading as a new element (h3 for example) underneath it.
you can use
`<h1>`Welcome text from`<span class="abc">Name</span></h1>
instead of
<h1>Welcome text from<br>Name</h1>
And give style to .abc
Why not wrap each side in a span and then set the sizes differently there, this will also mean that you do not need the br.
<h1>Welcome text from<span class="size2">Name</span></h1>
h1 {
color: #c3c2c2;
font-size: 35px;
}
h1 .size2 {
font-size: 50px;
}