Embed Size (px)
Citation preview
WHAT WE WILL LEARN TODAY
• More on CSS Text
• CSS Fonts
• Assignment NO.: [email protected] / 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 [email protected] / 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;[email protected] / 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 [email protected] / 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 [email protected] / 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)[email protected] / 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)[email protected] / http://www.therightsol.com
CSS TEXT – CONT.
Example:
12 text-shadow-animateable.html
[email protected] / 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 [email protected] / 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”[email protected] / 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 [email protected] / http://www.therightsol.com
