I encountered a peculiar CSS formatting problem when I changed a <div id="header"> block to HTML5's <header> block. Basically, I want links within the <header> block to be of a certain colour and to not get any decoration.
The relevant HTML and CSS codes look as follows:
<!-- HTML5 code -->
<header>
<h1>
Link text
</h1>
</header>
/* CSS code */
header a {
color: black;
text-decoration: none;
}
The output I see (using Firefox 20.0 with Ubuntu 12.04) is as if the CSS code fragment above does not exist.
Adding something like class="hdr" to the anchor block and changing the CSS rule to a.hdr works. Changing back to <div id="header"> and #header a also works. Still, I don't see why just using <header> and a corresponding rule fails, and it strikes me as the "correct" approach.
An initial search for a solution led me, among other links, to this link (I had the <h1> block nested within the <a> block, initially), but using a <div> wrapper didn't work either.
Try being more specific.
<header class="main-header">
<h1>Link Text</h1>
</header> <!-- .main-header -->
.main-header a {
color: green;
text-decoration: none;
}
using
header h1 a {}
as your selector should fix your specificity issue
Else if your style is getting overridden once it's become visited (by the a:visited selector) you can write a style of equal specificity but it'll override the other rule because it's later in the cascade
header a:visited {}
Just make it come later in the stylesheet
BTW, sorry had to post an answer as I can't comment yet
Related
I am creating a graphic user interface with a drop down menu filled with css styles (bold, italics, changing color of words, etc). The problem I am running into is when I apply these styles, it applies to the entire paragraph and not the individual words. How can I code it to recognized what is highlighted and applying the formatting specifically to that.
I would like to apply span to just the highlighted portion. How?
Ex:
<style>
.red {
color: red;
}
</style>
<body>
<p>This <span class="red">is a</span> test.</p>
</body>
This is the only way I know of to apply span but would like to learn how to have it apply to what the user highlighted. Is there code that detects what user highlighted?
Edit: The goal is to highlight, apply a css style to what is highlighted, remove highlight and style is still there.
I think you are looking for ::selection
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
::selection {
background: cyan;
}
Some text
If you want to highlight only the span.red, use the ::selection pseudo-element like so:
span.red::selection { background-color: red }
<p>Hello, <span class="red">RED HIGHLIGHT</span>!</p>
Try this out. It should work for you. We have an a span with an id bg-span on which we apply our styling.
<!DOCTYPE html>
<html>
<head>
<style>
#bg-span {
background-color: #f18973;
}
</style>
</head>
<body>
<p>Set a <span id="bg-span">background</span> color for only a part of a text.</p>
</body>
</html>
I searched and found one solution to get selected/highlighted text by JavaScript and hide it.
You can use this solution and change code to wrap selected text with span and add selected class to that span.
JQuery selector for highlighted text
Good Luck
I did just want to answer a question and I fall on something I dont understand!
Why the result is not the same if I use inline CSS or CSS in a file like the color in this case!
The code is the same but the 1st paragraph is green and the 2nd red!
I really dont understand why?
Thank you
<head>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
</head>
<body>
<p>This a paragraph.</p>
</body>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
<body>
<p>This a paragraph.</p>
</body>
If you copy your first snippet into a file and open it in a browser the paragraph is indeed red as in the second example.
But for some strange reason* if you run the first snippet in stackoverflow the style element is moved into the body element before the p element (just introspect with firebug). Now p is not the first child and therefore the red-color rule does not apply.
*EDIT: or not that strange (see comment by Turnip) since the body tag is stripped from the script.
p:first-child will only render on the first child if it is a p tag. For whatever reason, the StackOverflow snippet is rendering the code as:
<head>
<style>
</style>
<style type="text/css"></style></head>
<body>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
<p>This a paragraph.</p>
</body>
</html>
The first child is the <style> tag, which got moved into the body. Because of this, there is no p:first-child and so the color red never renders, this leaves green as the only style applied to the <p> tag.
While there is an exception for the :not() pseudoclass in the CSS Specificity Rules that determine when specific CSS styles are applied to certain elements, the real issue here is a matter of invalid markup.
The first example that you provided is actually invalid as <style> blocks must be declared within the <head> element according to the spec, and you'll notice when this is corrected the results should be the same:
Doh! Or it's just a matter of Stack Overflow's editor stripping out the <body> tags within the code examples per the comment from Turnip.
Specifaclly I just want to change this header by giving it's own, color, font, size, weight.etc
<div id="header">
<a href="google.com">
<h1>
<li>EXAMPLE LINK</li>
</h1>
</div>
Firstly, there are several errors in your HTML, which should be fixed first:
<div id="header">
<!-- needs a closing </a> tag and some text, as well as a full href -->
<!-- what is your reason for using an LI element here? -->
<h1><li>EXAMPLE LINK</li></h1>
</div>
As far as styling, you can use CSS, like so:
h1 {
color: red;
font-size: 5em;
text-decoration: underline;
}
/* etc. */
Search Google for basic CSS tutorials. Once you've decided which styles you would like to apply, simply save your text document as something like "style.css", and add a LINK element to the header of your HTML file (this will allow you to use it as an external stylesheet.):
<head>
<link rel="stylesheet" href="style.css" />
</head>
There are other methods for applying styles, such as inline styling, etc., but the above is one of the more typical ways of going about doing it.
Here are some resources to get you started:
w3schools CSS tutorial
CSS-Tricks
How to apply stylesheets
Here is a jsfiddle
You specify a stylesheet with:
<link href="<path>/site.css" rel="stylesheet" type="text/css" />
where <path> is the path to the stylesheet and Site.css is the name of your stylesheet. This is normally in <head>.
You do this either with an inline style or a style section in your page or in a style file.
I wasn't sure if you wanted to format the a as well. Also, I wasn't sure if you want to style the header div or h1. If you want to style h1, then replace #header with h1 in css.
I came across this issue when testing a stylesheet across different browsers, including IE6 (yes, I know..)
<head>
<style>
a:link, a:visited, a:hover, a:active { font-weight: bold; color: #000; text-decoration: underline }
.myclass a { color: red; text-decoration: none; }
</style>
</head>
<body>
<p>This is a test</p>
<div class="myclass">
<p>This is a test</p>
</div>
</body>
Results:
In IE6, the .myclass a rule only applies to the unvisited link state
In other browsers (FF, Chrome), the .myclass a rule applies to all link states
I believe that IE6 is wrong and that .myclass a, with no pseudo-classes specified, should apply to all link states. However I came across this SO question where it says that a is equivalent to a:link. This would match the behaviour in IE6. However I cannot find any official reference confirming this.
Which one is right?
Update:
As noted in the comments, the accepted answer to the question referenced above has since been updated.
The other browsers are right; IE6 is wrong.
The selector a should match any <a> elements, while a:link only matches <a> elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as <a> elements with a href attribute). Nowhere does it state in either specification that a should automatically translate to a:link or vice versa.
Since there's no such translation going on, your two CSS rules have equally specific selectors (your class selector shares equal specificity with each of your pseudo-classes). So, your second rule is supposed to override the first rule for any <a> elements within div.myclass, regardless of their link state, thereby making it always red and with no text decoration.
By the way, IE7 also fails to apply the font-weight: bold style when you test with an <a> element in div.myclass that isn't a link, even though it's supposed to as there is no overriding font-weight style in your second rule:
<div class="myclass">
<p>This is a test</p>
<p>This is a <a>test</a></p> <!-- does not bold on hover in IE7! -->
</div>
IE6 is right. Not specifying a pseudo-class on a is the same as :link. Therefore you must specify styles for :link and :visited if you want something specific - :hover and :active are optional.
Is there any reason why CSS declaration won't display in the browser?
Here's a sample of my CSS file:
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
When I do <font class=adv>hello</font>, it works a treat.
When I do <font class=earnings>hello</font>, the color specified for .earnings doesn't display in the browser.
The page is linked to the correct CSS file.
Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.
Best thing to do is use something like Firebug (firefox extension) or Chrome's inspector to see what style really is applied.
Example (And, by the way, CSS order is irrelevant)
<style>
/* what you think is applied */
.foo { color: red; }
/* What is being applied due to specificity */
#bar .foo { color: green; }
</style>
<span class="foo">.foo</span> <!-- color is red -->
<div id="bar">
<span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
Make sure to surround your parameter values with quotes. You also need to make sure your tags match up
<a class="adv">hello</a>
<font class="earnings">hello</font>
Finally, if you have multiple css parameters in .earnings you need to put a semi-colon after each one.
The last semicolon in a CSS declaration is optional, so that's not your problem.
Most likely you have other styling applied that has a higher precedence. The CSS precedence rules can be a bit weird; the most common stumbling point is that a highly specific declaration takes precedence over subsequent declarations that are less specific
Example from HTMLdog.com:
div p { color: red; }
p { color: blue; }
Using that stylesheet, any p elements within a div will be colored red, not blue.
What I really suggest you do is get a decent developer tools plugin for your browser (e.g. Firebug on Firefox) and look through the style tracing; it will tell you what is being overridden, and by what.
Add a semi-colon after your color line.
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
Also, you should be using double quotes around your classes in html, along with matching closing tags:
<font class="earnings">hello</font>
Your second font tag is getting parsed as inside your first one, and not showing up.
I'm not sure if you intend to close a font tag with an a tag, but the following code works just fine:
<html>
<head>
<title>CSS Color Example</title>
<style type="text/css">
.adv {color:red;}
.earnings {color:red;}
</style>
</head>
<body>
<div class=adv>hello</div>
<div class=earnings>hello</div>
</body>
</html>
With firebug, use the element inspector (because I do not remember that the semicolons and the quotes was obligatory in the class attribute) and try to see what other selectors are involving whith the class "earnings".
Can you put a jsfiddle example of your problem?