Changing Fonts a Paragraph with HTML 'span'

Q

How To Change Text Fonts for Some Parts of a Paragraph?

✍: FYIcenter.com

A

If you want to change text fonts or colors for some parts of a paragraph, you can use "span" element with "style" attributes to specify font and color information as CSS properties. Here is a tutorial example of using "span" elements to change text fonts:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Changing Fonts with SPAN Elements</title>
 </head>
 <body>
  <h4>SPAN Elements?</h4>
  <p><span style="font-family: 'time roman'; font-size: 18pt;
   font-weight: bold; color: red">I</span> 
   don't 
   <span style="font-size: 16pt; font-weight: bold; 
   font-style: italic; color: red">see</span>
   any 
   <span style="font-family: courier; font-size: 14pt;
   font-weight: bold; color: blue">SPAN elements</span>
   in this paragraph. Do you 
   <span style="font-size: 16pt; font-weight: bold; 
   font-style: italic; color: red">see</span>
   any 
   <span style="font-family: courier; font-size: 14pt;
   font-weight: bold; color: blue">SPAN elements</span>
   here? What is a SPAN element anyway?</p>
 </body>
</html>

If you save the above document as changing_fonts.html and view it with Internet Explorer, you will see that different parts of the paragraph are having different fonts and colors as shown below:

HTML span Element Used to Change Text Font

⇒ HTML Interview Questions

⇐ HTML 'span' Tag/Element

⇑ HTML 'div' and 'span' elements

⇑⇑ HTML Tutorials

2017-03-07, ∼4176🔥, 0💬

Nested HTML 'div' Elements
Can "div" Elements Be Nested? Can "div" elements be nested? The answer is yes. In fact, nested "div" elements provides you more flexibilities to specify CSS properties at different levels. Here is a tutorial example of nested "div" elements: <?xml version="1.0" ?> <!DOCTYPE html... 2017-03-11, ∼2215🔥, 0💬

Using HTML 'div' Elements with CSS Properties
How To Use "div" Elements to Change CSS Properties? As elements containers, "div" elements are perfect places to set CSS properties which will be applied to all elements in the container. Here is a tutorial example of how to set CSS properties on "div" elements: <?xml version="1.0" ?> ... 2017-03-11, ∼1912🔥, 0💬

HTML 'div' Tag/Element
What Is a "div" Tag/Element? A "div" element is a block element that you can use a container of flow elements (flow elements are really the superset of both inline elements and block elements). By default, "div" elements will be treated as paragraphs by most browsers. Here are basic rules about an "... 2017-03-11, ∼1860🔥, 0💬

HTML 'span' Tag/Element
What Is a "span" Tag/Element? A "span" element is an inline element that you can use a container of inline elements and text contents. By default, browsers will do nothing on "span" elements unless specify some CSS properties in them. Here are basic rules about an "span" element: "span" elements are... 2017-03-11, ∼1859🔥, 0💬

Interview Questions - HTML Block Elements
Where to find Interview Questions on HTML Block Elements? Here are some interview questions on HTML Block Elements: What is a block element? Is "h1" a block element? Is "br" a block element? Is "pre" a block element? Can you use a block element inside a "p" element? Can you use a block element insid... 2017-03-07, ∼1848🔥, 0💬

Interview Questions - Basic Concepts
Where to find Interview Questions on XHTML Basic Concepts? Here are some interview questions on HTML basic concepts: What is HTML? How is HTML related to XHTML? How is HTML related to XML? What are the main advantages of XHTML over HTML? Is an XHTML document an XML document? Is an XML document an XH... 2017-03-07, ∼1835🔥, 0💬

Interview Questions - HTML Inline Elements
Where to find Interview Questions on HTML Inline Elements? Here are some interview questions: What is an inline element? Is "h1" an inline element? Is "br" an inline element? Is "strong" an inline element? Can you use an inline element inside a "p" element? Can you use an inline element inside a "li... 2017-02-28, ∼1835🔥, 0💬

HTML Interview Questions
Where to find tutorials of introduction to HTML Interview Questions? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team in introduction to HTML Interview Questions. You can find answers to these questions in other parts of this tutorial collection. I... 2017-03-07, ∼1815🔥, 0💬

Floating HTML 'div' Elements
Can "div" Elements Be Floated? Can "div" elements be floated? The answer is yes. If you want to float a "div" block, you can use the "float" CSS property. Here is a tutorial example of floated "div" elements: <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 St... 2017-03-11, ∼1736🔥, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.