CSS classes don't change with the attribute selector - html

My html is linked to the right CSS file and everything and when I point any other element to change color it workes but everytime I deal with classes even when I put .class {color: red;} it doesn't work and for the span[yes]{color: purple;} as well.Is it maybe an outdated CSS, something I need to update?
<!doctype html>
<html>
<head>
<title>Css for bigginers</title>
<link rel="stylesheet" type="text/css" href="../Sandbox/syntax.css">
</head>
<body>
<div>
<span >WHats poppin</span>
<span class= "class">yo Im a span tag</span>
<span class= "deck">yo<strong>Im a span tag</strong> </span>
<span class= "deck">yo Im a span tag</span>
<span class= "yes">yo Im a span tag</span>
im a spanner
<p>This is good</p>
<p>The world is beutiful</p>
<p class="test">I know tell me about it</p>
</div>
</body>
</html>
/***** CSS FILE *****/
span[yes]{
color: purple;
}

This is not how you refer to a class. To refer to a class, you must do it like this:
.yes{
color: red;
}
<span class= "yes">yo Im a span tag</span>

You need to use span.class and span.yes instead of span[yes]. A good practice is not to name the class as class or span or any any keywords used in html or css selectors.

By span[yes] you are addressing to spans that have yes attribute. Instead use
.deck{
color: red;
}
where .deck is the name of the class you set in the html element:
<span class= "deck"></span>

In CSS, span[yes] means a <span> element which has the attribute yes, which is obviously not the case in your code. Either span.[class="yes"] or the shorthand span.yes will work. See the chapter Selectors in the CSS specification.

Related

Styling Buttons with HTML

Pretty basic question regarding button styling in HTML. I'm essentially just trying to link these buttons out and change the color and potentially the size. I realize I have to do this within HTML and no CSS
Here is what I have so far:
<span style="color: blue;"><span style="text-decoration: underline;">Listen for Free:
<a class="button" font color="black" href="#">Spotify</a>
<a class="button">Soundcloud</a>
<a class="button">YouTube</a>
</span>
I've been doing some investigation and here is what I know so far:
I will have to use the <a> property since I'm within HTML
Would <span> be used properly here?
The font color="black" is not showing any results
Use CSS for styling (avoid inline styling whenever you can)
Close everything you open
.blue {color: blue;}
.ulined {text-decoration: underline;}
.blk {color: black;}
<span class="blue"><span class="ulined">Listen for Free:</span>
<a class="button blk" href="#">Spotify</a>
<a class="button">Soundcloud</a>
<a class="button">YouTube</a>
</span>
Answers to your 3 sub-questions:
Anchors are used for linking, using a href attribute (like your 1st button)
span is not the ideal element to wrap all the anchors, div sounds like a better choice semantically. Like this:
.blue {color: blue;}
.ulined {text-decoration: underline;}
.blk {color: black;}
<div class="blue">
<span class="ulined">Listen for Free:</span>
<a class="button blk" href="#">Spotify</a>
<a class="button">Soundcloud</a>
<a class="button">YouTube</a>
</div>
Attributes can't have spaces, you probably wanted inline style, but it's better to use a CSS class instead
Seems like you needs to learn quite a lot about HTML and CSS.
Here's a good starting point: https://developer.mozilla.org/en-US/docs/Web

Why isn't display inline working?

I am having a really odd situation here. I have spent the last 7 hours researching why I cannot get display: inline; to work at all, unless it's on my main page. Nothing seems to be helping.
Here is the relevant coding.
<!DOCTYPE html>
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="name">
<p>*****<p>
Go Back
</div>
<div class="contact">
<p>
<span style="color:#000000">By Phone:</span>
**********
</p>
<p>
<span style="color:#000000">By Email:</span>
****#****.ca
</p>
<p>
<span style="color:#000000">By Mail:</span>
<span style="color:#3300cc">***************</span>
</p>
</div>
</body>
And here is the CSS.
.name {
display: inline;
}
The result is the two items, (The name "****" and the "Go Back" link), appear one on top of each other. I have tried making it a list, but that had no effect. I tried making them both links, but that had no effect. display: inline-block; also has no effect. Nothing I do has any effect on the div class name. I tried changing the name of the div class several times no effect.
The problem here is the the <p> tag is also a block level element. One solution would be to add a style such that a <p> within the .name div is also inline
.name, .name p {display: inline;}
See https://jsfiddle.net/t0z2p9bn/
It would be better to change your html such that the stars are not contained within a <p> tag
<div class ="name">
*****
Go Back
</div>
See https://jsfiddle.net/t0z2p9bn/1/
divs should not be used for inline elements. Did you mean to use a span?
There is a typo - it shouldn't make a difference, but there's an unneeded space after "class" here:
<div class ="name">

