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
Related
my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css
Normal:
And after I opened the product description
Here is anchor style from developer tool
So I need any idea how to separete ebay product css with my css.
One of the methods that I think is to add !important to all my styles, but I don't think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.
Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this
.leftbar {
float: left;
width: 20%;
background: #ccc;
}
a { /*think of this as default link style*/
color: black;
}
#main div:not(.product-desc) a { /*more specific selector*/
display: block;
color: red;
}
a { /*this one is from eBay*/
color: green;
}
<div id='main'>
<div class='leftbar'>
<a>Hello</a>
<a>World</a>
</div>
<div class='product-desc'>
<a>Description</a>
<a>Product</a>
</div>
</div>
You can use a :not selector to define your main style so it won't be disrupted by the eBay style
The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black
create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.
Here how you do:
create the icons/text of anchor inside a element and give inline CSS
<a href="http://www.example.com" target="_blank">
<span style="color: #ffffff !important;" >icons</span>
</a>
A quick test in Chrome shows that the
a:visited * { ... !important}
does override the inline style, but adding the !important back to the span works fine.
<span style="color: #ffffff !important;" >
For understanding it better. Learn here Overwriting Hover in anchor
Overwriting visited in anchor
Blockquote
If you want to remove all exist style and reset it to default you can use:
all: initial;
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
i have many link in my content
how can found and change color all link in div tag when show content to user ?
like that :
pleas visit my own site's : telegram.org , www.google.com , www.wikipedia.com , ...
and send mail to : mymail#gmail.com
If you want to style a link you should use css to do this:
.new_link {
background-color: black;
color: white;
}
<div>
<a class="new_link" href="#link2" id="link1">Go to next link</a>
<br>
<a class="new_link" href="#link1" id="link2">Go to link1</a>
Some other text that will not be styled
</div>
Here i added a class in the link elements (<a> element).
By adding a class they get the css styling.
The styling i choose here where:
Background-color
color (text-color)
You can make create css rules (like above) for all <a> elements on your page.
An other possibility is to add a class to the <div> element and select all links inside this div. All of this is possible with css.
if you want to change the color of links in all pages or app then do this in css..
a {
color: red;/*color name, color code or rbg*/
}
if you want to change the specific link color ....
a.highlight {
color: red;
}
if you want to change the all links color in specific div .....
.content a{
color:red;
}
Example HTML:
<div itemid="MenuContainer" id="MenuContainer" class="MenuContainer">
Example CSS:
#MenuContainer {
/* Styles */
}
How can I use CSS to target ItemID instead of the regular ID?
Instead of #MenuContainer, use this.
[itemid="MenuContainer"] { /*CSS STYLES*/ }
This will use data attribute (itemid) and the value (MenuContainer) from the HTML tag.
see this http://jsfiddle.net/442hdc0p/
You should not even try to do that.
Instead, use unique class for this element.
In your example you could add class="MenuContainer extraClass" and then in CSS use .extraClass { color: #FFF; } or whatever to define, what you need.
I am generating a html file with many different links and they (by default) all show up the regular blue color. Is there anyway i can make certain links different colors. note that this html is getting pushed into outlook as an email so i can't have separate css files.
You can put your css in the <head/> of the <html>. Style your links with the color(s) you want. If you need more than one type of link, use classes. e.g.
a { color: #abcde1}
a.visited, a.hover {color: #1abcde;}
a.special {color:#123456;}
use a css style for the anchor inline:
<a href="foo" style="color:orange"....
There are a couple different ways. CSS can appear in your head tag, so it doesn't have to be a separate style sheet.
One is to use the style attribute:
<a style="color:blue;">...</a>
Another is to use css classes:
<style>
.navLink { color: blue; }
</style>
<a class="navLink">...</a>
There are lots of options. See http://www.echoecho.com/csslinks.htm
You can use classes for your styles:
your CSS file:
.redlinks a
{
color: #FF0000;
}
.greenlinks a
{
color: #00FF00;
}
your HTML file:
<div class="redlinks">my link</div>
you could use internal style sheet or inline styles
assuming the email client doesn't ignore them. of course by messing with link colours you run the risk of users not realising that you have links at all, so be careful.
This is example use of different colours for links:
<style type="text/css">
a.yellowLink { color:#ff0; }
a.greenLink { color:#0f0; }
a.redBlueLink { color:#f00; }
a.redBlueLink:hover { color:#00f; }
</style>
I’m yellow
I’m green
I’m red and blue on hover