Scribd
Upload
43 views

Web Engineering: Font, Text & Background

This document discusses CSS properties for formatting text and fonts. It describes block-level elements like <p> that create boxes with line breaks, and inline elements like <span> that don't. It explains the CSS box model of margins, borders, padding, and content. It also covers various font properties, text formatting properties, and other CSS features for styling text.

Uploaded by

Radhay35335
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
43 views

Web Engineering: Font, Text & Background

This document discusses CSS properties for formatting text and fonts. It describes block-level elements like <p> that create boxes with line breaks, and inline elements like <span> that don't. It explains the CSS box model of margins, borders, padding, and content. It also covers various font properties, text formatting properties, and other CSS features for styling text.

Uploaded by

Radhay35335
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

Web Engineering

Lecture 07
Font, Text & Background
(CSS - II)

1
Block-Level Elements
• A block level element in HTML create a “block” or
“box”.

• Browsers typically display the block-level element


with a new line.

• Block level elements may contain inline elements


and other block-level elements.

• The block level elements create “larger” structure


than inline elements.
List of Block-Level Elements
<address> <figcaption> (HTML5) <ol>
Contact information Figure caption Ordered list
<article>(HTML5) <figure>(HTML5) <output>(HTML5)
Article content Groups media content with a Form output
caption
<aside>(HTML5) <footer>(HTML5) <p>
Aside content Section or page footer Paragraph
<audio>(HTML5) <form> <pre>
Audio player Input form Preformatted text
<blockquote> <h1><h2><h3><h4><h5><h6> <section>(HTML5)
Long (“block”) quotation Heading levels 1 - 6 Section of the page
<canvas>(HTML5) <header>(HTML5) <table>
Drawing canvas Section or page header. Table.
<dd> <hgroup>(HTML5) <tfoot>
Definition description Groups header information Table footer
<div> <hr> <ul>
Document division Horizontal rule (dividing line) Unordered list
<dl> <fieldset> <video>(HTML5)
Definition list Field set label Video player
Inline Elements
• An Inline element in HTML occupies only
the space bounded by the tags that define
the inline element.

• Generally, inline elements may contain


only data and other inline elements.

• By default, inline elements do not begin


with new line.
List of Inline Elements
<b> <big> <i>
<small> <tt> <abbr>
<acronym> <cite> <code>
<dfn> <em> <kbd>
<strong> <samp> <var>
<a> <bdo> <br>
<img> <map> <object>
<q> <script> <span>
<sub> <sup> <input>
<button> <label> <select>
<textarea>
The <span> & <div> Tags
• A <span> ... </span> element defines an
“inline” structure, i.e. it simply defines a
stretch of text. Thus it can be used within
a paragraph or table element without
affecting the flow of the text.

• A <div> ... </div> element defines a


“block” structure. Usually the browser will
place line breaks before and after this
element, but otherwise it has no effect
itself.
The Box Model
• CSS operates on something known as the
box model.

• When displaying documents, CSS treats


each element in the document as a
rectangular box.

– Components of a box
• Content
• Padding
• Border
• Margins
The Box
Margin

Element Content
Padding

Border

Default value for margins, borders, and padding is zero.


However, width can be specified using CSS. Different widths
can be given for each side of the box.
Paragraph
• Example:
• Make all paragraphs have 10 spaces indentation
(hint: 6em) and make a text red.
• p{
text-indent: 6em;
color: red;
}
<body>
<p>This is the first paragraph<br />
with the red text and large indent.</p>
<p>This is the second paragraph<br />
with the red text and large indent.</p></body>
CSS Font Properties
• You can set following font properties of an
element:
 The font-family property is used to change the
face of a font.
 The font-style property is used to make a font
italic or oblique.
 The font-variant property is used to create a
small-caps effect.
 The font-weight property is used to increase or
decrease how bold or light a font appears.
 The font-size property is used to increase or
decrease the size of a font.
font-family
• <p style="font-family: georgia, garamond,
serif;">
This text is rendered in either georgia,
garamond, or the default serif font
depending on which font you have at your
system. </p>

• Output:
This text is rendered in either georgia,
garamond, or the default serif font
depending on which font you have at your
system.
Generic Font Family
• These are the generic name values for the
font-family property, followed by an example
of each that the browser might select from
the user’s system fonts:
Generic font-family Names Example
serif Times New Roman
sans-serif Arial
cursive Zapf-Chancery
fantasy Western
monospace Courier

12
font-style
• <p style="font-style: italic;">
This text will be rendered in italic style.
</p>

• Output:
This text will be rendered in italic style.

• Possible Values:
normal, italic, oblique(more slanted than
normal)
13
font-size
• <p style="font-size: 20pt;">
This font size is 20 pixels.
</p>

• Output:
This font size is 20 points.

• Possible values:
px, small, xx-small, x-small, medium, large, x-
large, xx-large or in %
14
font-weight
• <p style="font-weight: bold;">
This font is bold.
</p>

• Output:
This font is bold.

• Possible values:
normal, bold, bolder, lighter, 100, 200, 300, 400,
500, 600, 700, 800, 900
15
font-variant
• <p style="font-variant: small-caps;">
This text will be rendered in small caps. </p>