unable to target specific css class

trying to target .product-price on-sale to change the color to green but i'm not able to.
HTML
<h2 id="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="USD" />
<link itemprop="availability" href="http://schema.org/InStock" />
<span class="product-price on-sale" itemprop="price">$ 1</span> <del class="product-compare-price"></del>
</h2>
CSS
section#buy h2.product-price-on-sale span {
color:green !important;
}
With reference to your code this should work:
h2#product-price span.product-price.on-sale{
color:green;
}
Your CSS selector is wrong because your .product-price-on-sale class is on your span element not your h2. It should be
section#buy h2 .product-price.on-sale {
color:green !important;
}
A few problems with your selector:
section#buy h2.product-price-on-sale span
First part:
section#buy
It's ok assuming you have an extra wrapper with id buy
<section id="buy">
Second part
h2.product-price-on-sale
Wrong since element h2 doesn't have a classname of product-price-on-sale instead has an id product-price, must be at this point:
section#buy h2#product-price
Third part:
span
It's ok since the span element is inside the h2, but if you want to target the one with class product-price and on-sale your final selector must be:
section#buy h2#product-price span.product-price.on-sale
class="product-price on-sale"
... h2.product-price-on-sale
You wrote it as two classes in the html and as one class in css (space vs dash).
The css for two class selection is .class1.class2.
You also are not targeting the right tag, as pointed by other answers.

Remove underline from link within hyperlinked div

I am using the html below
<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>
the problem i am having is that the only way to remove underline from the span text is using a:link{text-decoration:none;} but this removes underlines from ALL links from the whole page
I have tried
a.logo:link{text-decoration:none;}
but it doesnt remove the hyperlink from the span element.
You have a wrong hierarchy there and bad element selection. In your case, the most accurate CSS would be:
a div.logo span.whologo {text-decoration:none;}
But I suggest this approach:
<div class="logo"><span class="whologo">hyperlinked text </span>
And CSS:
div.logo a {text-decoration:none;}
Or include the span if needed (but only if the span element has underlines, like Hans pointed out in the comment):
div.logo a span.whologo {text-decoration:none;}
Child items cannot influence their parents using CSS. You need to put an ID or class name on your A tag, or find something unique up the tree that you can specify for this element.
Check this out
<style type="text/css">
.linkTst{text-decoration:none;}
</style>
<div class="logo"><a href="" class="linkTst"><span class="whologo">hyperlinked text </span>
</a> </div>
Put a class on your a tag where you don't want the underline
like this : http://jsfiddle.net/UL8SW/
First of all: This is not valid html... And you should give your a a class or id, otherwise this isnt possible with remote css. It is possible with inline css...
Give anchor tag a class.
HTML:
<a href="" class='no-underline'><div class="logo"><span class="whologo">hyperlinked text</span>
CSS:
.no-underline {text-decoration: none;}

HTML Coloring Help?

I really need help :)
I have to put multiple words in a line, each with a different color, I tried wrapping each word in a <div> </div> and styling, but it seems it makes a new line between words.
Try using <span>.
<div>s are used for block-level elements. <span> is used for inline elements, such as text enclosed in a <p> element.
Further reading: Span and div
That's because <div> is a block element. Try <span> (an inline element) instead.
Use a Span tag instead, like
This <span style="color:red;">text</span> is red, but <span style="color:blue;">THIS</span> text is blue!
<div> is a block-level element. This means you either need to apply a display: inline style to it or better yet, use an inline tag such as <span>
use
<span>Text Here</span>
And style it in your css.
Use <span> </span> It is what it is mean to.
Then you can set css classes.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My web</title>
<style type="text/css">
yellow {
color: yellow;
}
</style>
</head>
<body>
Span is not at the <span class="yellow">yellow level</span>.
</body>
</html>