Styling Buttons with HTML - 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

Related

CSS classes don't change with the attribute selector

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.

:visited text-decoration not working as desired

trying to have a button at the top of my page that scrolls to an article on the same page. when its clicked there is an unwanted blue square around the button.
ive tried so many combinations of :visited with outline: none; and text-decoration: none;
can anyone tell me the correct way I can remove the blue out line from this please
<a href="#article1" class="page-scroll">
<button class="btn btn-heading btn-lg">
<span class="fa fa-chevron-down"></span>
<span class="fa fa-chevron-down"></span>
<span class="fa fa-chevron-down"></span>
</button>
</a>
You can use 'outline: none' at a tag like below;
.page-scroll:active, .page-scroll:focus{
outline:none !important;
}
if above doesn't work. you can use like below;
.btn{outline:none !important;}
But if you do like this, web accessibility is lost. The a tag can't be focused with a tab key. So I hope that the outline can be stayed there.
The reason why I used !important. I think your CSS is overrided from another CSS. Please check the element with Chrome developer tools.

Having trouble styling a span within an anchor tag in IE6 CSS

The company I work for still uses IE6 therefore I am required to make sure that my site works in IE6 browsers. I'm having trouble styling due to the constraints of the code design done through SharePoint 2007.
When you hover over a non-active tab, the text should change color from blue to orange.
<div class="webpartBody">
<div class="tabsWrapper">
<a class="quickLinkTabs activeTab" href="#">
<span class="tab0">Clinical</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab1">Business Services</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab2">Employees</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab3">Projects</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab4">Web Links</span>
</a>
</div>
<!-- links -->
</div>
jQuery is utilized to create classes for the quickLinkTabs so that the firstTab and lastTab are labeled as such and that the tab that is currently selected is the activeTab.
Using just this code outside of the SharePoint environment, I apply the following CSS to achieve the effect I'm looking for.
.quickLinkTabs:hover
{
color: #ff6600;
}
.quickLinkTabs span:hover
{
color: #ff6600;
}
As soon as I apply this to the development environment and try this on SharePoint generated code, it no longer works. I cannot figure out what the hindrance is - is it SharePoint? is it my CSS?
There is no purpose for the SPAN to be there in the first place. You should adjust the styling of the A-tag to perform the same functionality.
then use:
.tabsWrapper a { .... }
.tabsWrapper a:hover { ... }

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;}

div inside anchor

This doesn't happen all the time. A bug is not a bug if cannot be reproduced!
First, I thought this was a mistake of my young programming skills but same error appears in my two sites, apparently under the same circumstances.
<a style="display:block;" href="link">
<div>text1</div>
<div>text2</div>
</a>
Sometimes, while browsing, links with divs inside them render strangely, duplicate elements appear on the page with no reason, text gets distributed between different links, a real mess.
Real screenshots:
http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg
Anyone faced this problem? Is there a solution? I'm not interested of fixes involving JavaScript!
I guess your divs in links cause inconsistency in some browsers (may be your css playing here).
"Semantics", valid markup are some buzz words.
So why would you want DIVs in an <A> tag. You can try someting like this
<a href="#">
<span class="divstyle">Text 1</span>
<span class="divstyle">Text 2</span>
</a>
then in CSS
.divstyle {
display: block; //and other styles etc
}
Check your page in a HTML validator. I'm 90% sure that you can't have a <div> element inside inline elements like <a>. Even though you've set the link to display:block, it's still not allowed and the browsers may be spitting their dummy.
What you can do is use spans instead, setting them to block:
<style type="text/css">
.link, .link span { display: block; }
</style>
<a class="link" href="example.com">
<span>text1</span>
<span>text2</span>
</a>