• Output:
THIS TEXT WILL BE RENEDERED AS
SMALL CAPS.

• Possible values:
normal, small-caps

16
line-height
• The line-height property is used to set the
vertical distance between the baselines of
adjacent lines of text.

• You can use only this property with block-


level elements.

17
line-height
• <p style=“line-height: 120%;”>
The line-height property is just spaces the lines.
and this is the second line.</p>

• Output:
The line-height property is just spaces the lines.
and this is the second line.

• Possible Values:
normal or any number with %, px or em unit

18
CSS Text Formatting
• You can set following text properties of an
element:
 The color property is used to set the color of a
text.
 The letter-spacing property is used to add or
subtract space between the letters.
 The word-spacing property is used to add or
subtract space between the words.
 The text-indent property is used to indent the
text of a paragraph.
 The text-align property is used to align the text
of a document.
 The text-decoration property is used to
underline, overline and strikethrough text.
 The text-transform property is used to
capitalize text or convert text to uppercase or
lowercase letters.
 The text-shadow property is used to set the
text shadow around a text.
 The white-space property is used to control
the flow and formatting of text.

20
color
• <p style=“color: red;” >
This text will be written in red.
</p>

• Output:
This text will be written in red.

• Possible values:
any color name in any valid format.
21
letter-spacing
• <p style=“letter-spacing: 5px;” >
This text is having space between letters.
</p>

• Output:
This text is having space bet
w e e n l e t t e r s.

• Possible values:
normal or a number.
22
word-spacing
• <p style=“word-spacing: 5px;” >
This text is having space between words.
</p>

• Output:
This text is having space between words.

• Possible values:
normal or a number.
23
text-indent
• The text-indent property is used to indent
only the first line of text within an element.

• The default value for this property is 0.

• It only applies to block-level elements.

24
text-indent
• <p style=“text-indent: 1cm;” >
This text will have first line indent by 1cm.
and this line will remain at its actual position.
</p>

• Output:
This text will have first line indent by 1cm.
and this line will remain at its actual position.

• Possible values:
% or a number.
25
text-align
• <p style=“text-align: right;” >
This will be right aligned.
</p>

• Output:
This will be right aligned.

• Possible values:
left, right, center, justify
26
text-decoration
• <p style=“text-decoration: underline;” >
This will be underline.
</p>

• Output:
This will be underline.

• Possible values:
none, underline, overline, line-through, blink

27
text-transform
• <p style=“text-transform: uppercase;” >
This will be in uppercase.
</p>

• Output:
THIS WILL BE IN UPPERCASE.

• Possible values:
none, capitalize, uppercase, lowercase
28
white-space
• The white-space property is used to specify
whether the blank space between words
both horizontally and vertically is collapsed
to a single character space or is retained
and preserved as is.

• The white space property is used with


block-level elements.

29
white-space
• <p style=“white-space: pre;” >
This text has a line break
and the white-space pre setting tells the browser.
</p>

• Output:
This text has a line break
and the white-space pre setting tells the browser.

• Possible values:
normal, pre,
30
text-shadow
• <p style=“text-shadow: 4px 4px 8px blue;” >
If your browser supports the css text-shadow
property, this text will have a blue shadow.
</p>

• Output:

• Possible values:
numbers
31
CSS background Properties
• You can set background of various HTML
elements:
 The background-color property is used to set the
background color of an element.
 The background-image property is used to set the
background image of an element.
 The background-repeat property is used to control
the repetition of an image in the background.
 The background-position property is used to
control the position of an image in the background.
 The background-attachment property is used to
control the scrolling of an image in the background.
background-color
• <p style=“background-color: yellow;” >
This text has a yellow background. </p>

• Output:

• Possible values:
any color in a valid format.

33
background-image
• <table style=“background-image:url(images/css.gif);” >
<tr><td>
this table has background image which repeats multiple
times.
</td></tr>
</table>

• Output:

• Possible values:
any image with valid format

34
background-repeat
• <table style=“background-image: url(images/cat.gif);
background-repeat: no-repeat; ” >
<tr><td>
by default background-repeat property have repeat value.
</td></tr>
</table>

• Output:

• Possible values:
repeat, repeat-y, repeat-x, no-repeat

35
background-size
• <table style=“background-image: url(images/cat.gif);
background-repeat: no-repeat;
background-size: 200px 200px; ” >
<tr><td>
background-size property is used to expand the background
image.
</td></tr>
</table>

• Output:

• Possible values:
repeat, repeat-y, repeat-x, no-repeat
36
background-position
• <table style=“background-image: url(images/css.gif);
background-position: 100px 200px; ” >
<tr><td>
this table has background image positioned 100 pixels away
from the left and 200 pixels from the top.
</td></tr> left center

</table> top top

• Output: left center right


bottom bottom bottom

• Possible values:
X% Y%, top left, Xpx Ypx
37
background-attachment
• <p style=“background-image:url(images/css.gif);
background-attachment: fixed; ” >
This paragraph has fixed background image.
</p>

• Output:

• Possible values:
fixed, scroll
38

You might also like