Fonts and Text Styles
Working with Font Families
<!DOCYTPE HTML>
<HEAD>
<TITLE>font-family</TITLE>
</HEAD>
<BODY>
<P style="font-family: serif">
This sentence is displayed using a serif font
</P>
<P style="font-family: sans-serif">
This sentence is displayed using a sans-serif font
</P>
<P style="font-family: cursive">
This sentence is displayed using a cursive font
</P>
<P style="font-family: fantasy">
This sentence is displayed using a fantasy font
</P>
<P style="font-family: monospace">
This sentence is displayed using a monospace font
</P>
</BODY>
</HTML>
Using Absolute Values
<!DOCTYPE HTML>
<HEAD>
<TITLE>fontsize</TITLE>
<STYLE>
body{
font-size:medium
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Font-Size Property Using Absolute Values </H1>
<P>Following are the different font sizes based on the absolute values:</P>
<LI><P style="font-size: xx-small">xx-small</P></LI>
<LI><P style="font-size: x-small">x-small</P></LI>
<LI><P style="font-size: small">small</P></LI>
<LI><P style="font-size: medium">medium</P></LI>
<LI><P style="font-size: large">large</P></LI>
<LI><P style="font-size: x-large">x-large</P></LI>
<LI><P style="font-size: xx-large">xx-large</P></LI>
</BODY>
</HTML>
Using Relative Values
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-size</TITLE>
<STYLE>
body {font-size: large}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Font-Size Property Using Relative Values </H1>
<P>Base font value</P>
<P style="font-size: larger">This font is larger than the base font</P>
<P style="font-size: smaller">This font is smaller than the base font</P>
</BODY>
</HTML>
the font size of the parant element, BODY, is set to x-large.
first paragraph font size = x-large.
second paragraph font size= xx-large.
third paragraph font size=large
Using Percentage Values
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-size</TITLE>
<STYLE>
body {font-size: 16pt}
</STYLE>
</HEAD>
<BODY>
<H1 style="font-size:20pt">Working with Font-Size Property Using Percentage Values </H1>
This is default Size
<P style="font-size: 100%">
Same size as of default size
</P>
<P style="font-size: 200%">
Size is double the default size
</P>
<P style="font-size: 50%">
Size is half the default size
</P>
</BODY>
</HTML>
100%= defult font size
200%=twice the defult value
50%=half the size of the defult font size.
Working with font-size-adjust property
the font-size-adjust property changes the aspect of the text in a web page
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-size-adjust</TITLE>
<STYLE>
p {
font-family: Futura;
font-size: 100px;
}
span {
border: solid 1px;
}
span.adjust {
font-size-adjust:0.5;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with font-size-adjust Property </H1>
<p><span>Hi</span> <span class="adjust">Hi</span></p>
</BODY>
</HTML>
Working with the font-style property
css provides three values for setting the font styles of text :
normal,=upright and straight letters
oblique, = slanting or leaning letters
italic, =text in italic letters
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-style</TITLE>
<STYLE>
p{
font-size:40px;
}
span.normal {
font-style:normal;
}
span.italic {
font-style:italic;
}
span.oblique {
font-style:oblique;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with font-style Property </H1>
<p><span class="normal">This font style is Normal</span><BR/>
<span class="italic">This font style is Italic</span><BR/>
<span class="oblique">This font style is Oblique</span><BR/>
</BODY>
</HTML>
Working with Web Fonts
Web fonts allow you to use fonts that are not installed on your computer.
before creating the web page, you need a font file to use in your web page.
we are using smaple.ttf
<!DOCTYPE HTML>
<HEAD>
<TITLE>fontsize</TITLE>
<STYLE>
@font-face{
font-family: "MyFont";
src: url(sample.ttf) format("opentype");
}
body{
font-family:myfont;
font-size:medium
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Web font in CSS3 </H1>
<P>In this example we have used local font file, named sample.ttf, to use the font style.</P>
</BODY>
</HTML>
Using the text-transform Property
the text-transform property is used to transform text into uppercase, lowercase, or capitalized letters.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-transform</TITLE>
</HEAD>
<BODY>
<H1>Working with the text-transform Property</H1>
<P>Following is a list of different types of text transformations:</P>
<LI><P style="text-transform:capitalize">my Pargraph</P></LI>
<LI><P style="text-transform:lowercase">MY PARAGRAPH<P></LI>
<LI><P style="text-transform:uppercase">My Paragraph</P></LI>
<LI><P style="text-transform:none">My Paragraph</P></LI>
</BODY>
</HTML>
Using the text-indent Property
The text-indent property is used to change the indentation of the text in a webpage.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-indent</TITLE>
<STYLE>
.foo1 {text-indent: 2in}
.foo2 {text-indent: 2px}
.foo3 {text-indent: 2em}
</STYLE>
</HEAD>
<BODY>
<H1 class="foo1">This header is indented by 2 inches.</H1>
<H1 class="foo2">This header is indented by 2 pixel.</H1>
<H1 class="foo3">This header is indented by 2 em.</H1>
<P style="text-indent: 20%">The first line of text in this paragraph is indented by 20% of the browser window's width.
</P>
<P>
Some text. <span class="foo1">This line of text is
not indented, as text-indent property does not
apply to inline elements that are not the beginning of a line.
</P>
<P style="text-indent: -2in">The first words in this text do not appear onscreen, as text-indent is set to a value of -1 inch.
</P>
</BODY>
</HTML>
Using the text-decoration Property
decorate the text by applying underline, overline, strike outs, and blinking effects.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-decoration</TITLE>
</HEAD>
<BODY>
<H1>Working with the text-decoration Property</H1>
<P style="text-decoration:none;">The text-decoration property in set to none</P>
<P style="text-decoration:underline;">The text-decoration property in set to underline.</P>
<P style="text-decoration:overline;">The text-decoration property in set to overline.</P>
<P style="text-decoration:line-through;">The text-decoration property in set to line-through.</P>
<P style="text-decoration:blink";>The text-decoration property in set to blink.</P>
</BODY>
</HTML>
Using the text-shadow Property
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-shadow</TITLE>
<STYLE>
p{text-shadow: #ff0000 12px -12px 2px;}
</STYLE>
</HEAD>
<BODY>
<H1>Working with text-shadow Property</H1>
<P style="font-size:30px;">Displaying the shadow in the text.</P>
</BODY>
</HTML>
Using the text-stroke Property
you can use the text-stroke property of CSS to display or highlight the outline of a text in a webpage.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-shadow</TITLE>
<STYLE>
p {
font-size: 85px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with text-stroke Property</H1>
<P style="-webkit-text-stroke-color: green;-webkit-text-fill-color: yellow;-webkit-text-stroke-width:3px";">In this example we are using the text-stroke property.</P>
</BODY>
</HTML>
some browsers, such as chrome and mozilla, do not support the text-stroke property unless you use certain specified prefixes with this property.
-webkit prefix to use the property in chrome browser.
in mozilla, you need to use the -moz prefix with the property.
Wrapping text
the text-overflow property of the css is used to wrap the text into the next line of an element.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-overflow</TITLE>
</HEAD>
<BODY>
<H1>Wrapping Text</H1>
<P style="font-size: 25px; height: 1.1em; overflow: hidden;">In this example we are wrapping text by using the text-overflow property of the CSS.</P>
<P style="font-size: 25px; height: 1.1em; text-overflow:clip; white-space: nowrap; overflow: hidden;">In this example we are wrapping text by using the text-overflow property of the CSS.</P>
<P style="font-size: 25px; text-overflow:ellipsis; white-space: nowrap; height: 1.1em; overflow: hidden;">In this example we are wrapping text by using the text-overflow property of the CSS.</P>
</BODY>
</HTML>
Working with Font Families
<!DOCYTPE HTML>
<HEAD>
<TITLE>font-family</TITLE>
</HEAD>
<BODY>
<P style="font-family: serif">
This sentence is displayed using a serif font
</P>
<P style="font-family: sans-serif">
This sentence is displayed using a sans-serif font
</P>
<P style="font-family: cursive">
This sentence is displayed using a cursive font
</P>
<P style="font-family: fantasy">
This sentence is displayed using a fantasy font
</P>
<P style="font-family: monospace">
This sentence is displayed using a monospace font
</P>
</BODY>
</HTML>
Using Absolute Values
<!DOCTYPE HTML>
<HEAD>
<TITLE>fontsize</TITLE>
<STYLE>
body{
font-size:medium
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Font-Size Property Using Absolute Values </H1>
<P>Following are the different font sizes based on the absolute values:</P>
<LI><P style="font-size: xx-small">xx-small</P></LI>
<LI><P style="font-size: x-small">x-small</P></LI>
<LI><P style="font-size: small">small</P></LI>
<LI><P style="font-size: medium">medium</P></LI>
<LI><P style="font-size: large">large</P></LI>
<LI><P style="font-size: x-large">x-large</P></LI>
<LI><P style="font-size: xx-large">xx-large</P></LI>
</BODY>
</HTML>
Using Relative Values
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-size</TITLE>
<STYLE>
body {font-size: large}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Font-Size Property Using Relative Values </H1>
<P>Base font value</P>
<P style="font-size: larger">This font is larger than the base font</P>
<P style="font-size: smaller">This font is smaller than the base font</P>
</BODY>
</HTML>
the font size of the parant element, BODY, is set to x-large.
first paragraph font size = x-large.
second paragraph font size= xx-large.
third paragraph font size=large
Using Percentage Values
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-size</TITLE>
<STYLE>
body {font-size: 16pt}
</STYLE>
</HEAD>
<BODY>
<H1 style="font-size:20pt">Working with Font-Size Property Using Percentage Values </H1>
This is default Size
<P style="font-size: 100%">
Same size as of default size
</P>
<P style="font-size: 200%">
Size is double the default size
</P>
<P style="font-size: 50%">
Size is half the default size
</P>
</BODY>
</HTML>
100%= defult font size
200%=twice the defult value
50%=half the size of the defult font size.
Working with font-size-adjust property
the font-size-adjust property changes the aspect of the text in a web page
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-size-adjust</TITLE>
<STYLE>
p {
font-family: Futura;
font-size: 100px;
}
span {
border: solid 1px;
}
span.adjust {
font-size-adjust:0.5;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with font-size-adjust Property </H1>
<p><span>Hi</span> <span class="adjust">Hi</span></p>
</BODY>
</HTML>
Working with the font-style property
css provides three values for setting the font styles of text :
normal,=upright and straight letters
oblique, = slanting or leaning letters
italic, =text in italic letters
<!DOCTYPE HTML>
<HEAD>
<TITLE>font-style</TITLE>
<STYLE>
p{
font-size:40px;
}
span.normal {
font-style:normal;
}
span.italic {
font-style:italic;
}
span.oblique {
font-style:oblique;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with font-style Property </H1>
<p><span class="normal">This font style is Normal</span><BR/>
<span class="italic">This font style is Italic</span><BR/>
<span class="oblique">This font style is Oblique</span><BR/>
</BODY>
</HTML>
Working with Web Fonts
Web fonts allow you to use fonts that are not installed on your computer.
before creating the web page, you need a font file to use in your web page.
we are using smaple.ttf
<!DOCTYPE HTML>
<HEAD>
<TITLE>fontsize</TITLE>
<STYLE>
@font-face{
font-family: "MyFont";
src: url(sample.ttf) format("opentype");
}
body{
font-family:myfont;
font-size:medium
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Web font in CSS3 </H1>
<P>In this example we have used local font file, named sample.ttf, to use the font style.</P>
</BODY>
</HTML>
Using the text-transform Property
the text-transform property is used to transform text into uppercase, lowercase, or capitalized letters.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-transform</TITLE>
</HEAD>
<BODY>
<H1>Working with the text-transform Property</H1>
<P>Following is a list of different types of text transformations:</P>
<LI><P style="text-transform:capitalize">my Pargraph</P></LI>
<LI><P style="text-transform:lowercase">MY PARAGRAPH<P></LI>
<LI><P style="text-transform:uppercase">My Paragraph</P></LI>
<LI><P style="text-transform:none">My Paragraph</P></LI>
</BODY>
</HTML>
Using the text-indent Property
The text-indent property is used to change the indentation of the text in a webpage.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-indent</TITLE>
<STYLE>
.foo1 {text-indent: 2in}
.foo2 {text-indent: 2px}
.foo3 {text-indent: 2em}
</STYLE>
</HEAD>
<BODY>
<H1 class="foo1">This header is indented by 2 inches.</H1>
<H1 class="foo2">This header is indented by 2 pixel.</H1>
<H1 class="foo3">This header is indented by 2 em.</H1>
<P style="text-indent: 20%">The first line of text in this paragraph is indented by 20% of the browser window's width.
</P>
<P>
Some text. <span class="foo1">This line of text is
not indented, as text-indent property does not
apply to inline elements that are not the beginning of a line.
</P>
<P style="text-indent: -2in">The first words in this text do not appear onscreen, as text-indent is set to a value of -1 inch.
</P>
</BODY>
</HTML>
Using the text-decoration Property
decorate the text by applying underline, overline, strike outs, and blinking effects.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-decoration</TITLE>
</HEAD>
<BODY>
<H1>Working with the text-decoration Property</H1>
<P style="text-decoration:none;">The text-decoration property in set to none</P>
<P style="text-decoration:underline;">The text-decoration property in set to underline.</P>
<P style="text-decoration:overline;">The text-decoration property in set to overline.</P>
<P style="text-decoration:line-through;">The text-decoration property in set to line-through.</P>
<P style="text-decoration:blink";>The text-decoration property in set to blink.</P>
</BODY>
</HTML>
Using the text-shadow Property
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-shadow</TITLE>
<STYLE>
p{text-shadow: #ff0000 12px -12px 2px;}
</STYLE>
</HEAD>
<BODY>
<H1>Working with text-shadow Property</H1>
<P style="font-size:30px;">Displaying the shadow in the text.</P>
</BODY>
</HTML>
Using the text-stroke Property
you can use the text-stroke property of CSS to display or highlight the outline of a text in a webpage.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-shadow</TITLE>
<STYLE>
p {
font-size: 85px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with text-stroke Property</H1>
<P style="-webkit-text-stroke-color: green;-webkit-text-fill-color: yellow;-webkit-text-stroke-width:3px";">In this example we are using the text-stroke property.</P>
</BODY>
</HTML>
some browsers, such as chrome and mozilla, do not support the text-stroke property unless you use certain specified prefixes with this property.
-webkit prefix to use the property in chrome browser.
in mozilla, you need to use the -moz prefix with the property.
Wrapping text
the text-overflow property of the css is used to wrap the text into the next line of an element.
<!DOCTYPE HTML>
<HEAD>
<TITLE>text-overflow</TITLE>
</HEAD>
<BODY>
<H1>Wrapping Text</H1>
<P style="font-size: 25px; height: 1.1em; overflow: hidden;">In this example we are wrapping text by using the text-overflow property of the CSS.</P>
<P style="font-size: 25px; height: 1.1em; text-overflow:clip; white-space: nowrap; overflow: hidden;">In this example we are wrapping text by using the text-overflow property of the CSS.</P>
<P style="font-size: 25px; text-overflow:ellipsis; white-space: nowrap; height: 1.1em; overflow: hidden;">In this example we are wrapping text by using the text-overflow property of the CSS.</P>
</BODY>
</HTML>