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>
Related
In the html I have below code. Text without the span element is getting space around it. But Text with the span element is not getting the space aournd it. Why there is space around the text, but not with span. This might be some behavior, I am new to this one. I searched in google but didn't get articles related to this behavior
Sample Text
<span>Sample Text</span>
Text without span element is getting space because of the body.
span is an inline tag it takes space as much as required and leaves space for other element.
below example all four-span element will display in the same line because each tag takes only necessary space and rest of space free for other elements.
<!DOCTYPE html>
<html>
<head>
<title>Test span tag</title>
</head>
<body>
<h2>Welcome To stackoverflow</h2>
<!-- span tags with inline style/css -->
<span style="background-color:powderblue;">
Stack</span>
<span style="background-color: lightgray;">
-Contribute-</span>
<span style="background-color: yellow;">
Article</span>
<span style="background-color: lightgreen;">
STCK</span>
</body>
</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.
I want to hide a header text from the website.
because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.
I have tried it. The result is that it will remove other page's header too.
is there a way to apply CSS so that it only hides when the header text contains specific words?
i will be appreciate for any help i may get here
If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.
<header style="display: none;"></header>
Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.
There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.
In your H2 tag that you want to hide, you can apply a class.
<html>
<head>
<style>
.hide-me { display: none; }
</style>
</head>
<body>
<h2>First header</h2>
<h2 class="hide-me">Your header</h2>
</body>
</html>
It's better to move the tag into a CSS file, but this will accomplish what you want.
You need to just add a id to your specific header and apply style to it.
CSS 101.
<head>
<style> //Internal CSS
#hide {
display: none;
}
</style>
</head>
<body>
<h2 id="hide"> Hello World </h2>
<h2> ... </h2>
<h2> ... </h2>
</body>
If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.
The last and least used method is to use inline CSS :
<h2 style="display: none"> ... </h2>
More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display
If you want to use the same style in more than one place use 'class' instead of id.
<head>
<style> //Internal CSS
.hide {
display: none;
}
</style>
</head>
<body>
<h2 class="hide"> Hello World </h2>
<h2> ... </h2>
<h2 class="hide"> Lorem Ipsum </h2>
</body>
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">
I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
Thanks!
The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.
text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
I recommend either changing the span to a <p> element, or specifying the display: block property on your span.
Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.
Hope that helps!
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
example:
<div style="text-align: center">Coded by AnnualMelons</div><br>
Use this in style
margin-left: 50%;
example-
<span style="margin-left: 45%;">Centered Text</span>
.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.