Hi i need to display my link in footer as "powered by Arun" and it should be a link to my homepage. I need to give a different look to the name next to Powered by. So how to increase the size of the link and any suggestions for customizing the link well.
Use a <span> element:
<span>Powered By</span> Arun
You can then apply a style to the span, or a class:
Inline style:
<span style="font-size:1.2em;"></span>
Class style:
apply the class:
<span class="mySpanClass"></span>
and specify corresponding style (in a stylesheet):
.mySpanClass { font-size:1.2em; }
I think, you need something like this,
Arun</span>
(I am guessing your are not a technical person, so this will be easy for you)
And if you can do, please do this,
Add this css,
.poweredby {
font-size:1.2em;
}
.author {
font-weight:bold;
}
And add this markup,
Arun</span>
As denoted by Mr. Disappointment in his answer you can use a <span>.
To show an example of using it with the link, see below.
<a href="LinkToYouHomePage.htm"><span style="font-size: small">Powered by</span> <span
style="font-size: larger">Arun</span> </a>
If you want to give some basic style to a link couldn't you do
<p><i style="font-size:1.5em ;color: blue; ">Powered by</i><strong> Arun</strong></p>
Related
So I have this piece of code showing the price, I want to hide it. I can display: none; on the price tag but then it is not showing anywhere, in the cart etc.
So I need to display none on the tag rnb_price_unit_number but I can't go through and do that for every item.
Is there a way to select all of the tags beginning with rnb_price_unit_ ?
I thought rnb_price_unit_ * {display:none;} might work but it isn't.
Thanksimage of inspect for better view
Yes you can do this using the CSS [attribute^=value] Selector
It would look something like this:
span[class^="amount rnb_price_unit_"] {
background: #ffff00;
}
<span class="amount rnb_price_unit_30">from
<span>something</span>
</span>
<span class="amount rnb_price_unit_40">from
<span>something</span>
</span>
Further details about this selector can be found here: https://www.w3schools.com/cssref/sel_attr_begin.asp
In my web app, I want to highlight a piece of text so that it looks like somebody has painted it with a certain color. The Medium app uses this effect, too.
(I would like to show an image of this effect here, but stackoverflow does not allow me to post it because I do not have enough reputation points, yet.)
What kind of CSS and/or HTML markup do I need to achieve this?
As a side note: My app is written with React.
You need to use the semantic <mark> tag for this:
<p>This is some <mark>marked text</mark>.</p>
You can then style it any way you want using CSS:
mark {
background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>
There are many ways to do it:
Highlight using the HTML <mark> tag
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Highlight text with only HTML code
<span style="background-color: #FFFF00">Yellow text.</span>
Highlight text with CSS & HTML
body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;
<span class="highlight">Highlighted Text</span>
it doesn't matter if the application is written in React on any other framework. You can always define a CSS for basic html tag, such as as #Salaman suggested.
You can use the example that #Salman provided, but I would suggest a small modification.
mark.hotPink {
background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>
<p>Also, you can check out our <mark>standard offers as well</mark>.</p>
You can write a CSS for tag but you probably don't want to do it for every mark tag (because you don't know if some other part of the system might be affected by this. The best (and the safest) way to do this is to create a custom class (i.e. class="hotPink" and assign it to your mark.
Hope this helps, all best! :)
I have a mailto link that I wish to make a separate color than the rest of the links show on the page. Is this possible?
Im guessing it would look something like:
<a href="mailto:someone#something.com" style="a: color: White">
but that doesn't seem to work.
You don't have to call inline styles or need to declare id's or classes for selecting mailto links, you can use att-val selector like
a[href^='mailto:'] {
color: yellow;
}
Demo
Change:
style="a: color: White"
to
style="color: white"
Since you're already changing the CSS inline, you don't need a selector. If you were declaring the CSS separately, then you'd use the syntax a{color:white}.
Give an ID to your A then style it.
<a href="mailto:someone#something.com" id="mymailto">
Then in your CSS:
#mymailto:link {
color: white;
}
You may try like this
<a href="mailto:someone#something.com" style="color:#fff">
On page 1 there is a link which takes you to a certain point on page 2
MY TEXT HERE
This takes you straight to the anchor (position) on page 2 with the following code
<a name="position"> MORE TEXT HERE</a>
Now, my question is how can I change the text and background color when #position is in the URL?
For example: www.domainname.com/page2.html#position
This is the CSS I used but doesn't work:
#position {
color:#ff0000;
background-color:#f5f36e;
}
Here is a example http://jsfiddle.net/jvtcj/2/
Thank you in advance!
Use the :target selector:
a:target, /* or simply */
:target {
/* CSS to style the focused/target element */
}
You'd be better off using the id of a particular element to receive the focus, since named-anchors seem to have been dropped, if not deprecated entirely.
References:
CSS selectors, level 3.
You can use the CSS3 :target peseudo selector: http://blog.teamtreehouse.com/stay-on-target
Also, don't use the old myth <a name="destination">...</a>, all you need is to id the section you want to jump to, e.g. <section id="destination">...</section>
MY TEXT HERE
...
<a name="position2" id="pos2"> MORE TEXT HERE</a>
... in css:
a[name=position2]:target{
background-color:green;
}
Try using
<a name="position" class="position"> MORE TEXT HERE</a>
And in CSS use
.position {
color:#ff0000;
background-color:#f5f36e;
}
http://jsfiddle.net/jvtcj/4/
Add an id to the tag.
You can see how here using your example
http://jsfiddle.net/h5NZh/
<a id="position" href="#position">MY TEXT HERE</a>
I'm using WordPress to host a blog. They have a tag cloud widget. The tags are like this. The class name changes with each tag
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
<a class="tag-link-10" title="1 topic" style="font-size: 8pt;">Blah Blah X</a>
The parent element is <div class="tagcloud">
Normally, with the theme I'm using, I can add custom styles like this
.custom .tag-link-1- {font-size: 10px}
but with the class name changing each tag, I have to constantly add new styles. Is there a way to do a CSS that will capture all the tag-links independent of the number?
Not in a backwards compatible way, no.
CSS 3
a[class^='tag-link-'] {
font-size:10px;
}
I would define a numberless class to hold all the common style info.
.tag-link { font-size:10px; }
Then attach it to each element.
<a class="tag-link tag-link1">Link</a>
You have two options that will work well for you in this scenario.
Option 1: Use CSS Selectors
If your tags are wrapped within some kind of a div, such that:
<div id="tag-cloud">
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
.
.
.
</div>
Use this CSS:
#tag-cloud a { ... } /* Each tag will be styled */
Option 2: Use jQuery!
If you can't figure out option 1, you can always use jQuery to style the element:
$('a[class^="tag-link"]').css( ... );
Refer to this for documentation on how to use the CSS function in jQuery
Option 3: Modify the Wordpress Widget file
You could always go into your wordpress files and modify what gets displayed in the output. I'd recommend removing style="font-size: 8pt;" bit, and then using Option 1 to style the links.
The downside to Option 3 is that you lose the Tag Cloud functionality that makes the links bigger when they appear more often. That might not matter to you, but it's something to consider.
If all tags are getting the same style can you not do:
.tagcloud a {font-size: 10px}
If not please clarify your question.
Thanks!
edit if you are not worried about css validation you can use .custom a {font-size:10px !important;} to override inline styles. If using jQuery is an option, remove the inline styles: $('.tagcloud a').removeAttr('style');