advance web designing - lecture 03 / 30

ADVANCE WEB DESIGNING

Lecture 03

alishanvr@gmail.com / http://www.therightsol.com

WHAT WE WILL LEARN TODAY

• More on CSS Text

• CSS Fonts

• Assignment NO.: 01alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT

Text Indent:

We can specify the indentation of the first line of a text as:

text-indent: value in px i.e. 50px

Example:

07 text-indent.htmlalishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Space between leters:

• letter-spacing property is used to change the space b/w letters.

Syntax:

letter-spacing: value in px

Note:

• We can also give negative value to letter-spacing property.

i.e. letter-spacing: -3px;alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Example:

08 letter-spacing.html

alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Space between lines (line height):

• Line-height property is used to change the line height b/w lines.

Syntax:

line-height: value in px | value in percentage

Example:

09 line-height.htmlalishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Spce b/w words:

• word-spacing is used to change the space b/w words.

Syntax:

word-spacing: value in px

Note:

• We can also give negative value.

• Do not use percentage. Just use px.alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Example:

10 word-spacing.html

alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Text Shadow:

• text-shadow is used to add shadow to text.

Syntax:

text-shadow: h-shadow v-shadow blur-radius color ;

H-shadow x-axis value in px

V-shadow y-axis value in px

Blur-radius value in px

color name| hexcode| rgb(r,g,b)alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Example:

11 - text-shadow.html

alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Text Shadow (Animateable):

• text-shadow in CSS is animatable.

Syntax:

text-shadow: h-shadow v-shadow blur-radius color ;

H-shadow x-axis value in px

V-shadow y-axis value in px

Blur-radius value in px

color name| hexcode| rgb(r,g,b)alishanvr@gmail.com / http://www.therightsol.com

CSS TEXT – CONT.

Example:

12 text-shadow-animateable.html

alishanvr@gmail.com / http://www.therightsol.com

CSS FONT

• To change the font family of a text we use font-family property.

• We can give several font names to font-family property as “fallback system”.

• We should start with the font name that we want to use and ends with the

generic font family.

• Name should be in quotation marks, if font family is more than one word.alishanvr@gmail.com / http://www.therightsol.com

CSS FONT – CONT.

Syntax:

font-family: first font name, second font name

For Example:

font-family: courier, Times, “Times New Roman”alishanvr@gmail.com / http://www.therightsol.com

CSS FONT – CONT.

Example:

13 - font-family.html

alishanvr@gmail.com / http://www.therightsol.com

ASSIGNMENT NO.: 01

Title: Practice for professional level design

Note:

Download related icons by searching on goolge.com

OR

www.iconfinder.com

Use transformation where required.alishanvr@gmail.com / http://www.therightsol.com

ASSIGNMENT NO.: 01 – CONT.

alishanvr@gmail.com / http://www.therightsol.com

Good Bye

&

Allah Hafizalishanvr@gmail.com / http://www.therightsol.com