How To Change Text Fonts for Some Parts of a Paragraph

Q

How To Change Text Fonts for Some Parts of a Paragraph? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements

✍: 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:
Changing Fonts

2007-05-12, 5384👍, 0💬

Can DIV Elements Be Nested
Can DIV Elements Be Nested? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements 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: ... 2007-05-12, 5504👍, 0💬

What Is a DIV Tag/Element
What Is a DIV Tag/Element? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements 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 pa... 2007-05-12, 5484👍, 0💬

How To Change Text Fonts for Some Parts of a Paragraph
How To Change Text Fonts for Some Parts of a Paragraph? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements 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. He... 2007-05-12, 5385👍, 0💬

Can DIV Elements Be Floated
Can DIV Elements Be Floated? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements 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" ?&... 2007-05-12, 5372👍, 0💬

What Is the HEAD Tag/Element
What Is the HEAD Tag/Element? - XHTML 1.0 Tutorials - Document Structure and Head Level Tags The head element is the second element you need to learn. The head element is used to provide information about the XHTML document. The head element should not be used to contain any contents of the XHTML do... 2007-05-12, 5256👍, 0💬

How Many Document Types Defined in XHTML 1.0
How Many Document Types Defined in XHTML 1.0? - XHTML 1.0 Tutorials - Document Structure and Head Level Tags There are only 3 document types are defined in XHTML 1.0: 1. Strict type: Only allow non-deprecated and non-frameset XHTML elements in this type. Strict type should be declared as below: &... 2007-05-12, 5086👍, 0💬

What Is a SPAN Tag/Element
What Is a SPAN Tag/Element? - XHTML 1.0 Tutorials - Understanding DIV and SPAN elements 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 ar... 2007-05-12, 5048👍, 0💬

What is the Top Level Structure of an XHTML Document
What is the Top Level Structure of an XHTML Document? - XHTML 1.0 Tutorials - Document Structure and Head Level Tags The top level structure of a XHTML document consists of three parts: XML processing instruction - Provides XML version information and character set declaration. Document type declara... 2007-05-12, 5047👍, 0💬

What is the Second Level Structure of an XHTML Document
What is the Second Level Structure of an XHTML Document? - XHTML 1.0 Tutorials - Document Structure and Head Level Tags The second level structure of an XHTML document consists of two parts: Head element - Contains information about the current document, such as its title, keywords that may be usefu... 2007-05-12, 4956👍, 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.