I have product models that look like:
EF 200
That appear in paragraphs of text. I want to prevent the model from being wrapped between two lines due to the space. What method can be used to prevent the wrap? Do I need to enclose it in a span tag and, if so, what CSS property prevents the wrap?
<span style="white-space: nowrap;">EF 200</span>
Of course if you're going to re-use that anywhere, I would break it out and make it its own class.
CSS
white-space:nowrap;
HTML
EF 200
Related
I have to create a primary heading component, below is my markup along with CSS classes. I'm following BEM naming convention for class name.
I have h1 element consists of two spans. One span for main heading text, and second span for sub heading text. The main and sub are variations of my heading.
I have not specified the Element class (Which could be heading-primary__text ) and i have directly attached modifier classes to span elements.
<h1 class="heading-primary">
<span class="heading-primary--main">Video Background Option</span>
<span class="heading-primary--sub">One Page Parallax</span>
</h1>
Is that a right way to follow BEM methodology without specifying Elements classes & attaching Block's modifiers classes to Elements(span)? Because i don't need elements classes.
Is there any alternate?
While this is subjective, and as per the convinience of the project . i'd recommend doing something like this- as you already have a header-primary_text element class
<h1 class="heading-primary">
<span class="heading-primary_text">Video Background Option</span>
<!--create a modifier -->
<span class="heading-primary_text--sub">One Page Parallax</span>
</h1>
In this way you can make the sub a modifier class for the subtext.
More info can be seen here https://en.bem.info/methodology/quick-start/#modifier
Hope this helps :)
I think there is a much simpler way to do this just using basic HTML. You only want to have one h1 per page and since you said that your second span of your h1 is a "subheading" I feel like you would be way better off marking that one as an h2 instead of two spans of different context within one h1 heading! Always good to use the built in benefits of HTML first if you can.
No, it is not the right way. You cannot use block (or element) modifier alone on the HTML tag without specifying the block (or element) class itself.
Please refer to BEM documentation here: https://en.bem.info/methodology/quick-start/#modifier
A modifier can't be used alone From the BEM perspective, a modifier
can't be used in isolation from the modified block or element. A
modifier should change the appearance, behavior, or state of the
entity, not replace it.
Here is a code example from the docs:
<!-- Correct. The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
<!-- Incorrect. The modified class `search-form` is missing -->
<form class="search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
You mentioned that you don't need an element class, this topic is also covered in BEM docs
https://en.bem.info/methodology/faq/#why-include-the-block-name-in-modifier-and-element-names
semuzaboi's suggestion sounds as a good alternative to me.
First of all, elements are specified after two __ like block__element_modifier.
Secondly, yes. Blocks may not have any elemenets inside, but rather have modifiers (most common case a block with lang modifiers for Internationalization (block_lang_ru))
PS as well as element may not have any modifiers inside. But block can not be nested inside another one. They should be placed inside one directory on the same level.
Since the font tag in HTML is being deprecated in HTML5 (and I understand why) is there a clean solution for applying certain attributes and styles to only portions of a paragraph text? I'm using JavaScript to parse an XML file that relies on the fact that the font tag allows portions of wrapping text to be formatted using class-based CSS. I realize the "anchor" (a) tag could also be used for this purpose, but that way seems very backwards and unnatural.
EDIT
When I asked this question (a couple years ago now) I was failing to understand that every DOM element falls into a display category, the two primary categories being:
block - insists on taking up its own row
inline - falls in line with other inline elements or text
HTML offers two generic container elements, each of which by default adheres to one of these display values; div for block display, and span for inline display.
The span element is the perfect way to designate a certain chunk of text and give it a unique style or ID because you can wrap it around part of a larger paragraph without breaking the selected contents into a new row.
The span tag would be the best way.
Although inline CSS is typically not recommended, here is an example:
<p>
This is my <span style="font-weight:bold">paragraph</span>.
</p>
span and div are similar, but the div tag is a block element, so it will cause line-breaks. span is an inline tag that can be used inline with your text.
HTML:
<span class="yourstyle">
Text in your style
</span>
CSS:
.yourstyle {
color: red;
}
you could use a <span> tag
<p>here is your paragraph text and it goes on and on and on..... and now
lets start some <span>formatted text.</span> here is another<span>section
of formatted text</span> here is unformatted text<p>
you can either do inline styles such as <span style="color: #000000; font-family: calibri, arial, helvetica;"> or you can just apply a class to your span, like <span class="textformat1" and <span class="textformat2">. then just apply different css rules based on the class.
.textformat1 {
color: red;
}
.textformat2 {
color: blue;
}
hope this helps
Always use css files to hold your code which will be considered "universal" for each element you set. When you want to set for a specific, lets say <span> element. You would do just as Adam Plocher said above, use the style="" attribute for the <span>element.
I have a <p>Example string</p> With some text inside. I want to use css to search for a word within that paragraph.
I know this is possible if you have e.g. All you have to do then is:
a[href*="test"]{}
But when I try to do this with my paragraph I can't seem to get it to work. I've tried:
[p*="string"]{}
p[*="string"]{}
The short answer is NO, this is not possible using CSS only, what you are using is element[attr=val] selector which only selects elements with that particular attribute with that specific values. You need to use jQuery or Javascript with a regex to track the pattern and apply styles to its elements.
On the other hand you can create custom attributes with a prefix of data- so for example you can do something like
<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text 2">Dont Touch This</p>
p[data-custom="Holder Text"] {
color: red;
}
Demo
But again, this won't make sense here, you can simply assign the classes if you are aware what elements need to be changed.
You cannot this using CSS only, however you can check this blog post about how to achieve this using jQuery.
Basically you should use :contains selector:
$("p:contains('John')")
I am trying to learn fundamentals of html and markings.
I want to create an anchor which containes two lines of information.
first line: the name of the link
second line: short explanation
e.g.
<a href='#'>
<span>Studies</span>
<span class="alt">-Information about studies</span>
</a>
Is this correct?
How should the following (2nd span) be modified if necessary?
Thank you
PS. Both lines need to be surrounded with span for css-styling.
First off, don't rule out using a br tag. This is a semantically-appropriate place for a br tag (forcing a hard break inside a line or paragraph of text). Plus, if you use a br tag, it may no longer be necessary to put either of the two lines of text in separate tags, unless you want to style them differently.
<a href='#'>
Studies<br/>
-Information about studies
</a>
Second, try viewing the HTML with stylesheets disabled (I do this in Firefox by pressing ctrl-shift-S, with a little help from the Web Developer extension). Is the browser able to render the content in an easy-to-read way based solely on the HTML provided? To some extent, the more readable the "unstyled" content appears, the more semantically-correct the HTML is.
Given that the second line of text seems to be secondary to the first line (a subtitle, not as important, possibly redundant or not entirely essential), putting the first line in a strong tag or putting the second line in a small tag are a couple ways to establish the relative importance of the two lines, if you wish to do so.
<a href='#'>
<strong>Studies</strong><br/>
-Information about studies
</a>
<a href='#'>
Studies<br/>
<small>-Information about studies</small>
</a>
There's some room for personal preference here. These are just two approaches.
It may be a little bit of a stretch using a small tag in a case like this, but it's not entirely inappropriate. A small tag is typically used for "fine print", attribution, disclaimers, or side comments. It doesn't semantically mean the text is small, but it does tend to be used for content that's secondary to something else (that clarifies something else). It should though only be used for text that's short in length.
And a strong tag doesn't have to be styled bold. In fact, that's the whole point of semantic markup: It doesn't specify or imply how the content will be styled; all it does is offer a hint to the meaning or context of the content. A strong tag can reasonably be given a style of font-weight:normal.
In order to achieve that those are in separate lines, try using the <div> tag instead. You can still specify a class for styling, the only difference is that <div>s are block-elements; each of them is rendered on a separate line. Here's the modified version of your code:
<a href='#'>
Studies
<div class="alt">-Information about studies</div>
</a>
Another, slightly more preferable way of doing that is by styling the elements to be block-elements. That can be used by setting the CSS display property to block. Something like:
<a href='#'>
Studies
<span class = "alt block">-Information about studies</span>
</a>
(Note that class = "alt block" means the element has both classes alt and block, and note also that the first <span> is removed because there's no need to style that node with anything).
CSS:
.block {
display: block;
}
Hope that helped you!
Essentially, my question is, what is the difference between the two lines in the body of this HTML document?
<html>
<head>
<style>
.test {color:green; font-weight:normal}
</style>
</head>
<body>
<b class="test">Test with b tag</b><br />
<span class="test">Test with span tag</span><br />
</body>
</html>
The <b> (or even better <strong>) contains semantic information that the text should be highlighted (printed in bold). <span> doesn't have the same connotation to it. If you disable the CSS styles from the document you'll see the <b> text still in bold, but the <span> in normal text.
The distinction is important especially to screen readers that (often) can convey the information to the user. Using spans with classes carry no such information through.
This doesn't mean that you should always use <strong> or <em>: if the purpose is purely stylistic and you're not emphasizing text, it's better to use classes.
As per there functionally there is no such difference but there are some differences like this <b> use to generally bold the text without define font-weight:bold in css.It's easily print text in bold. But for <span> you have to define CSS.
Now the question which one is good. My answer is span because span was created for multiply styling but other tags like <b>, <strong>, <i>, <em> etc are created for represent attribute without using style. So, for an systematic mark if you only want to bold the text then <b> is good but if you want other properties like bold, italic,color etc. Then it's better to use .
As per W3C
The b element represents a span of text offset from its surrounding
content without conveying any extra emphasis or importance, and for
which the conventional typographic presentation is bold text; for
example, keywords in a document abstract, or product names in a
review.
<b> and <strong> have the semantic meaning "should be displayed in bold" while <span> is a general-purpose inline element.
But from a technical point of view there are no real differences between those elements if the proper CSS is applied.
They might look different, because they have default styles applied to them. Since your not removing all the styles before adding your styles, they will look different. And might also look different between browsers.