I've just learned how to make a text to blink (<div style="text-decoration:blink">text</div>).
How about the other decoration modes such as color changing? Are they available in CSS?
Thanks.
Nothing too interesting with text-decoration. A good resource is always the w3:
http://www.w3schools.com/Css/pr_text_text-decoration.asp
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
Regarding your second question - of course. CSS can (and should) be used to style almost anything, though blinking text is an extreme example, most rules are much more useful.
Yes, color changing is available in CSS. Use
<div style="color:red">foo</div>
for example. You probably want to check out a good CSS introduction or the official standard:
http://www.w3schools.com/css/css_text.asp
http://www.w3.org/TR/CSS2/
The available text-decoration values are:
blink
line-through
none
overline
underline
See http://reference.sitepoint.com/css/text-decoration for more details.
Yes, you can use the following:
color: #FFFFFF; (which would make your text white in color)
font-weight:bold;
text-decoration:underline;
etc.
You should really Google this.
I suppose that by color changing you don’t mean just to set the text color as color does but more complex animations.
There are some experiments like WebKit’s -webkit-animation, -webkit-transform or -webkit-transition. But those properties are proprietary.
Nowadays such effects are done with the help of JavaScript. There are plenty JavaScript frameworks you can use like jQuery, mootools, Prototype, Script.aculo.us, etc.
No, these are generally programmed using JavaScript.
If you are referring to link color changing on hover, that is done with css.
a:link { color: blue; }
a:hover { color: green; }
There are four currently-supported text decorations. (Blink is no longer supported in most browsers.)
Draws a line over the text
h1 {text-decoration:overline;}
Draws a line under the text
h1 {text-decoration:underline;}
Strike through. (Draws a line through the text.)
h1 {text-decoration:line-through;}
No decoration.
h1 {text-decoration:none;}
NEVER USE BLINK, it has little browser support, it is useless, and has severe accessibility issues. It was made as a proprietary attribute during the browser wars between IE and Netscape, and most browsers never supported it, IE, who copied it from Netscape, has deprecated it, and Netscape, has been dead for almost 6 years.
(Feel free to correct my little history lesson.)
CSS text-decoration property is used to decorate the text or remove the decoration for the text. CSS text-decoration property is mostly used to set or remove the underlines on the web page.
In many case, when you wish to have no decoration for the text you can simply say text-decoration: none;. That makes the text have no decoration.
See the below example for more understanding
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Reference: http://www.snoopcode.com/css/css-texts
Related
Really small thing, but I've got these calendar icons on my Joomla front-end edit page, on publishing buttons. I'm using the Unicode character U+1F5D2 for this, but I can't seem to change its color with CSS. I'm trying to make it white, the browser inspector says it's white, but it's clearly not.
See example here
I don't know if Unicode is supposed to do this, and I've never had a problem with it until I used this particular character.
The character is called by a :before on a span element with class="icon-calendar". I've tried changing the color attribute on several different levels of the element, including the :before and the span itself, but none of them take effect.
#adminForm a.btn,
#adminForm button.btn {
background-color: #0e71b8;
color: #ffffff;
}
#adminForm button.btn:before {
color: #ffffff;
}
Anyone know if this is supposed to happen and/or how to get around it?
I had a similar problem. Looks like some unicode characters have the color, and outlines baked into them and can't be changed by css.
So the options are:
Find alternative unicode character that can be changed in CSS
Use font icons
Use an image
Seems to work using the HTML Entity.
* {background: #000; font-size: 1.4em;}
.cal {color: #fff;}
<span class="cal">📅</span>
Updated for :pseudo
You should have mentioned the pseudo in your question.
Looking at your CSS you arn't targeting the :before pseudo
#adminForm a.btn:before,
#adminForm button.btn:before {
color: #fff;
}
Bart,
Problem without font-family or depend your Base CSS Normalize, but you can try ur code "Fonts Googleapis" is work font-face to change a color. Sorry bad english.
See:
http://codepen.io/KingRider/pen/QGeMoQ
Why not try plugin 'Font Awesome' is best
http://fontawesome.io/examples/
I'm trying to get my text to be underlined while blinking, but when I follow suggestions from other questions, it still only lets one value work.
I tried
text-decoration: underline;
#text-decoration:blink;
}
I tried
text-decoration: underline, blink
And nothing worked. How can I get the text to blink while underlined? I'm trying everything I can find, but nothing seems to work.
Seperated multiple CSS property values with a space:
p {
text-decoration: blink underline;
}
Note from W3 spec:
Conforming user agents may simply not blink the text.
No you can't. If you define same property several times in a CSS statement, only the last one is used.
And underline and blink are values of the same text-decoration-line property: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
Using the hacks will only change behaviour in different browsers. For example, set #text-decoration: blink for IE6 (I suppose) and text-decoration: underline; for all other browsers.
Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?
In my specific situation, I have a main style file containing:
a:link { color: black; }
a:visited { color: black; }
And I would like to have a few specific links rendered with the default colours.
EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.
Edit:
Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:
a:link { color: black; }
a:visited { color: black; }
Use the not pseudo class and write:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).
It is different for each browser.
What you would have to do is get a stylesheet from the browser you are trying to reset (Gecko, WebKit, or Trident) and make that the new default.
Source: Browsers' default CSS for HTML elements
What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.
Some day this should work everywhere:
a { color: red; }
a.reverted { color: revert; }
red <a class="reverted" href="#">default</a> red
But for now think about a workaround. The feature is just not there yet.
If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...
a:link {color: blue;}
a:visited {color: purple;}
Nowadays we can do something like this:
<head>
<style>
:link { color: black; }
:visited { color: black; }
.default-color :link { color: LinkText; }
.default-color :visited { color: VisitedText; }
</style></head>
<body>
<a href='#'>link</a>,
<span class='default-color'>
<a href='#'>link</a></span></body>
The second link renders with default colours.
See: CSS Color Module § System Colors
You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".
You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.
example.com/foo.php
example.com/foo.php?random=value
both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".
I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.
With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.
Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
enter code herea.class{
color:inherit;
}
Specifies that the color should be inherited from the parent element.
so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.
Your best with just customizing classes of links of special interest and leaving the rest by default.
No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.
So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.
Just style the ones you want to style by setting a class on them.
.class:link{}
.class:visited{}
Then leave the others default.
You can use this:
a {
color: inherit;
}
That will inherit, and as there is no other link color so the browser will give the link its own style!
I don't make anything particular. I use Safari, and when I use <strong>blabla</strong> it doesn't work, but <b>blbla</b> does. any idea about what can be the reason?
Regards...
I use Yahoo Reset.css, if it may cause the problem.
sample code:
<p><strong>Address:</strong> bla bla bla blaabllb</p>
Yes, the Yahoo! CSS reset removes formatting from STRONG tags (as well as all other tags).
You'll need to explicitly declare the formatting as noted in the other answers...
strong { font-weight: bold; }
The Firefox plugin Firebug will let you right-click on an element and say "Inspect Element", which among other things displays what CSS has been applied to that element and from what stylesheet that CSS comes. Very helpful for running down what's causing an issue like this.
Yahoo's reset.css has this:
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
This indeed means that it won't be bold.
It can be that the browser has somehow lost default settings for the "strong" element.
Try to make it "recall" by specifying it explicitly in your CSS:
strong
{
font-weight: bold;
}
You shouldn't use the tags "strong" and "b" to achieve just bold text. Instead use stylesheets to make text appear bold and only use strong if you want to emphasize something. You can also use stylesheets to make strong appear bold in safari.
Well it all depends on what the CSS is doing.
strong {
font-weight:bold;
}
will make it appear bold. Some browsers will have that set as a default CSS rule, others might not. Have you set anything that says explicitly that strong or <b> will result in bold text?
Generally you shouldn't rely on the browsers to style elements on their own. For example, Safari might say:
strong {
font-weight:bold;
font-size: 1.2em;
}
while Firefox may have:
strong {
font-weight:bold;
color: #000000;
font-size: 18px;
}
or something like that. So when different users view your page, it may or may not look the same.
Investigate reset.css files (maybe here) and think about telling the browser WHAT you want it to look like via CSS.
Do you have strong declared in your css file? if you have a declaration:
strong{}
then nothing will happen.
You need to have:
strong{
font-weight:bold;
font-style: italic;
}
<strong> is a semantic element used to emphasize the enclosed text, while <b> (though "deprecated") is more of a typographic convention.
strong {font-weight:bold}
I have set some style for h2 tags (color, font-size, etc.), but when I put "A" tag inside, then style becomes as link. My html:
<h2>
<a class="no-decor" href="http://localhost/xxx/">Link</a>
</h2>
So, as You can see, I've created "no-decor" class. It should inherit h2's style for "a" tag.
a.no-decor {
color:inherit;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
text-decoration:inherit;
}
On Firefox everythig is ok, but IE still shows tag "a" style (underline text-decoration and blue color). I know, I can set some style for "h2 a", but maybe somehow it is possible to force work CSS inherit values on IE7?
P.S. On IE6 doesn't supports too.
P.P.S. There is some example in same way: http://www.brunildo.org/test/inherit.html
No, IE has never supported inherit for any property - sorry. This has been fixed in >= IE8.
Whilst you could use a JavaScript fix to copy the properties from h2 to a, it's probably easiest just to apply the same styling rule to both elements:
h2, h2 a {
font: something;
color: black;
text-decoration: none;
}
You don't need to set inherit on text-decoration anyway, because decoration doesn't inherit from a parent into a child: the underline effect is on the parent and goes through the child; the child cannot remove it (modulo IE bugs). 'text-decoration: none' on the child is the right thing, unless you want potentially two underlines...
try
a.no-decor{
color:inherit;
//color:expression(this.parentNode.currentStyle['color']);
text-decoration:none;
}
That'll get rid of your blue color and the underline. You could use a similar expression for the underline, but you'd be better off just using text-decoration:none since that's all an inherited text-decoration is gonna give you anyhow and no need to use expressions when not absolutely necessary (you'll take a performance hit when using expressions).
A bug's a bug and there's nothing much you can do, short of workarounds.
There's a test for inherit support here.
You can also try to use a script like ie7-js, which "is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser"
Internet Explorer <= 7 versions don’t support the value inherit for any properties other than direction and visibility.