My code was all working correctly until I did a CSS3 validation which told me I needed to move the #import font code line to the first line in the css style file. When, I did that of course I realized the web fonts I had chosen had not been displaying, so I fixed all the sizes, etc. to best display the pages with the chosen fonts.
I can't seem to figure out this last quirk, though. The p a:link, a:visited color blue is not being picked up in the p tags, except for one place in the footnote area (footnote #6)! The other a links within p tags are picking the white color up from the insert-container p a styles. I understand that the last style overrides previous ones, but the selectors are different, so I'm not understanding why this is happening.
I've cleared the cache, tried different browsers, tried changing the colors on each of the a link styles, but if I change it to fix the paragraph text, then it ends up also changing the insert-container link styles.
You can see the issue on my CodePen at https://codepen.io/Ovimel/pen/XQjgeg and the CSS is shown below. Thanks!
CSS3
/*styling for paragraph text links */
p a {
font-weight: 900;
}
p a:link,
a:visited {
color: #194a76;
text-decoration: underline;
}
p a:hover,
a:active {
color: #194a76;
text-decoration: underline;
}
/* styling for colored page inserts from xopixel dot com */
#fullwidth-insert {
padding: 30px 0;
background: #7d654b;
text-align: center;
color: #fff;
font-family: "Carme", sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
.insert-container {
max-width: 85%;
width: 960px;
margin: 0 auto;
}
.insert-heading {
margin: 0;
font-size: 2rem;
font-weight: 300;
padding-bottom: 1rem;
letter-spacing: 0.08rem;
}
/* styling for full-width insert heading links */
.insert-heading a {
color: #fff;
font-family: "Days One", sans-serif;
font-weight: 300;
text-decoration: underline;
}
.insert-heading a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/* styling for full-width insert paragraph links */
.insert-container p a:link,
a:visited {
color: white;
font-weight: 700;
text-decoration: underline;
}
.insert-container p a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/*styling for footnotes*/
p.footnote {
font-size: 0.8em;
/*10 pt 13px */
}
Higher specificity will beat out order in the stylesheet. This selector:
.insert-container p a:link
has higher specificity than this one:
p a:link
You can see the selector is more specific as it targets links inside a p inside the .insert-container div. For more on the how it is calculated by the browser: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Related
I'm trying to run this code on Visual Studio Code and faced these errors:
at-rule or selector expected at Ln1 Col1, Ln7 Col 1, Ln50 Col1
{ expected at Ln2 Col1, Ln51 Col 1
I tried to run these on W3Schools and they ran just fine. How can I solve this issue? Here's the code, thank you!
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
}
/* Text Display */
h1 {
font-family: georgia, "Times New Roman", Times, serif;
color: black; /* Set text color to black */
text-align: center;
}
#p1 {
font-family: Arial, Helvetica, sans-serif;
color: blue; /* Set text color to blue */
text-align: center;
}
.center {
font-family: Arial, Helvetica, sans-serif;
color: green; /* Set text color to green */
text-align: center;
}
/* unvisited link */
a:link {
color: blueviolet;
}
/* visited link */
a:visited {
color: gray;
}
/* mouse over link */
a:hover {
color: blue;
font-weight: bold;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<h2 id="p1">Enjoy numerous movie reviews and recommendations here.</h2>
<h3 class="center">Featured movie of the week:</h3>
<p><b>Everything Everywhere All at Once</b></p>
</body>
</html>
In Visual Studio Code bottom right, change Language Mode to HTML from CSS.
Sometimes your editor could have extra characters accidently placed somewhere
To see those you can refer this whitespace
Otherwise copy your entire code a normal notepad in windows and paste it back to VS Code
Or you can use Notepad++ and see all characters and then delete them
Otherwise copy paste you code piece by piece one style at a time, you can narrow the issue
Hej, can anybody help me with the problem with menu. When I'm clicking on the link, it's not opening you can see the problem here http://hostryy.5gbfree.com/INDEX.html
You added this styles.
.mail a:link, a:visited, a:active {
position: relative;
top: 40px !important; <= You need to remove this line
color: black;
text-decoration: none !important;
font-family: "raleway", sans-serif;
font-weight: 300;
}
Go to style.css on 207 line remove this or make it 0
I have h2 tag and there is content :before.
HTML
<h2 class="glyphicon arrow-heading text-white margin-zero" style="z-index: 1;">
This is h2 tag and it has word spacing problem
</h2>
CSS
.arrow-heading:before {
content: "\e072";
color: #9B0D25;
float: left;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.text-white {
color: #FFF;
}
.margin-zero {
margin: 0em;
}
h2 {
font-size: 1.5vw;
}
But I get extra spacing as shown below without text-align: justify;
I want no extra spacing.
EDIT
With text-align: justify;
I answered in the comments, but the Glyphicon Haflings font is being applied to the entire <h2> tag, and this will cause the spacing problem. The font should only be applied to the element that is specifically containing the Glyphicon.
To increase specificity, you could use an <i> tag as the first child of <h2>, and another would be (as OP did) moving the font-family to the .arrow-heading:before selector in your CSS.
I have the following css that is used to make one link coloured but it applies to all of the links I have. Is there any way to stop this.
This is my css that is getting applied to the links:
a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #CCC;
text-decoration: none;
background-color: #C00;
display: block;
border-radius: 5px;
z-index:10;
}
This is the link that it is suppose to get applied to:
<td>Food</td>
This is the link that I don’t want it to get applied to:
<td class="footer"><b>Top Attractions</b>
You could select your a tag by the href like this:
JSFiddle - DEMO
a[href="Food.html"] {
color: red;
}
Updated: DEMO (with your codes)
Working JSfiddle: demo
I gave the link you wanted to style a class and gave the class a style.
a.food :visited
instead of a:visited
Try this
HTML
<td><a href="Food.html" class="colored>Food</a></td>
CSS
.colored{
color:red;
}
One thing you could do, would be to give the tag an id/class and then refer to that in your css.
You could add a class to the link you want different and style it separately.
HTML:
<td class="footer"><b>Top Attractions</b>
CSS:
a.rides {...}
Apply a class to the links you want to effect:
<a href='food.html' class='apply_to_this'>Food</a>
Then in your CSS:
a:link.apply_to_this{
// your styles
}
You can add a class to the links you wan't to apply this rule, or you can use this rule :
a:not(.footer):link {...}
Rather than stopping it being applied to one link, you need to add a class to that link with additional CSS that overrides the styles you want to change, or (though this is bad practice...) use inline styles on that one link.
Proper solution:
In your CSS
.exception {put css here that will override the general link css, using !important to override it ifnecessary}
In your html
Content here
Quick and dirty solution
Content
Though this way will work, it is rightly frowned upon for accessibility issues.
You can just create a class and apply it to that link like mentioned above or you can just follow through your selectors to tell CSS to apply that link code to only a:links within those selectors like I've posted below:
#mainContainer #footer #etc #etc a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
PS - Inline styles are very bad practice. It adds tons of extra code that will reduce your rankings for Google, Yahoo, MSN, etc. Not to mention it makes code harder to read and more clunky.
I have in my CSS:
body
{
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
color: #666666;
}
a:link
{
color: rgb(124,71,111);
text-decoration: underline;
}
a:visited
{
color: rgb(41, 12, 36);
}
a:hover
{
color: rgb(91,25,79);
text-decoration: none;
}
a:active
{
color: #AB6D9C;
}
the question is to the latter tag ".remove-linkcolor"
.remove-linkcolor
{
}
I would like the links to 'a' that is associated with the class '.remove-linkcolor' the following attributes are changed:
The color is the same color of normal text
How to avoid duplication of code and put the same color of another tag?
Remove effects of active, hover normally would, but to continue as a link, so if you click the User, the same is executed.
Not sure I understand your question 2. However, I think this is the answer you need:
The only way to remove duplication of code in CSS is through combined selectors, something like:
body {
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
}
body, .remove-linkcolor {
color: #666666;
}
But then you end up repeating the selector, often. The only other way is not to do CSS: use SASS or similar CSS compiler.