I have a ASP hyperlink in my aspx page. The link is just a text "Click here".
I have seen some effects in certain websites; if a user points his mouse on the link, then the link will zoom a bit larger in size. When the user moves the mouse pointer away from the link, the link returns back to its original size.
How do I achieve it? Is it done using CSS?
I have attached my existing CSS here.
<style type="text/css">
.style1
{
font-size: large;
font-weight: bold;
font-family: Arial;
}
</style>
you can acheive this using css selectors http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes targeting the hover pseudo class to apply a new style when the mouse hovers over the link
go to google
<style>
a { font-family: Arial; }
a:hover { font-size: large; font-weight: bold; font-family: Arial; }
</style>
.style1
{
font-size: large;
font-weight: bold;
font-family: Arial;
}
.style1:hover
{
font-size:larger;
}
There is a CSS hover property
example (more info)
a:hover
{
background-color:yellow;
}
You can also use javascript and the mouseover property of the a tag
Related
On this website, I'm unable to remove the bold property from the bold text (text starts with "Conforme o art. 43...").
What is most intriguing is that the font-weight command below applies normally to all parts of the referred site, except for the bold part.
I'm using the following code in Stylebot (Chrome Extension):
div {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
How can I get this done? Thanks in advance!
Please let me know if this is what you are looking for.
div > * {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
or
* {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
Edit: Maybe this is more what you are looking for->
.q-question-enunciation > span{
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
The text you are referring to ("Conforme o art. 43...") is inside a span tag that has an inline style style="font-weight: bold,".
An inline style like this will override every CSS rule that you define in an external style sheet or in a <style> tag inside the header of your page, so you need to
...either erase this style tag in the HTML code (if it's actually there), or
...if it's not there, it's inserted via javascript. So you need to find out which javascript inserts this code into the HTML code and erase or deactivate that code.
EDIT / Additional note: The code of the answer which you just accepted will apply that CSS rule either to all direct children elements of any div or (second option) even apply it to all elements in your page. I strongly doubt that you want either of this, since most likely your pages will consist of more than what you showed us...
Why does input get Ubuntu font instead of monospace font in this sample?
It is a tiny sample from some HTML code where the inputs are nested much deeper – but has the same effect.
Is there a general rule for what elements I have to specifically set font-family or inherit it? Input, label, button, …
Is it a bad idea to use something like this?
body * { font-family: xxx; }
What I want to do is set a "global font" and optionally set other font-families on elements where that is desired. Thought that was achieved by setting it on html, body { }. Obviously not.
Sample code:
html, body {
font-family: monospace;
}
.inp {
font-family: monospace;
/* or alternatively
font-family: inherit;
*/
}
<p>Some text</p>
<input type="text" value="123456789.0" /><br />
<input type="text" value="123456789.0" class="inp" />
Result (picture):
The result looks like this in Fire Fox on Ubuntu:
I'll add some pictures from Inspector in developer tools.
I was only looking at the rules section of the tools at first and as it say monospace I did not find the fault until I looked at computed ;)
From «Computed» on left and «Rules» on right:
<body> has focus:
<p> has focus:
First <input> has focus:
Second <input> has focus:
Most HTML elements aren't assigned a font-family by the browser's user-agent style sheet, so they will inherit whatever you set on the body element.
Some elements, however, do receive styles from the user-agent, so they override the family you have on body. Inputs, buttons, and other form controls are often a problem.
In a CSS reset, it is very common to give these elements font-family: inherit example from normalize.css:
input {
font-family: inherit;
}
Inherit will set the input to use whatever font-family it would normally inherit, so it will then use your styles set on body.
Looks like it is inheriting the agent font from the input element.
The browser applies its own styling. In your case, the browser's styling on input takes precedence over inherited properties on html and body. On chrome you can see the user-agent style:
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 0px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
You'll be better off using .inp to style your element. Or for consistency you can style the input type:
input[type="text"] {
font-family: monospace;
}
In below code, the tab font (text) color changes, but on focus it doesn't. When I unhover the selected tab, it works fine. Can any one guide me on how I can change the text color on courser focus as well?
<style>
.redtab .z-tab-seld .z-tab-text{
color:#e4710b;
font-weight: bold;
font-size: 15px;
}
</style>
<style>
.redtab .z-tab-seld .z-tab-text,.redtab .z-tab-seld .z-tab-text:hover{
color:#e4710b;
font-weight: bold;
font-size: 15px;
}
</style>
After a user visits a link, I want the font-weight of the text to go to normal (400).
.title-link {
font-family: 'Open Sans', sans-serif;
color: #264464;
font-size: 16px;
text-decoration: none;
font-weight: bold;
}
.title-link:visited {
font-weight: 400;
}
I read that you can't do this from around 2010+ (https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/), is there any way I can do it still?
If you are using page links perhaps you could use jquery? The only problem being after a page refresh it would go back to being bold.
html
<a href='#' class='title-link'>Link</a>
jquery
$('.title-link').click(function() {
$('.title-link').css('font-weight', 'normal');
});
Seems to work in this jsfiddle: http://jsfiddle.net/z7kmbve7/2/
I'm trying to make a pseudo link class with the CSS3 text-shadow for both navigation and normal use of links.
The problem is that the state "a:hover" is overruling "a:visited" so when doing a mouseover on the link that previously has been visited, it outputs different that it should.
If the a:visited state isn't present in the CSS the color of the visited links will turn into the standard purple color, which I don't like it to.
Have a look at the site: www.sayhi.dk
The code looks like this:
HTML
<a class="lnk" href="http://www.twitter.com/sayhidk">#Sayhi.dk</a>
CSS
a.lnk:link {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
a.lnk:hover {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow: 1px 1px #7c7565;
color:#ffffff;
}
a.lnk:visited {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:#ffffff 1px 1px 1px;
color:#7c7565;
text-decoration:none;
}
a.lnk:active {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
Hope that you guys can help me out.
In your example, specifying 'color' in the :visited style is sufficient.
Edit: the solution was to put a.lnk:visited before a.lnk:hover.
This may or may not help, but I never define a:link styles. I instead define an "a" style (no pseudo class), and styles get inherited nicely. Then I define :hover, :active, etc... And if I do not define one for a particular style, the catch-all "a" style gets applied.
It is also good practice to define a :hover as well as a :focus. They can be the same style if you like. The :focus is used in a limited way by the iOS and handicapped users who don't use a mouse but use a keyboard to navigate.