Span style background color html

Highlighting text in html using different color background by span tag

We can mark any area of a text in different color background. This way we can highlight some portion of the text. We will be using span tag in html to give color background to the text. Note that we are not using bold tag here to highlight the font in bold letters.

With Div tag

Span tag is also used along with div tag for generating power full CSS effects. We will try how we can format a particular area of text by using span tag and style sheet.

Before that let us start with an simple example. Using span tag we can mark different areas in different colors. Here is the code for a simple span tag.

Welcome to plus2net html section. Use the forum to post any query / doubts on the tutorial

 Welcome to plus2net html section. 
Use the forum to post any query / doubts on the tutorial 

Span tag with CSS

Let us use span tag along with CSS to define a format for text. We will keep the following code inside the head tags of our html page. This way we are creating one embedded style sheet which will affect the document only.

  
 highlighting 
 color:brown; 
font-weight:900; 
font-size:100%; 
font-family:sans-serif; 
background-color: #ffff00; 
 
> 
-->

 We can use style property with span to create formatted text for use any where. 

Span tag with background image

 Here we are using style property to add background image to this line of text as an example 

Here we are using style property to add background image to this line of text as an example

Span tag with mouse hover style

 To check the example place your mouse here and wait. 

plus2net.com

Источник

Span HTML – How to Use the Span Tag with CSS

Kolade Chris

You can use the HTML span tag as a container to group inline elements together so you can style or manipulate them with JavaScript.

In this article, I will show you how to use the span tag to make a certain part of your content distinct from the rest. Then you should be able to start using it in your coding projects.

What is the span tag used for?

The span tag is just like a div, which is used to group similar content so it can all be styled together.

But span is different in that it is an inline element, as opposed to div , which is a block element.

Also, keep in mind that span itself does not have any effect on its content unless you style it.

There are two major uses of the span tag – styling and manipulating a particular text with JavaScript.

How to style text with the span tag

If you want to makes some particular text or any other content different from the rest, you can wrap it in a span tag, give it a class attribute, then select it with the attribute value for styling.

In the examples below, I change the color , background-color , and font-style of some text by wrapping it in a span tag.

How to change the text color

This a crimson text within others.
 

I have added some basic CSS to center everything on the page:

How to change background color

 
A green background color perfectly implies the beauty of nature.
 

How to change font style

 
An italic font style could be instrumental in laying emphasis on a text.
 

How to Manipulate JavaScript with the span tag

Just as it is possible to style content by wrapping a span tag around it, you can also manipulate your content by wrapping it in a span tag. You give it an id attribute and then select it by its id with JavaScript so you can manipulate it.

In the example below, I changed some text within other text to uppercase with JavaScript:

 
The text, freecodecamp, was turned to upperase with JavaScript
 

const uppercase = document.querySelector("#uppercase"); uppercase.style.textTransform = "uppercase"; 

Conclusion

In this tutorial, you have learned how to manipulate a particular piece of text with CSS and JavaScript by wrapping it in a span tag and giving it a unique class or id attribute.

Please note that in cases like this, you should use classes for styling and ids for manipulation with JavaScript in order to avoid confusion.

Thank you for reading, and keep coding.

Kolade Chris

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

HTML тег

Чтобы не задавать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для идентификации тега использовать атрибуты class или id с именем селектора.

Тег не оказывает никакое влияние на визуальное оформление элементов и не имеет семантического значения.

Синтаксис

Тег — парный, его содержимое пишется между открывающим () и закрывающим () тегами.

Пример

html> html> html> head> title>Заголовок документа title> head> body> p>У моей кошки span style="color: green;">зеленые span> глаза. p> body> html>

Результат

В этом примере мы задали стиль непосредственно в теге.

Пример

html> html> head> title>Заголовок документа title> style> .letter < color: red; font-size: 300%; /* Размер шрифта в процентах */ position: relative; /* Относительное позиционирование */ top: 7px; /* Сдвиг сверху */  style> head> body> p>span class="letter">О span>на нанесла в руках отвратительные, тревожные желтые цветы. И эти цветы очень отчетливо выделялись на черном ее весеннем пальто. p> p>Михаил Булгаков p> body> html>

Результат

В этом примере мы добавили к тегу атрибут class , и отдельно задали стили для содержимого тега.

Атрибуты

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

How do I set span background-color so it colors the background throughout the line like in div (display: block; not an option)

Then the html is rendered, the span-elements background is only changed underneath the text. Is it somehow possible to make the background-color extend throughout the line without changing display to block or inline-block. Or is there a way to achieve this with javascript?

The reason display: block; is a problem, is that there can be text and a span-start at the same line. The div would introduce a linebreak that is not supposed to be there.

Hi @MichaelAndersen. i see you’re still a S.O. user while at the UofC ;-)—~~ . . . . could you please accept an answer on this question, so a good one is prioritized to the top? (It’s silly that S.O. sorts this incomplete/inaccurate answer to the top since the question doesn’t have an ✓ Accepted Answer. At first glance, one might be prone to heed the advice on the first response, instead scrolling to find the more accurate ones below.)

4 Answers 4

you can achieve this by formatting your text in a different way. I have achieved what I believe you are looking for with the following:

  
some text and some text with a different background and some more text
 
 
 
Not in safari or firefox. I am sorry if i was not clear enough. The background-color have to continue to the end of the containing box. In this case the right side of the pre-element.
 
The span element is inline, so it just changes the background for where you’ve placed it. Since it’s also within a tag, if you want it to change the background for whitespace around the text too, then you can include that whitespace within the span.
 
For example, this would make the background change for some whitespace at the end of each line as well as behind the text (but only because of the pre is the whitespace is taken into account, without the pre the whitespace would be ignored as normal.)
 
 
some text and some text 
with a different background and some more text
 
 
 
What is preventing you from using a block element? It would be much better to either make the span display as a block element rather than inline when it’s in this specific part or just use a block element to begin with, rather than a span. For example,
 
   pre span  
some text and some text 
with a different background and some more text
 
   
 
Источник
 
Using CSS to change span background color has no effect
 
I have applied background-color: #C0C0C0; to my span element .grey_bg but the background is not changing color. Why is that?
 
Read the specs for on MDN — Permitted content: Phrasing content, headings i.e. cannot be included, because it is not phrasing content.
 
4 Answers 4
 
Because it’s not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span
 
. or make span block-level too:
 
First your markup is not correct. You can’t have a block element, h3 , inside an inline element, span .
 
But in case you want to keep that markup, you have to make the container element to behave as block . So make it as:
 
Your code is incorrect because your span is wrapping your H tag.
 
You should not use span to wrap inline element’s like H tag’s. Instead you want the span to be inside your H tag.
 
 
The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements. The line between the two different types might seem fairly arbitrary at first. The difference to bear in mind is the type of content, and how it would appear when written down without any styling. A div is placed around a group of block level elements—for example, to wrap a heading plus a list of links to make a navigation menu. A span wraps a group of inline elements or (most usually) plain text. The key word is “group”: if a div wraps just one block-level element, or a span just one inline element, it’s being used unnecessarily. For example, check out the way the div and span elements are used in the following simple markup:
 
 
Источник