Lec 07 CSS - II.pptx

(1)

1

CS1113 Web Programming

Lecture 07

Font, Text & Background

(2)

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

(3)

List of Block-Level Elements

<address>

Contact information <figcaption> (HTML5)Figure caption <ol>Ordered list

<article>(HTML5)

Article content <figure>(HTML5)Groups media content with a caption

<output>(HTML5)

Form output

<aside>(HTML5)

Aside content <footer>(HTML5)Section or page footer <p>Paragraph

<audio>(HTML5)

Audio player <form>Input form <pre>Preformatted text

<blockquote>

Long (“block”) quotation <h1><h2><h3><h4><h5><h6>Heading levels 1 - 6 <section>(HTML5)Section of the page

<canvas>(HTML5)

Drawing canvas <header>(HTML5)Section or page header. <table>Table.

<dd>

Definition description <hgroup>(HTML5)Groups header information <tfoot>Table footer

<div>

Document division <hr>Horizontal rule (dividing line) <ul>Unordered list

<dl>

(4)

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.

(5)

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>

(6)

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

(7)

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

(8)

The Box

Element Content

Margin

Padding

Border

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

(9)

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 />

(10)

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.

(11)

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

(12)

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:

12 Generic font-family Names Example

serif Times New Roman sans-serif Arial

cursive Zapf-Chancery fantasy Western

(13)

13

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:

(14)

14

font-size

• <p style="font-size: 20pt;">

This font size is 20 pixels.

</p>

• Output:

This font size is 20 points.

• Possible values:

(15)

15

font-weight

• <p style="font-weight: bold;">

This font is bold.

</p>

• Output:

This font is bold.

(16)

16

font-variant

• <p style="font-variant: small-caps;">

This text will be rendered in small caps. </p>

• Output:

T

HIS TEXT WILL BE RENEDERED AS

SMALL CAPS.

(17)

17

line-height

• The line-height property is used to set the

vertical distance between the baselines of adjacent lines of text.

(18)

18

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:

(19)

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.

(20)

 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.

(21)

21

color

• <p style=“color: red;” >

This text will be written in red.

</p>

• Output:

This text will be written in red.

(22)

22

letter-spacing

• <p style=“letter-spacing: 5px;” >

This text is having space between letters.

</p>

• Output:

T h i s t e x t i s h a v i n g s p a c e b e t w e e n l e t t e r s.

(23)

23

word-spacing

• <p style=“word-spacing: 5px;” >

This text is having space between words.

</p>

• Output:

This text is having space between words.

(24)

24

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.

(25)

25

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.

(26)

26

text-align

• <p style=“text-align: right;” >

This will be right aligned.

</p>

• Output:

This will be right aligned.

(27)

27

text-decoration

• <p style=“text-decoration: underline;” >

This will be underline.

</p>

• Output:

This will be underline.

(28)

28

text-transform

• <p style=“text-transform: uppercase;” >

This will be in uppercase.

</p>

• Output:

THIS WILL BE IN UPPERCASE.

(29)

29

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.

(30)

30

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.

(31)

31

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:

(32)

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}

(33)

33

background-color

• <p style=“background-color: yellow;” >

This text has a yellow background. </p>

• Output:

(34)

34

background-image

• <table style=“background-image:url(images/css.gif);” >

this table has background image which repeats multiple times.

</td></tr>

</table>

• Output:

(35)

35

background-repeat

• <table style=“background-image: url(images/cat.gif); background-repeat: no-repeat; ” >

by default background-repeat property have repeat value.

</td></tr> </table>

• Output:

(36)

36

background-size

• <table style=“background-image: url(images/cat.gif); background-repeat: no-repeat;

background-size: 200px 200px; ” >

background-size property is used to expand the background image.

</td></tr>

</table>

• Output:

(37)

37

background-position

• <table style=“background-image: url(images/css.gif);

background-position: 100px 200px; ” >

this table has background image positioned 100 pixels away from the left and 200 pixels from the top.

</td></tr>

</table>

• Output:

X% Y%, top left, Xpx Ypx

(38)

38

background-attachment

• <p style=“background-image:url(images/css.gif); background-attachment: fixed; ” >

This paragraph has fixed background image.

</p>

• Output: