I have an HTML code as follows
<h2><a class="toc-backref" href="#id8">Debug</a></h2>
How can I apply css format to Debug which is inside <a> (which is inside <h2>) with a class of "toc-backref"?
You could put a span inside of the h2, but that's not necessary. If you want to style the <a> inside of the <h2>, just do something like:
h2 a {
// style here
}
Or you can give the link a class:
h2 a.toc-backref {
// style here
}
h2 .toc-backref
{
/* Any style here */
}
you can also try
<h2 class="toc-backref">Debug</h2>
your style will be in css
.toc-backref
{
//your style....
}
Related
<template id="element-details-template">
<link href="./src/components/lit-button/button.scss" rel="stylesheet">
<svg ..</svg>
<span slot="buttonLabel">span1</span>
<span class="name" slot="buttonSubLabel">span2</span>
</template>
I want to style just the second span in an external css file. But the styles are not getting affected/reflected. I am confused as to what the problem might be?
The below code is my css:
:host {
#element-details-template {
span.name {
text-transform:lowercase;
}
}
If the class is in an external css file (like the global one styles.css, or a parent one) just try removing the :host directive. To be sure it should affect the span element, use also !important directive. You can also specify the only class/classes you want to affect with the css class like:
(if the class were there's the html code is called for example "test.html")
app-test{
#element-details-template{
span.name {
text-transform:lowercase !important;
}
}
}
While if you want this class to affect the entire application (if you put this css class in the styles.css) when you use those id and class name, you can remove the app-test block:
#element-details-template{
span.name {
text-transform:lowercase !important;
}
}
I tried and with the :host block it didn't work but in this way it should work. Hope it's helpful :)
I am creating a custom CSS class and i am not sure how to write the code.
The element uses a h2 font size for its heading and a standard paragraph font size for everything else.
I would like to code a custom size for the h2 headings.
my custom class name is hosting-post-slider and my code starts as follows...
.hosting-post-slider {
}
I am not sure how to refer to the h2 heading in my CSS in the above so i can customize h2 just for this element.
if you have some styling in a class such as
.hosting-post-slider {
color: red;
}
Then to make a single h2 tag have this style, simply do this in you HTML:
<h2 class="hosting-post-slider">The heading</h2>
If you want all h2's to have this style, either add that class to all h2 elements, OR change your css to target all the h2s, such as:
.h2 {
color: red;
}
The code below will reference only this instance of the h2 element. Any style you add to it will only be applied to this element.
The complete code will look like this:
.hosting-post-slider h2 {
font-size: 30px;
}
<div className="hosting-post-slider">
<h2>My header</h2>
<p>My paragraph</p>
</div>
Is this what you are looking for, this selects all h2 elements with your custom class
h2.hosting-post-slider{
}
I have the following code:
<div class = "badge">
<div class = "badge-header">
</div>
</div>
What's the proper way to style badge-header in css?
Is it
.badge .badge-header {
}
or
.badge-header {
}
also how do we structure our css names? How do we structure our divs and what selectors should we use for each above?
If you have a div inside a div, what is the naming convention that we should stick to in CSS?
Both
but the first will apply the style only when the "badge-header" is inside of a "badge"
in the second will apply for all "badge-header" elements.
See example: https://jsfiddle.net/6bvLtqLw/
CSS
.badge-header{
color:blue;
}
.badge .badge-header{
background-color: yellow;
}
HTML
<div class="badge">
<div class="badge-header">
inside
</div>
</div>
<div class="badge-header">
outside
</div>
Both work
.badge .badge-header {
}
above one applies style to those elements with class '.badge-header' AND are under elements with class '.badge'
.badge-header {
}
and the above one applies style to all the elements with class '.badge-header' regardless of element's position in DOM.
Both
but the first will apply the style only when the "badge-header" is inside of a "badge"
.badge .badge-header {
}
in the second will apply for all "badge-header" elements.
.badge-header {
}
The first variant obviously will only style .badge-header if used in the context of a .badge. The second will apply to all .badge-headerregardless of their context.
If you are certain .badge-header will never need to be used outside of .badge, you go with variant two as it is shorter and more concise.
If it might be useful to reuse the .badge-header in different context than only .badge, then use *both variants. Put all styles that all .badge-header have in common in .badge-header { ... }. Put the context-dependent styles in .badge .badge-header { ... }.
In CSS, I want to set different attributes for
<a name="tag">one font and color</a>
and
a different font and color
However, setting the attributes for the <a> tag make both pieces of text have the same color. How can I make them different? Do I have to put an id on every single one?
I'm confused as to why you would have an anchor tag, without an href.
The purpose of the name attribute, is for forms, so that when you submit a form, you can retrieve the data.
In order to style HTML elements, you'll want to use either an id or a class. A class can be used multiple times on a page, where an id can only be used once per page.
It's absolutely possible to style an anchor tag based on the attribute like so:
a[name] {
/* Style 1 */
}
a[name="tag"] {
/* Style 2 */
}
a[href] {
/* Style 3 */
}
a[href="link"] {
/* Style 4 */
}
But it's best practice to use id and class.
You can try this:
a[name] {
color: blue;
}
a[name="tag"] {
color: red;
}
a[href] {
color: green;
}
<a name="tag">A with name as tag</a><br>
<a name="haha">A with name attribute set</a><br>
one font and color
It will set different CSS styles based on attributes
You can use classes for each Anchor tag. It can be used by the tags having similar properties.
See this example.
.tag1{
font-family:verdana;
color:red;
}
.tag2{
font-family:cursive;
color:green;
}
.tag3{
font-family:arial;
color:black;
}
one font and color<br/>
<a href="link" class="tag2" >a different font and color</a><br />
<a href="link" class="tag3" >a different font and color</a>
probably you just apply below css :
a {
color : red;
....
}
This css applys to all a tags in html document.
Instead to apply a css to a specific a tag, Do this:
Html :
<a id="mylink" href="http://google.com">Google</a>
Css :
#mylink {
color:blue;
}
This css just applys to the element which has an id of mylink, for furthur inf comment me .
NOTE : only one element can have a specific id. If you want to use for several elements use class.
Html:
<a class="links">Test</a>
<a class="links2">Google</a>
<a class = "links">Yahoo</a>
Css :
.links { /*This applys to 'a' tas which have <<class="links">> */
color:blue;
font-size:12pt
....
}
.links2 {
...
}
There are more ways like inheritation and according to a attribute. For more information comment.
You could use inline styling like this:
stuff
I've assigned the class "greenbutton" to a link in my html, but none of the changes I make to this class on my CSS take effect.
home.html.erb
<p><a class="greenbutton" href="#">Sign Up</a> to learn more</p>
custom.css.scss
.greenbutton a:link, .greenbutton a:visited {
font-size: 14px;
text-decoration: none;
}
The weird thing about this is that when I assign this class to the preceding paragraph tag, the changes take effect. Any thoughts?
The CSS you're trying should either be applied to the <p> or modified to a.greenbutton. What you're specifying is an anchor within an element classed greenbutton. e.g.
.greenbutton a { } /* anchor inside .greenbutton-classed element, like:
<p class="greenbutton">
Foo
</p>
*/
a.greenbutton { } /* anchor with .greenbutton class applied, like:
Bar
*/
Your selector is wrong:
.greenbutton a:link
This targets anchor links within an element that has the class "greenbutton". What you want is for the class to be on the anchor:
a.greenbutton:link
Css class should be like this.
a.greenbutton, a.greenbutton:visited {
font-size: 14px;
text-decoration: none;
}