Css bangla e book by faruk 3. 3
āĻĨāĻŽ āĻāĻžāĻļ
ā§¨ ā§¯ āĻāĻžāĻ¨ā§ā§āĻžāĻŋāĻ° ā§¨ā§Ļā§§ā§Š
āĻāĻžāĻļāĻ
āĻā§āĻžāĻĄā§ āĻ¸ āĻĒ āĻŦāĻžāĻāĻ˛āĻžā§āĻĻāĻļ
(https://www.facebook.com/groups/Wordpress2Smashing)
āĻā§āĻžāĻĄā§ āĻ¸ āĻĒ āĻā§ā§āĻŦāĻ¸āĻžāĻāĻ
(http://www.wpbangla.com)
āĻ˛āĻāĻ
āĻŽāĻžāĻ āĻāĻŦ āĻž āĻāĻ˛-āĻĢāĻž āĻ
(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
(http://www.farukbd.info)
āĻĻ
āĻāĻžāĻŋāĻŽāĻ˛ āĻšāĻžā§āĻ¸āĻ¨ āĻŋāĻ¸āĻāĻžāĻ¨
(https://www.facebook.com/zamil.hossainsezan32)
āĻāĻŋāĻĒāĻ°āĻžāĻāĻ
āĻāĻŦ āĻž āĻāĻ˛-āĻĢāĻž āĻ āĻ āĻā§āĻžāĻĄā§ āĻ¸ āĻĒ āĻŦāĻžāĻāĻ˛āĻžā§āĻĻāĻļ
āĻ¸āĻ¤āĻāĻ¤āĻž
āĻāĻ āĻŦāĻāĻŋāĻ āĻŋāĻŦ ā§ā§āĻ° āĻāĻ¨ āĻ¨ā§
āĻŦāĻāĻŋāĻ āĻŋāĻŦāĻ¨āĻžāĻŽā§ā§āĻ˛ āĻŋāĻŦāĻ¤āĻ°āĻŖā§āĻ¯āĻžāĻ
CSS Bangla E-book is written by MD.Abdullah Al Faruk & Published by
Wordpress Group Bangladesh. Copyright by MD.Abdullah Al Faruk &
Wordpress Group Bangladesh. Caution: This book is not for sell. It's free to
distribute.
4. 4
āĻā§āĻ¸āĻā§ ā§ āĻ ā§ āĻ āĻ ā§ā§āĻ.................................
āĻ¯āĻžā§āĻĻāĻ° āĻ
āĻž āĻĒāĻŋāĻ° ā§āĻŽ āĻāĻŋāĻŽ āĻāĻ¤āĻĻā§āĻ° āĻāĻ¸ā§āĻ¤ āĻĒā§āĻ°āĻŋāĻāĨ¤
5. 5
āĻāĻŽāĻžāĻ° āĻ¸ ā§āĻ-
āĻāĻŋāĻŽ āĻŽāĻžāĻ āĻāĻŦ āĻžāĻš āĻāĻ˛-āĻĢāĻž āĻ(https://www.facebook.com/faruk.ice09) āĻĒā§āĻžā§āĻ˛āĻāĻž āĻāĻ°āĻŋāĻ āĻā§āĻŋ ā§āĻž
āĻāĻ¸āĻ˛āĻžāĻŽā§ āĻŋāĻŦ āĻŋāĻŦāĻĻ āĻžāĻ˛ā§ā§āĻ° āĻāĻ¨āĻĢāĻ°ā§āĻŽāĻļāĻžāĻ¨ āĻ āĻāĻŋāĻŽāĻāĻŋāĻ¨ā§āĻāĻļāĻ¨ āĻāĻŋ āĻŋāĻ¨ā§āĻžāĻŋāĻ°āĻ (ICE) āĻŋāĻŦāĻāĻžā§āĻāĻ° āĻ¤ā§āĻ¤ā§ā§ āĻŦā§āĻˇāĨ¤ āĻāĻŽāĻžāĻ° āĻ˛āĻāĻž
āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻŦāĻāĻŋāĻ āĻāĻžāĻļ āĻšāĻŦāĻžāĻ° āĻĒāĻ° āĻ
ā§āĻ¨ā§āĻāĻ āĻāĻŽāĻžā§āĻ āĻ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŦāĻāĻāĻž āĻāĻžāĻļ āĻāĻ°āĻžāĻ° āĻāĻ¨ āĻ
āĻ¨ā§ā§āĻ°āĻžāĻ§ āĻā§āĻ°āĻŋāĻā§āĻ˛āĻ¨āĨ¤
āĻ¤āĻžāĻ āĻ¸āĻŦāĻžāĻ° āĻāĻĨāĻž āĻŽāĻžāĻĨāĻžā§ āĻ°ā§āĻ āĻ
ā§āĻ¨āĻ āĻŦ āĻ¤āĻžāĻ° āĻŽāĻžā§āĻāĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŦāĻāĻŋāĻ āĻŋāĻ˛ā§āĻ āĻļāĻˇ āĻāĻ°āĻ˛āĻžāĻŽāĨ¤ āĻ¤ āĻļāĻˇ āĻāĻ°āĻžāĻ° āĻāĻžāĻ°ā§āĻ¨ āĻŋāĻāĻā§
āĻā§āĻ˛ āĻŋāĻ āĻĨāĻžāĻā§āĻ¤ āĻĒāĻžā§āĻ° āĻāĻļāĻž āĻāĻŋāĻ° āĻŽāĻž āĻ¸ā§ āĻ° āĻĻā§āĻŋ ā§āĻ¤ āĻĻāĻā§āĻŦāĻ¨āĨ¤ āĻāĻ° āĻāĻ āĻŦāĻāĻŋāĻ āĻ¯āĻŋāĻĻ āĻāĻĒāĻ¨āĻžā§āĻĻāĻ° āĻļāĻāĻžāĻ° āĻāĻžā§āĻ āĻ¸āĻžāĻŽāĻžāĻ¨
āĻāĻĒāĻāĻžā§āĻ° āĻ˛āĻžā§āĻ āĻ¤ā§āĻŦ āĻŋāĻ¨ā§āĻā§āĻ āĻ§āĻ¨ āĻ āĻāĻŽāĻžāĻ° āĻĒāĻŋāĻ° āĻŽ āĻ¸āĻžāĻĨāĻ āĻšā§ā§ā§āĻ āĻŦā§āĻ˛ āĻŽā§āĻ¨ āĻāĻ°ā§āĻŦāĻžāĨ¤ āĻāĻŋāĻŽ āĻŋāĻŦā§āĻļāĻˇāĻāĻžā§āĻŦ āĻ§āĻ¨ āĻŦāĻžāĻĻ āĻāĻžāĻ¨āĻžāĻ
āĻāĻžāĻŋāĻŽāĻ˛ āĻšāĻžā§āĻ¸āĻ¨ āĻŋāĻ¸āĻāĻžāĻ¨ (https://www.facebook.com/zamil.hossainsezan32)
āĻ āĻā§āĻžāĻĄā§ āĻ¸ āĻĒ āĻŦāĻžāĻāĻ˛āĻžā§āĻĻāĻļ
(https://www.facebook.com/groups/Wordpress2Smashing/) āĻāĨ¤
āĻāĻ āĻŦāĻāĻŋāĻāĻ° āĻ° āĻāĻŽāĻžāĻ°āĨ¤ āĻ
āĻ¨ā§ āĻš āĻā§āĻ° āĻ
āĻ¨ā§āĻŽāĻŋāĻ¤ āĻāĻžā§āĻž āĻāĻ āĻŦāĻāĻŋāĻāĻ° āĻāĻāĻŋāĻļāĻ āĻŦāĻž āĻ¸ ā§āĻŖ āĻāĻŋāĻĒ
āĻŦāĻž āĻŋāĻŦāĻā§āĻ¤ āĻŦāĻž āĻŋāĻ¨ā§āĻāĻ° āĻ¨āĻžā§āĻŽ āĻāĻžāĻŋāĻ˛ā§ā§ āĻĻā§āĻžāĻ° āĻ āĻž āĻāĻ°ā§āĻŦāĻ¨ āĻ¨āĻžāĨ¤ āĻāĻĒāĻ¨āĻžā§āĻĻāĻ° āĻŋāĻ¨āĻ āĻŋāĻ¨āĻ ā§āĻāĻ°
āĻŽāĻžāĻ§ ā§āĻŽ āĻŦāĻāĻŋāĻ āĻ¸āĻŦāĻžāĻ° āĻŽāĻžā§āĻ āĻāĻŋā§ā§ā§ āĻŋāĻĻāĻ¨āĨ¤ āĻļā§āĻžāĻ° āĻ āĻ¨ āĻ¸āĻŦāĻžāĻ° āĻ¸āĻžā§āĻĨāĨ¤ āĻžāĻ¨ āĻŋāĻŦāĻ¤āĻ°ā§āĻŖ āĻā§āĻŽ āĻ¨āĻž,
āĻ¤āĻžāĻ āĻ¯ āĻ¯āĻž āĻāĻžā§āĻ¨āĻ¨ āĻ¸āĻŦāĻžāĻ° āĻ¸āĻžā§āĻĨ āĻļā§āĻžāĻ° āĻ āĻ¨āĨ¤
-āĻāĻŦ āĻž āĻāĻ˛-āĻĢāĻž āĻ
6. 6
āĻ¸ā§āĻŋāĻāĻĒ
āĻ
āĻ§ āĻžā§-āĻāĻāĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻā§āĻ˛āĻžāĻāĻ¨āĻž
ā§§.āĻā§āĻŋāĻŽāĻāĻž
ā§¨.āĻ¯āĻž āĻ¯āĻž ā§ā§āĻžāĻāĻ¨ āĻšā§āĻŦ
ā§Š.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ°āĻž āĻ¯āĻ¸āĻāĻ˛ āĻāĻžāĻ āĻāĻ°āĻž āĻ¯āĻžā§
ā§Ē.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ¸āĻžāĻ§āĻžāĻ°āĻ¨ āĻāĻ āĻ¨
ā§Ģ. āĻžāĻāĻ˛āĻļā§āĻ āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻĒ āĻŋāĻ¤
ā§Ģ.ā§§.āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸
ā§Ģ.ā§¨.āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸
ā§Ģ.ā§Š.āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸
ā§Ŧ.āĻŽ āĻŦ āĻ¯āĻžāĻ āĻāĻ°āĻž
āĻ
āĻ§ āĻžā§- āĻāĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ āĻ āĻĒāĻžāĻŋāĻ
ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻ āĻ āĻĒāĻžāĻŋāĻ
ā§§.ā§§. āĻ āĻ āĻāĻžāĻ˛āĻžāĻ° āĻĒāĻžāĻŋāĻ
ā§§.ā§¨. āĻ āĻ āĻŋāĻĄā§āĻ°āĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ
ā§§.ā§Š. āĻ˛āĻāĻžāĻ° āĻŋāĻ¸āĻ āĻĒāĻžāĻŋāĻ
ā§§.ā§Ē.āĻ˛āĻžāĻāĻ¨ āĻšāĻžāĻāĻ āĻĒāĻžāĻŋāĻ
ā§§.ā§Ģ. āĻ āĻ āĻāĻ˛āĻžāĻāĻ¨ āĻĒāĻžāĻŋāĻ
ā§§.ā§Ŧ. āĻ āĻ āĻĄā§āĻāĻžā§āĻ°āĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ
ā§§.ā§. āĻ āĻ āĻāĻ¨ā§āĻĄ āĻĒāĻžāĻŋāĻ
ā§§.ā§Ž. āĻ āĻ āĻļ āĻžā§āĻĄāĻž āĻĒāĻžāĻŋāĻāĨ¤
ā§§. ā§¯. āĻ āĻ āĻž āĻĢāĻ°ā§āĻŽāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ
7. 7
ā§§.ā§§ā§Ļ.āĻāĻžāĻŋāĻāĻ āĻ˛ āĻāĻ˛āĻžāĻāĻ¨ āĻĒāĻžāĻŋāĻ
ā§§.ā§§ā§§. āĻšāĻžā§āĻžāĻāĻ āĻ¸ āĻĒāĻžāĻŋāĻāĨ¤
ā§§.ā§§ā§¨.āĻā§āĻžāĻĄ āĻŋāĻ¸āĻ āĻĒāĻžāĻŋāĻ
āĻ
āĻ§ āĻžā§-āĻŋāĻ¤āĻ¨āĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĒāĻŋāĻ°āĻŽāĻžāĻĒāĻ āĻĒāĻžāĻŋāĻ
ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻšāĻžāĻāĻ āĻ āĻāĻāĻĨ āĻĒāĻžāĻŋāĻ
ā§¨.āĻŽ āĻž āĻšāĻžāĻāĻ āĻĒāĻžāĻŋāĻ
ā§Š.āĻŽ āĻž āĻāĻāĻĨ āĻĒāĻžāĻŋāĻ
ā§Ē.āĻŋāĻŽāĻ¨ āĻšāĻžāĻāĻ āĻĒāĻžāĻŋāĻ
ā§Ģ.āĻŋāĻŽāĻ¨ āĻāĻāĻĨ āĻĒāĻžāĻŋāĻ
āĻ
āĻ§ āĻžā§-āĻāĻžāĻ°āĻ āĻĢ āĻĒāĻžāĻŋāĻ
ā§§.āĻĢ āĻĒāĻžāĻŋāĻ
ā§¨.āĻĢ āĻĢ āĻžā§āĻŽāĻŋāĻ˛ āĻĒāĻžāĻŋāĻ
ā§Š.āĻĢ āĻ¸āĻžāĻāĻ āĻĒāĻžāĻŋāĻ
ā§Ē.āĻĢ āĻžāĻāĻ˛ āĻĒāĻžāĻŋāĻ
ā§Ģ.āĻĢ āĻ āĻžāĻŋāĻ°ā§ā§ āĻĒāĻžāĻŋāĻ
ā§Ŧ.āĻĢ āĻā§ā§āĻ āĻĒāĻžāĻŋāĻ
āĻ
āĻ§ āĻžā§-āĻĒāĻāĻžāĻāĻ āĻŋāĻ˛ āĻĒāĻžāĻŋāĻ
ā§§.āĻŋāĻ˛ā§ āĻ° āĻāĻ¨ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻĒāĻžāĻŋāĻ
ā§§.ā§§.āĻŋāĻ˛ āĻžāĻāĻ˛ āĻĒāĻžāĻŋāĻ
ā§§.ā§¨.āĻŋāĻ˛ āĻžāĻāĻ˛ āĻā§āĻŽāĻ āĻĒāĻžāĻŋāĻ
ā§§.ā§Š.āĻŋāĻ˛ āĻžāĻāĻ˛ āĻĒāĻŋāĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ
ā§§.ā§Ē.āĻŋāĻ˛ āĻžāĻāĻ˛ āĻāĻžāĻāĻĒ āĻĒāĻžāĻŋāĻ
āĻ
āĻ§ āĻžā§-āĻā§āĻ āĻŋāĻ˛āĻāĻ āĻĒāĻžāĻŋāĻ
ā§§.āĻŋāĻ˛ā§ āĻ° āĻāĻžāĻ°āĻŋāĻ āĻ
āĻŦ āĻž āĻŋāĻ¨ā§ā§ āĻŋāĻŦ āĻžāĻŋāĻ°āĻ¤ āĻā§āĻ˛āĻžāĻāĻ¨āĻžāĨ¤
8. 8
āĻ
āĻ§ āĻžā§-āĻ¸āĻžāĻ¤āĻ āĻŦ āĻžāĻ āĻ āĻĒāĻžāĻŋāĻ
ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻŦ āĻžāĻ āĻ āĻĒāĻžāĻŋāĻ
ā§§.ā§§.āĻŦ āĻžāĻ āĻžāĻ āĻĒāĻžāĻŋāĻ
ā§§.ā§¨.āĻŦ āĻžāĻ āĻžāĻ āĻāĻāĻžāĻā§āĻŽ āĻĒāĻžāĻŋāĻ
ā§§.ā§Š.āĻŦ āĻžāĻ āĻžāĻ āĻāĻžāĻ˛āĻžāĻ° āĻĒāĻžāĻŋāĻ
ā§§.ā§Ē.āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ āĻĒāĻžāĻ
ā§§.ā§Ģ.āĻŦ āĻžāĻ āĻžāĻ āĻĒāĻŋāĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ
ā§§.ā§Ŧ. āĻŦ āĻžāĻ āĻžāĻ āĻŋāĻ°āĻŋāĻĒāĻ āĻĒāĻžāĻŋāĻ
āĻ
āĻ§ āĻžā§-āĻāĻāĻ āĻĒāĻŋāĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ
ā§§. āĻžāĻŋāĻāĻ āĻĒāĻŋāĻāĻļāĻŋāĻ¨āĻ
ā§¨.āĻŋāĻĢ āĻĄ āĻĒāĻŋāĻāĻļāĻŋāĻ¨āĻ
ā§Š. āĻŋāĻ°ā§āĻ˛āĻŋāĻāĻ āĻĒāĻŋāĻāĻļāĻŋāĻ¨āĻ
ā§Ē. āĻ
āĻžāĻŦāĻ¸ā§ā§āĻ˛āĻ āĻĒāĻŋāĻāĻļāĻŋāĻ¨āĻ
ā§Ģ.āĻŋ āĻĒ āĻĒāĻžāĻŋāĻ (Clip Property)
ā§Ŧ.āĻāĻžāĻ¸āĻ° āĻĒāĻžāĻŋāĻ (cursor Property)
ā§.āĻāĻāĻžāĻ°ā§ āĻž āĻĒāĻžāĻŋāĻ (Overflow Property)
ā§Ž. āĻāĻĄ āĻāĻ¨ā§āĻĄ (Z-index Property)
āĻ
āĻ§ āĻžā§-āĻ¨ā§āĻ āĻŦ āĻĒāĻžāĻŋāĻ
ā§§.āĻŦ āĻŽā§āĻĄā§āĻ˛āĻ° āĻāĻ āĻ¨
ā§¨.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻŽāĻžāĻŋāĻāĻ¨ āĻĒāĻžāĻŋāĻāĨ¤
ā§¨.ā§§.āĻŽāĻžāĻŋāĻāĻ¨ āĻļāĻāĻš āĻž āĻĒāĻžāĻŋāĻāĨ¤
ā§Š. āĻŦāĻĄāĻžāĻ° āĻĒāĻžāĻŋāĻ
ā§Š.ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻŦāĻĄāĻžāĻ° āĻĒāĻžāĻŋāĻ
ā§Ē. āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĒ āĻžāĻŋāĻĄāĻ
ā§Ē.ā§§.āĻ¸āĻāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĒ āĻžāĻŋāĻĄāĻ āĻĒāĻžāĻŋāĻ
ā§Ģ.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻāĻāĻ˛āĻžāĻāĻ¨ āĻĒāĻžāĻŋāĻ
ā§Ģ.ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻāĻāĻāĻ˛āĻžāĻāĻ¨ āĻĒāĻžāĻŋāĻ
āĻ
āĻ§ āĻžā§-āĻĻāĻļāĻ āĻāĻŋāĻŦā§āĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻāĻ° āĻŦ āĻŦāĻšāĻžāĻ°
ā§§. āĻāĻŋāĻŦāĻ˛ āĻŦāĻĄāĻžāĻ°
ā§¨. āĻāĻ˛āĻž āĻŦāĻĄāĻžāĻ°
9. 9
āĻ
āĻ§ āĻžā§- āĻāĻāĻžāĻ°āĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ āĻ āĻŋ ā§āĻžāĻ° āĻĒāĻžāĻŋāĻ
ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ āĻĒāĻžāĻŋāĻ
ā§¨.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋ ā§āĻžāĻ° āĻĒāĻžāĻŋāĻ
āĻ
āĻ§ āĻžā§-āĻŦāĻžāĻ°āĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻ¸ā§āĻ˛ āĻ°
ā§§.āĻāĻāĻŋāĻ¨āĻāĻžāĻ¸āĻžāĻ˛ āĻŋāĻ¸ā§āĻ˛ āĻ°
ā§¨.āĻāĻāĻŋāĻĄ āĻŋāĻ¸ā§āĻ˛ āĻ°
ā§Š.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ¸ āĻŋāĻ¸ā§āĻ˛ āĻ°
ā§Ē.āĻāĻžāĻāĻĒ āĻŋāĻ¸ā§āĻ˛ āĻ°
ā§Ģ.āĻŋāĻĄā§āĻ¸āĻ¨ā§āĻĄ āĻŋāĻ¸ā§āĻ˛ āĻ°
ā§Ŧ.d i r e c t c h i l d r e n āĻŋāĻ¸ā§āĻ˛ āĻ°
ā§. āĻŋāĻĒāĻ āĻŋāĻ¸ā§āĻ˛ āĻ°
āĻ
āĻ§ āĻžā§- āĻ¤āĻ°āĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻ¸āĻā§āĻĄāĻž āĻžāĻ¸ āĻ āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽ
ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻ¸āĻā§āĻĄāĻž āĻžāĻ¸
ā§¨.āĻŋāĻ¸āĻā§āĻĄāĻž āĻžā§āĻ¸āĻ° āĻāĻžāĻ°ā§āĻāĻĻ
ā§¨.ā§§.āĻāĻāĻāĻ° āĻŋāĻ¸āĻā§āĻĄāĻž āĻžāĻ¸ (A n c h o r P s e u d o c l a s s )
ā§¨.ā§¨.āĻĢāĻž āĻāĻžāĻ āĻŋāĻ¸āĻā§āĻĄāĻž āĻžāĻ¸ (F i r s t c h i l d P s e u d o -c l a s s )
ā§¨.ā§Š.āĻ˛ āĻž ā§ā§āĻ¯āĻŧāĻ āĻŋāĻ¸āĻā§āĻĄāĻž āĻžāĻ¸ (l a n g P s e u d o -c l a s s )
ā§¨.ā§Ē. āĻĢāĻžāĻāĻžāĻ¸ āĻŋāĻ¸āĻā§āĻĄāĻž āĻžāĻ¸(f o c u s P s e u d o -c l a s s )
ā§Š.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽ
ā§Ē.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻāĻ āĻ¨
ā§Ģ.āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻāĻžāĻ°ā§āĻāĻĻ
ā§Ģ.ā§§. āĻĨāĻŽ āĻ
āĻ° āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽ -(F i r s t l e t t e r P s e u d o e l e me n t )
ā§Ģ.ā§¨. āĻĨāĻŽ āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽ -(F i r s t f i r s t l i n e
P s e u d o e l e me n t )
10. 10
ā§Ģ.ā§Š.āĻŋāĻŦā§āĻĢāĻžāĻ° āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽ (B e f o r e P s e u d o e l e me n t )
ā§Ģ.ā§Ē.āĻāĻĢāĻāĻžāĻ° āĻŋāĻ¸āĻā§āĻĄāĻž āĻāĻŋāĻ˛ā§āĻŽ (A f t e r P s e u d o e l e me n t )
ā§Ŧ.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻŋāĻ¸āĻā§āĻĄāĻž āĻžāĻ¸/ āĻāĻŋāĻ˛ā§āĻŽ
āĻ
āĻ§ āĻžā§- āĻā§ āĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻĄāĻ¸ā§ āĻ āĻŋāĻāĻŋāĻāĻŋāĻŦāĻŋāĻ˛āĻŋāĻ āĻĒāĻžāĻŋāĻ
ā§§.āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻĄāĻ¸ā§ āĻĒāĻžāĻŋāĻ
ā§¨.āĻŋāĻĄāĻ¸ā§ āĻ¨āĻžāĻ¨ -(d i s p l a y n o n e: )
ā§Š.āĻŋāĻĄāĻ¸ā§ āĻāĻ¨ āĻ˛āĻžāĻāĻ¨ -(d i s p l a y i n l i n e: )
ā§Ē.āĻŋāĻĄāĻ¸ā§ āĻ â d i s p l a y b l o c k( : )
ā§Ģ.āĻŋāĻāĻŋāĻāĻŋāĻŦāĻŋāĻ˛āĻŋāĻ āĻĒāĻžāĻŋāĻ
11. 11
āĻ
āĻ§ āĻžā§-āĻāĻ
āĻā§āĻŋāĻŽāĻāĻžāĻ
āĻā§ā§āĻŦā§āĻĒā§āĻ āĻžāĻāĻ˛āĻļā§ā§āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ
āĻŋāĻ¤āĻ¸āĻšā§āĻāĻ āĻā§ā§āĻŦ āĻĒāĻā§āĻ āĻŽā§āĻ¨āĻž āĻžāĻšā§ ā§āĻĒ āĻāĻĒ āĻžāĻĒāĻ¨ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤ āĻāĻāĻ āĻŋāĻ āĻāĻŽ āĻāĻ˛ āĻāĻ°
āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻāĻŋāĻ āĻā§ā§āĻŦ āĻĒāĻāĻ āĻŦāĻžāĻŋāĻš āĻ āĻĒ āĻĒāĻžā§ āĻāĻ° āĻŋāĻ¸ āĻāĻ¸ āĻāĻ¸ āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻ° āĻ¸ā§ āĻ° āĻĒāĻŋāĻ°āĻĒā§āĻŖāĻ¤āĻž āĻ˛āĻžāĻ āĻā§āĻ°āĨ¤ āĻŽā§āĻ˛āĻ¤ āĻŋāĻ¸
āĻāĻ¸ āĻāĻ¸ āĻŦ āĻŦāĻšāĻžā§āĻ° āĻĒāĻāĻ āĻŋāĻĄāĻāĻžāĻāĻŋāĻ¨āĻ āĻāĻ° āĻāĻžā§āĻ āĻā§āĻ° āĻ¸āĻŽā§ āĻŦāĻāĻžā§āĻāĨ¤āĻā§ā§āĻŦ āĻŋāĻĄāĻāĻžāĻā§āĻ¨āĻ° āĻĻ āĻ¤āĻž āĻāĻĒā§āĻ°āĻ° āĻ§āĻžā§āĻĒ āĻāĻŋ āĻ¤ āĻāĻ°ā§āĻ¤
āĻāĻžāĻā§āĻ˛ Cascading Style Sheets (CSS) āĻāĻ° āĻāĻžāĻ¨ āĻŋāĻŦāĻ āĻ¨āĻāĨ¤āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻāĻ āĻĄāĻā§ā§āĻŽā§ āĻāĻāĻžāĻŋāĻ§āĻāĻŦāĻžāĻ°
āĻŦ āĻŦāĻšāĻžāĻ° āĻšā§āĻ¤ āĻĒāĻžā§āĻ° āĻāĻŦāĻ āĻĄāĻā§ā§āĻŽā§ āĻ° āĻŋāĻŦāĻŋāĻ āĻ
āĻā§āĻļ āĻŋāĻŦāĻŋāĻ āĻžāĻāĻ˛ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ āĻžāĻāĻ˛āĻļā§ā§āĻāĻ° āĻŦ āĻŦāĻšāĻžā§āĻ°
āĻĄāĻā§ā§āĻŽā§ āĻ° āĻžāĻāĻ˛ āĻŦāĻĻā§āĻ˛ āĻ¯āĻžā§āĻŦ āĻŋāĻ āĻžāĻāĻāĻžāĻ° āĻ
āĻĒāĻŋāĻ°āĻŦāĻŋāĻ¤āĻ¤ āĻĨāĻžāĻā§āĻŦāĨ¤ āĻāĻāĻ āĻžāĻāĻ˛āĻļā§āĻ āĻāĻāĻžāĻŋāĻ§āĻ āĻĒā§āĻ āĻŋāĻāĻāĻŦāĻž āĻāĻāĻžāĻŋāĻ§āĻ
āĻžāĻāĻ˛āĻļā§āĻ āĻāĻāĻ āĻĒā§āĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ āĻāĻĒāĻ¨āĻžāĻ° āĻžāĻāĻ˛āĻļā§āĻ ( āĻ¯āĻāĻžā§āĻ¨ āĻāĻĒāĻŋāĻ¨ āĻāĻžāĻĄ ā§āĻ˛āĻž āĻŋāĻ˛āĻā§āĻŦāĻ¨) āĻŋāĻ
āĻ¸ ā§āĻ¨āĻāĻžā§āĻŦ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻĄāĻā§ā§āĻŽ āĻšā§āĻ¤ āĻĒā§āĻĨāĻ āĻšā§āĻŦ āĻ¯āĻāĻ¨ āĻāĻĒāĻŋāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻŦāĻ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻ āĻĻ āĻ¤āĻž āĻ
āĻāĻ¨
āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻ°ā§āĻŦāĻ¨āĨ¤ āĻāĻ° āĻāĻāĻŋāĻ āĻāĻĨāĻž āĻ¨āĻž āĻŦāĻ˛ā§āĻ˛āĻ āĻ¨āĻ¯āĻŧ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻļāĻāĻžāĻ° āĻā§āĻ āĻ
āĻŦāĻļ āĻ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻ¸ ā§ āĻāĻžāĻ˛ āĻāĻžāĻ¨ā§āĻ¤
āĻšā§āĻŦāĨ¤ āĻāĻ āĻŦāĻāĻŋāĻā§āĻ¤ āĻāĻŽāĻ°āĻž āĻ§āĻžāĻ°āĻžāĻŦāĻžāĻŋāĻšāĻāĻāĻžā§āĻŦ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻ¨ā§ā§ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°āĻŦāĨ¤
āĻ¯āĻž āĻ¯āĻž ā§ā§āĻžāĻāĻ¨ āĻšā§āĻŦāĻ
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ˛āĻāĻžāĻ° āĻāĻ¨ āĻāĻ˛āĻžāĻĻāĻž āĻāĻžāĻ¨ āĻ āĻ āĻāĻŋāĻĄāĻāĻ° āĻ¸āĻĢāĻāĻā§ āĻžāĻ° āĻŦ āĻŦāĻšāĻžāĻ° āĻ¨āĻž āĻāĻ°ā§āĻ˛āĻ āĻšā§āĻŦ, āĻāĻĒāĻ¨āĻžāĻ° āĻāĻŋ āĻāĻāĻžā§āĻ°
Notepad āĻ¨āĻžā§āĻŽ āĻ¯ āĻ āĻ āĻāĻŋāĻĄāĻāĻ° āĻā§āĻ āĻ¸āĻāĻžā§āĻ¨āĻ āĻāĻžāĻĄ āĻŋāĻ˛āĻā§āĻ¤ āĻĒāĻžāĻ°ā§āĻŦāĻ¨āĨ¤ āĻ¤ā§āĻŦ āĻ¨āĻžāĻāĻĒ āĻžā§āĻĄāĻ° āĻ āĻ¤ āĻ¸āĻ āĻ°āĻŖ
Notepad++ āĻŦāĻž āĻāĻ°āĻ āĻ āĻ¤ āĻāĻŋāĻĄāĻāĻ° āĻ¯āĻāĻžā§āĻ¨ āĻāĻĒāĻŋāĻ¨ āĻāĻāĻ āĻ¸āĻžā§āĻĨ āĻāĻžāĻĄ āĻŋāĻ˛āĻā§āĻ¤ āĻ āĻ¤āĻžāĻ° āĻāĻāĻāĻĒā§āĻ āĻĻāĻā§āĻ¤ āĻĒāĻžāĻ°ā§āĻŦāĻ¨
āĻ¯āĻŽāĻ¨- Adobe Dreamweaver, HTML Kit āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤ āĻāĻĒāĻžāĻ¤āĻ¤ āĻāĻŋāĻŽ āĻāĻĒāĻ¨āĻžā§āĻĻāĻ°
Notepad++ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻŦāĻ˛āĻŦāĨ¤ āĻāĻŦāĻžāĻ° āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻžāĻĄā§āĻ āĻ°āĻžāĻ¨ āĻāĻ°āĻžā§āĻ¨āĻžāĻ° āĻāĻ¨ āĻ¯ā§āĻāĻžāĻ¨ āĻāĻāĻŋāĻ āĻžāĻāĻāĻžāĻ° āĻšā§āĻ˛āĻ
āĻšā§āĻŦāĨ¤ āĻ¯āĻŽāĻ¨āĻ Internet Explorer, Mozilla Firefox, Google Chrome āĻāĻ¤ āĻžāĻŋāĻĻāĨ¤ āĻ¤āĻŋāĻ°āĻā§āĻ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĢāĻžāĻāĻ˛āĻŋāĻ .css Extension āĻŋāĻĻā§ā§ āĻ¸āĻ āĻ āĻ¨āĨ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ°āĻž āĻ¯āĻ¸āĻāĻ˛ āĻāĻžāĻ āĻāĻ°āĻž āĻ¯āĻžā§āĻ
ā§§ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻ āĻ¤āĻ°ā§āĻā§āĻ¤ āĻĒāĻāĻŋāĻ āĻāĻ°āĻ āĻĻā§āĻŋ āĻ¨ āĻ¨ āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤
ā§¨ āĻŋāĻāĻā§ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻžāĻĄ āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻā§āĻ° āĻ¸ ā§āĻ¨āĻāĻžā§āĻŦ āĻ¸āĻžāĻā§āĻāĻ° restyle āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ¸āĻžāĻ§āĻžāĻ°āĻ¨ āĻāĻ āĻ¨āĻ
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻ° āĻāĻ āĻ¨ā§āĻ āĻŋāĻ āĻ
āĻā§āĻļ āĻāĻžāĻ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤ āĻāĻāĻŋāĻ āĻšāĻ˛ āĻŋāĻ¸ā§āĻ˛ āĻ° āĻāĻŦāĻ āĻ
āĻ¨ āĻŋāĻ āĻšāĻ˛ āĻāĻ āĻŦāĻž āĻāĻāĻžāĻŋāĻ§āĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļāĻ¨āĨ¤
āĻŋāĻ¨ā§āĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻāĻ ā§āĻ¨āĻ° āĻŋāĻ āĻĻāĻā§āĻž āĻšāĻ˛-
12. 12
āĻŋāĻ¸ā§āĻ˛ āĻ° āĻšāĻ˛ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ HTML āĻāĻŋāĻ˛ā§āĻŽ (h1ī¨h6, p etc)
āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļā§āĻ¨āĻ° āĻāĻŦāĻžāĻ° āĻāĻŋāĻ āĻ
āĻāĻļ āĻĨāĻžāĻā§āĻŦ-
Declaration={Properties: Value}
āĻāĻāĻžāĻŋāĻ§āĻ Declaration āĻĨāĻžāĻā§āĻ¤ āĻĒāĻžā§āĻ° āĻ¯āĻž āĻ¸āĻŋāĻŽā§āĻāĻžāĻ˛āĻ¨ āĻŋāĻĻā§ā§ āĻĒā§āĻĨāĻ āĻĨāĻžāĻā§āĻŦāĨ¤
āĻāĻ°āĻ āĻ¸āĻšāĻ āĻāĻžā§āĻŦ āĻ˛āĻāĻž āĻ¯āĻžā§-
"HTML tag" { "CSS Property" : "Value" ; }
āĻžāĻāĻ˛āĻļā§āĻ āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻĒ āĻŋāĻ¤āĻ
āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻĄāĻā§ā§āĻŽā§ āĻžāĻāĻ˛āĻļā§āĻ āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻŋāĻ¤āĻ¨āĻŋāĻ āĻĒ āĻŋāĻ¤ āĻ°ā§ā§ā§āĻ -internal, external āĻāĻŦāĻ inlineāĨ¤ āĻāĻāĻāĻž
āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻĒā§āĻ <head> āĻ āĻžā§āĻāĻ° āĻŋāĻāĻ¤āĻ° <style> āĻ āĻžāĻ āĻŋāĻĻā§ā§ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻžāĻĄ āĻ¯āĻžāĻ āĻā§āĻ° āĻĒāĻ āĻžāĻāĻŋāĻ˛āĻ āĻāĻ°āĻž
āĻ¯āĻžā§-āĻāĻāĻž āĻšā§ āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸āĨ¤ āĻāĻ° āĻ¯āĻŋāĻĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻžāĻĄ āĻŦāĻŋāĻļ āĻšā§ā§ āĻ¯āĻžā§ āĻ¤āĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻžāĻĄ āĻāĻ˛āĻžāĻĻāĻž āĻĢāĻžāĻā§āĻ˛
āĻ˛āĻāĻž āĻšā§ āĻāĻŦāĻ <head> āĻ āĻžā§āĻāĻ° āĻŋāĻāĻ¤āĻ° <link> āĻ āĻžāĻ āĻŋāĻĻā§ā§ āĻ¸āĻāĻ¯ā§ āĻāĻ°āĻž āĻšā§-āĻāĻ āĻĒ āĻŋāĻ¤ āĻšā§ āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸āĨ¤
āĻāĻŽāĻ°āĻž āĻā§ā§āĻŦ āĻĒāĻ āĻŋāĻĄāĻāĻžāĻāĻ¨ āĻāĻ°ā§āĻ¤ āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŦāĻŋāĻļ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻŦāĨ¤ āĻāĻ° āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛-āĻāĻ° āĻŋāĻ¤āĻāĻž
āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻžā§āĻĨ āĻāĻāĻāĻāĻžā§āĻŦ āĻžāĻāĻ˛ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšāĻ˛-āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸āĨ¤ āĻ¯ āĻāĻžāĻ¨ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻĄāĻā§ā§āĻŽā§ āĻāĻĒāĻŋāĻ¨
āĻžāĻāĻ˛āĻļā§āĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤āĻāĻāĻ¨ āĻāĻŽāĻ°āĻž āĻ§āĻ°āĻžāĻŦāĻžāĻŋāĻšāĻāĻāĻžā§āĻŦ āĻāĻ āĻŋāĻ¤āĻ¨āĻŋāĻ āĻĒ āĻŋāĻ¤ āĻŋāĻ¨ā§ā§ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°āĻŦāĻ
ā§§.āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸āĻ
āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ āĻ¤āĻāĻ¨āĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ āĻ¯āĻāĻ¨ āĻāĻāĻŋāĻ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻĄāĻā§ā§āĻŽā§ āĻ° āĻāĻ¨ āĻāĻāĻŋāĻ āĻŋāĻĄāĻāĻžāĻāĻ¨
āĻĻāĻ°āĻāĻžāĻ°āĨ¤ āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ <head> āĻ āĻžā§āĻāĻ° āĻŋāĻāĻ¤āĻ° <style> āĻ āĻžāĻ āĻŋāĻĻā§ā§ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻžāĻĄ āĻ¯āĻžāĻ āĻāĻ°āĻž āĻšā§āĨ¤ āĻ¯āĻŽāĻ¨-
<html>
<head>
<style type="text/css">
h1{color:#ff00ff;}
13. 13
p{word-spacing:10px;}
</style>
<body>
<h1>My first CSS Codeing</h1>
<p>
CSS stands for Cascading Style Sheets. Styles define how to display HTML
elements. Styles were added to HTML 4.0 to solve a problem. External Style
Sheets can save a lot of work. External Style Sheets are stored in CSS files
</p>
</body>
</html>
āĻāĻĒā§āĻ°āĻ° āĻāĻžāĻĄ ā§āĻ˛āĻž index.html āĻ¨āĻžā§āĻŽ āĻ¸āĻ āĻā§āĻ° āĻ°āĻžāĻ¨ āĻā§āĻ° āĻāĻāĻāĻĒā§āĻ āĻĻāĻā§āĻ¨āĨ¤
ā§¨.āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸āĻ
āĻ¸āĻŦā§āĻā§āĻ¯āĻŧ āĻāĻžāĻ˛ āĻšāĻ¯āĻŧ āĻ¯āĻŋāĻĻ āĻāĻĒāĻ¨āĻžāĻ°āĻž āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻšā§āĻ¤ āĻĒā§āĻĨāĻ āĻ°āĻžā§āĻāĻ¨, āĻāĻ° āĻāĻāĻžāĻ āĻšāĻ˛ āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸āĨ¤
āĻ¯āĻāĻ¨ āĻāĻāĻŋāĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻžāĻĄ āĻ
ā§āĻ¨āĻ āĻĄāĻā§ā§āĻŽā§ āĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ āĻ¤āĻāĻ¨ āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ āĻŽāĨ¤ āĻ āĻāĻžāĻ¨āĻžāĻ˛
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ âāĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĢāĻžāĻāĻ˛ā§āĻ <head> āĻ āĻžā§āĻāĻ° āĻŋāĻāĻ¤āĻ° <link> āĻ āĻžāĻ āĻŋāĻĻā§ā§ āĻ¸āĻāĻ¯ā§ āĻāĻ°āĻž āĻšā§āĨ¤ āĻ¯āĻŽāĻ¨-
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĢāĻžāĻāĻ˛āĻŋāĻ āĻ§ā§āĻŽāĻž āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ code āĻ§āĻžāĻ°āĻ¨ āĻā§āĻ° āĻāĻŦāĻ āĻāĻ āĻĢāĻžāĻāĻ˛āĻŋāĻā§āĻ ".css" āĻĢāĻžāĻāĻ˛
extension āĻŋāĻĻā§āĻ¯āĻŧ āĻ¸āĻ āĻāĻ°āĻž āĻšāĻ¯āĻŧāĨ¤ āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
H3 {color:#FF0000;}
p {
background:#00F;
text-align:center;
}
14. 14
āĻāĻŦāĻžāĻ° āĻāĻĒā§āĻ°āĻ° āĻāĻžāĻĄ ā§āĻ˛āĻž style.css āĻ¨āĻžāĻŽ āĻŋāĻĻā§ā§ āĻ¸āĻ āĻ āĻ¨āĨ¤ āĻāĻ°āĻĒāĻ° āĻŋāĻ¨ā§āĻāĻ° āĻŽāĻ¤ āĻā§āĻ° āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻĢāĻžāĻā§āĻ˛āĻ° āĻ¸āĻžā§āĻĨ
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĢāĻžāĻāĻ˛āĻŋāĻā§āĻ āĻŋāĻ˛āĻāĻ āĻā§āĻ° āĻŋāĻĻāĻ¨āĨ¤
<html>
<head>
<link rel=âstylesheetâ type=âtext/cssâ href=âstyle.cssâ>
</head>
<body>
<h3>A white Header</h3>
<p>This paragraph has a blue font.
The backgrouund color of this page is gray because we changed it with CSS!</p>
</body>
</html>
āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻĢāĻžāĻāĻ˛ āĻŋāĻā§āĻ index.html āĻŋāĻšāĻ¸āĻžā§āĻŦ āĻāĻāĻ āĻĢāĻž āĻžā§āĻ° āĻ
āĻĨāĻžā§ āĻ¯āĻāĻžā§āĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĢāĻžāĻāĻ˛ āĻā§āĻ
āĻ¸āĻāĻžā§āĻ¨ āĻ¸āĻ āĻā§āĻ° index.html āĻĢāĻžāĻāĻ˛āĻŋāĻ āĻ°āĻžāĻ¨ āĻā§āĻ° āĻāĻāĻāĻĒā§āĻ āĻĻāĻā§āĻ¨āĨ¤
ā§Š.āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸āĻ
āĻĄāĻā§ā§āĻŽā§ āĻ° āĻŋāĻ¤āĻŋāĻ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻ āĻžā§āĻāĻ° āĻ¸āĻžā§āĻĨ Style āĻāĻŋ āĻŋāĻŦāĻāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻĄāĻā§ā§āĻŽā§ āĻžāĻāĻ˛ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻžāĻ āĻšāĻ˛
āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĨ¤ āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ ā§ Style āĻŋāĻ¨ā§āĻĻāĻļ āĻĻā§āĻžāĻ° āĻ¸āĻŽā§ Type Attribute āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļāĻ¨
ā§ā§āĻžāĻāĻ¨ āĻšā§ āĻ¨āĻž āĻāĻŦāĻ āĻŋ āĻ¤ā§ā§ āĻŦ āĻ¨ā§ {} āĻāĻ° āĻŦāĻĻā§āĻ˛ āĻ āĻŋāĻ¤ āĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤ āĻŋāĻ¨ā§āĻāĻ° āĻāĻĻāĻžāĻšāĻ°ā§āĻŖ āĻĻāĻā§āĻ¨-
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŦāĻž āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻšā§āĻ¤ āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻ° āĻžāĻ§āĻžāĻ¨ āĻŦāĻŋāĻļāĨ¤ āĻāĻ° āĻ
āĻĨ āĻšā§ āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŦāĻž āĻ āĻžāĻ°āĻ¨āĻžāĻ˛
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ°āĻž āĻžāĻāĻ˛ āĻŋāĻ¨ā§āĻĻāĻŋāĻļāĻ¤ āĻĨāĻžāĻā§āĻ˛āĻ āĻāĻĒāĻŋāĻ¨ āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ°āĻž āĻ āĻžāĻāĻ˛ override āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤
āĻ¯āĻžā§āĻšāĻžāĻ, āĻāĻ¨āĻ˛āĻžāĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ¯āĻž āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻ° āĻ¸āĻŋāĻ āĻ āĻā§ āĻļ āĻšā§āĻ¤ āĻŋāĻŦāĻā§ āĻŋāĻ¤ āĻāĻāĻžāĻ¯āĻŧ āĻ¤āĻžāĻ āĻāĻāĻž āĻāĻāĻŋāĻļāĻāĻāĻžā§āĻŦ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž
āĻāĻŋāĻāĻ¤āĨ¤
15. 15
āĻ¨āĻžāĻāĻ āĻ¯āĻŋāĻĻ āĻ āĻāĻžāĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĢāĻžāĻā§āĻ˛āĻ° āĻŋāĻ˛āĻāĻ āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻāĻ° āĻĒā§āĻ° āĻžāĻĒāĻ¨ āĻāĻ°āĻž āĻšā§ āĻ¤ā§āĻŦ āĻ āĻāĻžāĻ¨āĻžāĻ˛
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸, āĻ āĻžāĻ°āĻ¨āĻžāĻ˛ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸- āĻ override āĻāĻ°ā§āĻŦāĨ¤
āĻŽ āĻŦ āĻ¯āĻžāĻ āĻāĻ°āĻžāĻ
āĻŽ āĻŦ āĻ¯āĻžāĻ āĻāĻ°āĻž āĻ¯ āĻāĻžāĻ¨ āĻ˛ āĻžāĻ ā§ā§ā§āĻ¯āĻ° āĻāĻāĻŋāĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻ¨ āĻŋāĻŦāĻˇā§āĨ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŽ āĻŦ "/*" āĻŋāĻĻā§ā§ āĻšā§ āĻāĻŦāĻ "*/"
āĻŋāĻĻā§ā§ āĻļāĻˇ āĻšā§āĨ¤ āĻ¯āĻŽāĻ¨-
āĻ
āĻ§ āĻžā§- āĻ
[āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ āĻ āĻĒāĻžāĻŋāĻ]
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻāĻ° āĻŦāĻļ āĻŋāĻāĻā§ āĻĒāĻžāĻŋāĻ āĻ¸āĻ°āĻžāĻ¸āĻŋāĻ° āĻ āĻā§āĻ āĻŋāĻ¨ā§ āĻ¨ āĻā§āĻ°āĨ¤ āĻāĻāĻŋāĻ āĻā§ā§āĻŦ āĻĒā§āĻ āĻšāĻŋāĻĄāĻ āĻŋāĻšā§āĻ¸ā§āĻŦ āĻŦāĻž āĻĒ āĻžāĻ°āĻž āĻžāĻĢ āĻŋāĻšā§āĻ¸ā§āĻŦ
āĻŦāĻž āĻ
āĻ¨ āĻŋāĻāĻā§ āĻŋāĻšā§āĻ¸ā§āĻŦ āĻ
ā§āĻ¨āĻ āĻ
ā§āĻ¨āĻ āĻ āĻ āĻĨā§āĻ āĻĨāĻžā§āĻāĨ¤ āĻāĻ° āĻā§ā§āĻŦ āĻĒāĻā§āĻ āĻ¸āĻžāĻāĻžā§āĻ¤ āĻāĻ āĻ¸āĻāĻ˛ āĻ ā§āĻāĻ° āĻžāĻāĻ˛ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ
āĻāĻ°āĻž āĻāĻŦāĻļ āĻāĨ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ āĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻĒāĻŋāĻ¨ āĻ āĻ āĻāĻ° spacing, decoration, color,
alignment āĻ¸āĻš āĻāĻ°āĻ āĻ
ā§āĻ¨āĻ āĻŋāĻāĻā§āĻ āĻŋāĻ¨āĻ¯āĻŧ āĻ¨ āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤ āĻāĻŽāĻ°āĻž āĻāĻ āĻ
āĻ§ āĻžā§ā§ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ āĻ āĻĒāĻžāĻŋāĻ āĻŋāĻ¨ā§ā§
āĻŋāĻŦ āĻžāĻŋāĻ°āĻ¤ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°ā§āĻŦāĻžāĨ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻ āĻ āĻĒāĻžāĻŋāĻ
āĻĒāĻžāĻŋāĻ āĻŦāĻŖāĻ¨āĻž
1.color āĻ ā§āĻāĻ° āĻ°āĻ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ°āĨ¤
2.direction āĻ ā§āĻāĻ° āĻŋāĻĻāĻ āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤
3.letter-spacing
āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻāĻŋāĻ āĻ ā§āĻāĻ° characters ā§āĻ˛āĻžāĻ° āĻŽā§āĻ§ space āĻāĻ° āĻĒāĻŋāĻ°āĻŽāĻžāĻ¨ āĻāĻŽāĻžā§āĻ¨āĻž
āĻŦāĻž āĻŦāĻžā§āĻžā§āĻ¨āĻž āĻ¯āĻžā§āĨ¤
4.line-height āĻ˛āĻžāĻā§āĻ¨āĻ° āĻ āĻ¤āĻž āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤
5.text-align āĻ ā§āĻāĻ° āĻāĻ¨ā§āĻā§āĻŋāĻŽāĻ āĻāĻ˛āĻžāĻāĻ¨ā§āĻŽ āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤
6.text-
decoration
āĻāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ āĻā§āĻ āĻŋāĻŦāĻŋāĻ āĻāĻžā§āĻŦ āĻĻāĻļāĻ¨ āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤
7.text-indent text indent āĻŽāĻžā§āĻ¨ āĻ˛āĻāĻžāĻŋāĻ āĻŦāĻžāĻŽ āĻŋāĻĻā§āĻ āĻĨā§āĻ āĻāĻ¤āĻā§āĻā§ āĻāĻžā§ āĻŋāĻĻā§ā§ āĻšā§āĻŦāĨ¤
8.text-shadow āĻ ā§āĻ āĻļ āĻžā§āĻĄāĻž āĻā§āĻĢ āĻ¯āĻžāĻ āĻā§āĻ°āĨ¤
9.text-transform āĻ ā§āĻāĻ° āĻ āĻžāĻŋāĻĒāĻāĻžāĻ˛āĻžāĻā§āĻāĻļāĻ¨ āĻŋāĻ¨ā§ āĻ¨ āĻā§āĻ°āĨ¤
16. 16
10.vertical-align āĻ ā§āĻāĻ° āĻāĻ˛ āĻāĻ˛āĻžāĻāĻ¨ā§āĻŽ āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤
11.white-space Specifies how white-space inside an element is handled
12.word-spacing
āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻĒāĻžāĻļāĻžāĻĒāĻžāĻŋāĻļ āĻļ ā§āĻ˛āĻžāĻ° āĻŽā§āĻ§ white space āĻāĻ° āĻĒāĻŋāĻ°āĻŽāĻžāĻ¨ āĻāĻŽāĻžā§āĻ¨āĻž āĻŦāĻž āĻŦāĻžā§āĻžā§āĻ¨āĻž
āĻ¯āĻžā§āĨ¤
ā§§. āĻ āĻ āĻāĻžāĻ˛āĻžāĻ° āĻĒāĻžāĻŋāĻāĻ
āĻā§ā§āĻŦ āĻĒā§āĻāĻ° āĻ¯ āĻāĻžāĻ¨ āĻ ā§āĻāĻ° āĻāĻžāĻ˛āĻžāĻ° āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°ā§āĻ¤ āĻāĻžāĻ˛āĻžāĻ° āĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤ āĻ¯āĻŽāĻ¨-
<html>
<head>
<style type="text/css">
h1 {color:#00ff00;}
p {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph.</p>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
āĻŋāĻŦāĻ āĻ āĻāĻžāĻ˛āĻžāĻ° āĻāĻ˛ā§ āĻāĻĒāĻ¨āĻžāĻ° āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻāĻ°āĻžāĻ° āĻ¸āĻŽā§ āĻ¯ āĻāĻžā§āĻŦ āĻ¸āĻ āĻā§āĻ°ā§āĻāĻ¨ āĻāĻāĻžā§āĻ¨ āĻ¸āĻ āĻāĻāĻ āĻāĻžā§āĻŦ āĻ¸āĻ āĻāĻ°ā§āĻ¤
āĻĒāĻžāĻ°ā§āĻŦāĻ¨āĨ¤
ā§¨. āĻ āĻ āĻŋāĻĄā§āĻ°āĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻāĻ
āĻ ā§āĻāĻ° āĻŋāĻĻāĻ āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°ā§āĻ¤ āĻāĻ āĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤ āĻāĻ° āĻŦ āĻŦāĻšāĻžāĻ° āĻ
ā§āĻ¨āĻ āĻāĻŽāĨ¤ āĻāĻāĻž āĻ¨āĻž āĻāĻžāĻ¨ā§āĻ˛āĻ āĻšā§āĻŦāĨ¤
<html>
<head>
<style type="text/css">
p {direction:rtl;}
h5{direction:ltr}
17. 17
</style>
</head>
<body>
<p>Some text. Default writing direction.</p>
<h5>Some text. Default writing direction.</h5>
</body>
</html>
āĻāĻ āĻĒāĻžāĻŋāĻ āĻŋāĻ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°-
ltr āĻ ā§āĻāĻ° āĻŋāĻĻāĻ āĻŦāĻžāĻŽ āĻĨā§āĻ āĻĄāĻžā§āĻ¨ āĻšā§āĻŦāĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĻŽāĻžāĻ¨āĨ¤
rtl āĻ ā§āĻāĻ° āĻŋāĻĻāĻ āĻĄāĻžāĻ¨ āĻĨā§āĻ āĻŦāĻžā§āĻŽ āĻšā§āĻŦāĨ¤
ā§Š. āĻ˛āĻāĻžāĻ° āĻŋāĻ¸āĻ āĻĒāĻžāĻŋāĻāĻ
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ letter-spacing āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻāĻŋāĻ āĻ ā§āĻāĻ° āĻ āĻžā§āĻ° āĻžāĻ° ā§āĻ˛āĻžāĻ° āĻŽā§āĻ§ āĻ¸ āĻāĻ° āĻĒāĻŋāĻ°āĻŽāĻžāĻ¨ āĻāĻŽāĻžā§āĻ¨āĻž
āĻŦāĻž āĻŦāĻžā§āĻžā§āĻ¨āĻž āĻ¯āĻžā§āĨ¤ āĻ¯āĻŽāĻ¨-
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
18. 18
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
āĻ˛ āĻ āĻ¨ āĻ¨ā§āĻ āĻ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻāĻžāĻ°ā§āĻŖ āĻ˛āĻāĻž ā§āĻ˛āĻž āĻāĻžā§ā§ āĻāĻžā§ā§ āĻ˛ā§āĻ āĻŋāĻā§ā§ā§āĻāĨ¤
ā§Ē.āĻ˛āĻžāĻāĻ¨ āĻšāĻžāĻāĻ āĻĒāĻžāĻŋāĻāĻ
ā§āĻāĻž āĻ˛āĻžāĻā§āĻ¨āĻ° āĻŽāĻžā§āĻ āĻŋāĻ āĻĒāĻŋāĻ°āĻŽāĻžāĻŖ āĻĢāĻāĻžāĻāĻž āĻžāĻ¨ āĻĨāĻžāĻā§āĻŦ āĻ¤āĻž āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°āĻž āĻšā§ āĻāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤
[āĻŋāĻŦāĻ āĻ āĻŋāĻ¨ā§āĻāĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻŋāĻā§āĻ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ¸ āĻŋāĻ¸ā§āĻ˛ āĻ° āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ā§ā§āĻāĨ¤ āĻŋāĻ¸ā§āĻ˛ āĻ° āĻ¸ ā§ āĻāĻžāĻ¨ā§āĻ¤ āĻā§āĻ āĻŋāĻ¸ā§āĻ˛ āĻ°
āĻ
āĻ§ āĻžā§āĻŋāĻ āĻĒā§ā§ āĻāĻ¸ā§āĻ¨āĨ¤]
<html>
<head>
<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>
</head>
19. 19
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
āĻāĻžāĻĄ āĻŋāĻŦā§ āĻˇāĻŖāĻ āĻāĻĒā§āĻ°āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻŋāĻā§āĻ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻ˛āĻāĻžāĻ° āĻ¸āĻŽā§ āĻāĻŽāĻ°āĻž p.small āĻ p.big āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĻŋāĻ āĻ¯āĻž āĻ
ā§āĻ¨ā§āĻāĻ
āĻšā§ā§āĻ¤āĻž āĻŦā§āĻā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨ āĻŋāĻ¨āĨ¤ āĻŦāĻŋāĻĄ āĻ
āĻā§āĻļ āĻ˛ āĻ āĻ¨ āĻāĻāĻžā§āĻ¨ āĻŋāĻ¤āĻ¨āĻŋāĻ āĻĒ āĻžāĻ°āĻž āĻžāĻĢ āĻā§āĻ āĻāĻŽāĻ°āĻž āĻāĻžāĻ āĻŋāĻ¤āĻ¨āĻŋāĻ āĻĒ āĻžāĻ°āĻž āĻžā§āĻĢ āĻŋāĻ¤āĻ¨āĻŋāĻ
20. 20
āĻāĻ˛āĻžāĻĻāĻž āĻžāĻāĻ˛ āĻšāĻžāĻ āĻ¤āĻžāĻ āĻĨā§āĻŽ āĻ¤āĻžā§āĻĻāĻ°ā§āĻ <p class="small"> āĻ <p class="big"> āĻ¨āĻžā§āĻŽ āĻŋāĻāĻŋ āĻ¤ āĻā§āĻ° āĻ°ā§āĻāĻŋāĻ
āĻĒā§āĻ° āĻžāĻāĻ˛ āĻļā§ā§āĻ āĻžāĻ¸ āĻ¨āĻžāĻŽ āĻ§ā§āĻ° āĻāĻ˛ āĻā§āĻ°āĻŋāĻ, āĻāĻāĻžā§āĻ āĻŦā§āĻ˛ āĻžāĻ¸ āĻŋāĻ¸ā§āĻ˛ āĻ°āĨ¤
line-height āĻĒāĻžāĻŋāĻā§āĻ¤ āĻŦ āĻŦ āĻ¤ āĻŽāĻžā§āĻ¨āĻ° āĻāĻāĻāĻ¸ā§āĻŽāĻš-
ā§§.āĻ¸āĻ°āĻžāĻ¸āĻŋāĻ° āĻ¨āĻž āĻžāĻ° āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤ (āĻā§ ā§ āĻ˛āĻžāĻā§āĻ¨āĻ° āĻ āĻ¤āĻž āĻšā§āĻŦ āĻĢ āĻ¸āĻžāĻā§āĻāĻ° āĻŽāĻžā§āĻ¨āĻ° āĻ¸āĻžā§āĻĨ āĻ¨ āĻā§āĻ° āĻ¯āĻž āĻšā§āĻŦ)
ā§¨. āĻ˛āĻžāĻā§āĻ¨āĻ° āĻ āĻ¤āĻž px, pt, cm āĻāĻā§āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻŋāĻ¨āĻŖā§ āĻāĻ°āĻžāĨ¤
ā§Š.āĻļāĻ¤āĻāĻ°āĻž (%) āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĻ˛ āĻ˛āĻžāĻā§āĻ¨āĻ° āĻ āĻ¤āĻž āĻšā§āĻŦ āĻŦ āĻŦ āĻ¤ āĻĢ āĻ¸āĻžāĻā§āĻāĻ° āĻ¸āĻžā§āĻĒā§ āĨ¤
ā§Ģ. āĻ āĻ āĻāĻ˛āĻžāĻāĻ¨ āĻĒāĻžāĻŋāĻāĻ
āĻā§ā§āĻŦ āĻ¸āĻžāĻā§āĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻ¨āĻ¤ āĻ āĻ ā§āĻ˛āĻžāĻ° āĻ˛āĻĢāĻ āĻāĻ˛āĻžāĻāĻ¨ā§āĻŽ āĻŋāĻ¨āĻŦāĻžāĻŋāĻāĻ¤ āĻĨāĻžā§āĻāĨ¤ t e x t -a l i g n āĻĒāĻžāĻŋāĻāĻ° āĻ¸āĻžāĻšāĻžā§āĻ¯
āĻ āĻ āĻāĻ° āĻŋāĻŦāĻŋāĻ āĻāĻ˛āĻžāĻāĻ¨ā§āĻŽ āĻĻāĻ¯āĻŧāĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤ āĻāĻ° āĻŽāĻžāĻ¨ āĻšā§āĻ¤ āĻĒāĻžā§āĻ°-l e f t r i g h t c e n t e r, , ,
j u s t i f y āĨ¤ āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
21. 21
</body>
</html>
ā§Ŧ. āĻ āĻ āĻĄā§āĻāĻžā§āĻ°āĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻāĻ
āĻāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ āĻā§āĻ āĻŋāĻŦāĻŋāĻ āĻāĻžā§āĻŦ āĻĻāĻļāĻ¨ āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ text-decoration āĻĒāĻžāĻŋāĻ āĻ¸āĻŦā§āĻā§ā§ āĻŦāĻŋāĻļ
āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ āĻŋāĻ˛ā§ āĻ° āĻ āĻžāĻ°āĻ˛āĻžāĻāĻ¨ āĻĻā§āĻ° āĻāĻ°ā§āĻ¤āĨ¤ āĻŽāĻ¨ā§ āĻ¤āĻŋāĻ° āĻāĻ°āĻžāĻ° āĻ¸āĻŽā§ āĻāĻāĻž āĻ
ā§āĻ¨āĻ āĻāĻžā§āĻ āĻ˛āĻžāĻā§āĻŦāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
22. 22
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
Text-decoration āĻ¯ āĻŽāĻžāĻ¨ ā§āĻ˛āĻž āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
none āĻ¨āĻ°āĻŽāĻžāĻ˛ āĻ āĻ āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
underline āĻ ā§āĻ āĻ āĻžāĻ°āĻ˛āĻžāĻāĻ¨ āĻšā§āĻŦ
overline āĻ ā§āĻ āĻāĻāĻžāĻ°āĻ˛āĻžāĻāĻ¨ āĻšā§āĻŦ
line-through āĻ ā§āĻāĻ° āĻŽāĻžāĻ āĻŦāĻ°āĻžāĻŦāĻ° āĻĻāĻžāĻ āĻšā§āĻŦāĨ¤
blink āĻ āĻ āĻ˛āĻž āĻ¨āĻāĻž āĻāĻ°ā§āĻŦāĨ¤
ā§. āĻ āĻ āĻāĻ¨ā§āĻĄ āĻĒāĻžāĻŋāĻāĻ
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ text-indent āĻ āĻāĻŽāĻ°āĻž āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ (<pre>) āĻ āĻžāĻ āĻĒāĻŋāĻ°āĻŦā§āĻ¤ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻŋāĻ°āĨ¤ āĻ¸āĻ°āĻžāĻ¸āĻŋāĻ° āĻāĻžāĻ¨
āĻŽāĻžāĻ¨ āĻŦāĻž āĻļāĻ¤āĻāĻ°āĻž āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻāĻŽāĻ°āĻž text-indent āĻŋāĻ¨āĻŋāĻĻ āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻŋāĻ°āĨ¤ text indent āĻŽāĻžā§āĻ¨ āĻ˛āĻāĻžāĻŋāĻ āĻŦāĻžāĻŽ
āĻŋāĻĻā§āĻ āĻĨā§āĻ āĻāĻ¤āĻā§āĻā§ āĻāĻžā§ āĻŋāĻĻā§ā§ āĻšā§āĻŦāĨ¤ āĻāĻ° āĻŽāĻžāĻ¨ āĻŋāĻšā§āĻ¸ā§āĻŦ āĻĻāĻ (em,ex,pt) āĻ āĻļāĻ¤āĻāĻ°āĻž āĻšāĻžāĻ°(%) āĻŦ āĻŦ āĻ¤ āĻšā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤
āĻ¨ā§āĻāĻŋāĻāĻ āĻŽāĻžāĻ¨ āĻĻāĻā§āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
23. 23
h1 {text-indent:50px;}
</style>
</head>
<body>
<h2>In my younger and more vulnerable </h2>
<h1>In my younger and more vulnerable </h1>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
āĻāĻžāĻĄ āĻŋāĻŦā§ āĻˇāĻŖāĻ āĻāĻĒā§āĻ°āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻŋāĻā§āĻ¤ āĻ˛ āĻ āĻ¨ <h1> āĻāĻ° text-indent:50px āĻĻāĻā§āĻžāĻ° āĻāĻžāĻ°ā§āĻŖ āĻ˛āĻāĻžāĻŋāĻ
āĻŦāĻžāĻŽāĻŋāĻĻāĻ āĻĨā§āĻ 50px āĻĻā§ā§āĻ° āĻ¸ā§āĻ° āĻŋāĻā§ā§ā§āĻāĨ¤
ā§Ž. āĻ āĻ āĻļ āĻžā§āĻĄāĻž āĻĒāĻžāĻŋāĻāĻ
āĻāĻžāĻ¨ āĻ ā§āĻ āĻļ āĻžā§āĻĄāĻž āĻā§āĻĢ ā§ā§āĻžāĻ āĻāĻ°āĻž āĻšā§āĻŦ āĻŋāĻ āĻ¨āĻž āĻ¤āĻž āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°āĻž āĻšā§ āĻāĻ āĻĒāĻžāĻŋāĻ āĻŋāĻĻā§ā§āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
h1 {
background: white;
color: red;
text-shadow: 5px 3px 5px red ;
24. 24
}
</style>
</head>
<body>
<h1>Red Shadow Effect </h1>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
āĻāĻ˛ā§ ā§āĻ˛āĻž āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ° āĻāĻžāĻ¨āĻŋāĻĻā§āĻ āĻāĻ¤ āĻŋāĻĒā§ āĻ˛ āĻļ āĻžā§āĻĄāĻž āĻšā§āĻŦ āĻāĻ° āĻ°ā§āĻāĻ° āĻ¨āĻžāĻŽ āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ° āĻŋāĻ āĻ°ā§āĻāĻ°
āĻļ āĻžā§āĻĄāĻž āĻšā§āĻŦāĨ¤
ā§¯. āĻ āĻ āĻž āĻĢāĻ°ā§āĻŽāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻāĻ
āĻ āĻ Transform āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ āĻ āĻāĻ° āĻ¤ capitalize( āĻāĻžāĻ āĻĨā§āĻ āĻŦā§ āĻŦāĻž āĻŦā§ āĻĨā§āĻ āĻāĻžāĻ āĻšāĻ°ā§āĻĢ āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨)
āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤ āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻŋāĻ¤āĻāĻž āĻļā§ āĻ° āĻĨāĻŽ āĻ
āĻ°ā§āĻāĻ capitalize āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ āĻāĻ° āĻāĻžāĻ°āĻŋāĻ āĻŽāĻžāĻ¨ āĻšā§āĻ¤
āĻĒāĻžā§āĻ°āĨ¤ āĻ¯āĻŽāĻ¨-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
none Capitalization āĻšā§āĻŦ āĻ¨āĻžāĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
capitalize āĻŋāĻ¤āĻāĻž āĻā§āĻžāĻĄ āĻāĻ° āĻĨāĻŽ āĻ
āĻ° uppercase-āĻ āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻāĻ°ā§āĻŦāĨ¤
uppercase āĻ¸āĻāĻ˛ āĻ āĻžā§āĻ° āĻžāĻ°ā§āĻ uppercase-āĻ āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻāĻ°ā§āĻŦāĨ¤
lowercase āĻ¸āĻāĻ˛ āĻ āĻžā§āĻ° āĻžāĻ°ā§āĻ lowercase -āĻ āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻāĻ°ā§āĻŦāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
25. 25
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
ā§§ā§Ļ.āĻāĻžāĻŋāĻāĻ āĻ˛ āĻāĻ˛āĻžāĻāĻ¨ āĻĒāĻžāĻŋāĻāĻ
āĻ ā§āĻāĻ° āĻ āĻŦ āĻāĻ˛āĻžāĻāĻ¨ā§āĻŽ āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°āĻž āĻšā§ āĻāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤
Vertical-align property āĻ¯ āĻŽāĻžāĻ¨ ā§āĻ˛āĻž āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
length
āĻŋāĻ¨āĻŋāĻĻ āĻāĻ˛ā§āĻ° āĻ¸āĻžāĻšāĻžā§āĻ¯ āĻāĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻžāĻāĻ āĻŦāĻžā§āĻžā§ āĻŦāĻž āĻāĻŽāĻžā§āĨ¤ āĻ¨ā§āĻāĻŋāĻāĻ āĻŽāĻžāĻ¨ āĻšāĻ¨ā§āĻ¯āĻžāĻ āĨ¤
%
Raises or lower an element in a percent of the "line-height" property.
āĻ¨ā§āĻāĻŋāĻāĻ āĻŽāĻžāĻ¨ āĻšāĻ¨ā§āĻ¯āĻžāĻ āĨ¤
26. 26
baseline āĻŽā§āĻ˛ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻŦāĻāĻ˛āĻžāĻā§āĻ¨āĻ° āĻ¸āĻžā§āĻĨ āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻāĻ˛āĻžāĻāĻ¨ āĻā§āĻ°āĨ¤ This is default
sub āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ subscript āĻŋāĻšā§āĻ¸ā§āĻŦ āĻĻāĻāĻžā§āĨ¤
super āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ superscript āĻŋāĻšā§āĻ¸ā§āĻŦ āĻĻāĻāĻžā§āĨ¤
top āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° top āĻ āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻ¸āĻžāĻŋāĻ°āĻ° āĻ¸āĻŦā§āĻā§ā§ āĻāĻāĻā§ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° top āĻāĻ° āĻ¸āĻžā§āĻĨ āĻāĻ˛āĻžāĻāĻ¨ āĻā§āĻ°āĨ¤
text-top āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻŽā§āĻ˛ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° top of the font āĻāĻ° āĻ¸āĻžā§āĻĨ āĻāĻ˛āĻžāĻāĻ¨ āĻā§āĻ°āĨ¤
middle āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻŽā§āĻ˛ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻŽāĻžā§āĻ āĻāĻ˛āĻžāĻāĻ¨ āĻā§āĻ°āĨ¤
bottom āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻ¤āĻ˛ā§āĻ āĻāĻ āĻ˛āĻžāĻā§āĻ¨āĻ° āĻ¸āĻŦā§āĻā§ā§ āĻŋāĻ¨ā§āĻāĻ° āĻāĻĒāĻžāĻĻāĻžāĻ¨āĻŋāĻāĻ° āĻ¤ā§āĻ˛āĻ° āĻ¸āĻžā§āĻĨ āĻāĻ˛āĻžāĻāĻ¨ āĻā§āĻ°āĨ¤
text-
bottom
āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻ¤āĻ˛(bottom) āĻŽā§āĻ˛ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻ¤ā§āĻ˛āĻ° āĻ¸āĻžā§āĻĨ āĻāĻ˛āĻžāĻāĻ¨ āĻā§āĻ°āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src=" logo.gif" alt="W3Schools" width="270" height="50" /> image
with a default alignment.</p>
<p>An <img class="top" src=" logo.gif" alt="W3Schools" width="270"
height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src=" logo.gif" alt="W3Schools" width="270"
height="50" /> image with a text-bottom alignment.</p>
27. 27
</body>
</html>
ā§§ā§§. āĻšāĻžā§āĻžāĻāĻ āĻ¸ āĻĒāĻžāĻŋāĻāĻ
āĻšāĻžā§āĻžāĻāĻ āĻ¸ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻāĻŋāĻ āĻ˛āĻāĻž āĻāĻ āĻ˛āĻžāĻā§āĻ¨ āĻāĻ˛ā§āĻ¤ āĻĨāĻžāĻā§āĻŦ āĻ¯āĻ¤ āĻ¨ āĻ¨āĻž āĻāĻĒāĻŋāĻ¨ break <br /> āĻ āĻžāĻ āĻ¨āĻž
āĻŋāĻĻā§āĻŦāĻ¨āĨ¤ </br> āĻ āĻžāĻ āĻŋāĻĻā§āĻ˛ āĻ¤āĻžāĻ°āĻĒāĻ° āĻĨā§āĻ āĻŋāĻ¨ā§āĻ āĻ˛āĻžāĻāĻ¨ āĻ¯āĻžā§āĻŦāĨ¤
white-space property āĻ¯ āĻŽāĻžāĻ¨ ā§āĻ˛āĻž āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
normal
āĻĒāĻžāĻļāĻžāĻĒāĻžāĻŋāĻļ āĻ
ā§āĻ¨āĻ ā§āĻ˛āĻž whitespace āĻāĻāĻŋāĻ whitespace-āĻ āĻĒāĻŋāĻ°āĻŖāĻ¤ āĻšā§āĻŦāĨ¤ āĻ āĻ āĻŽā§āĻŋā§ā§ā§(
wrap) āĻ¯āĻžā§āĻŦ āĻ¯āĻāĻ¨ ā§ā§āĻžāĻāĻ¨āĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
nowrap
āĻĒāĻžāĻļāĻžāĻĒāĻžāĻŋāĻļ āĻ
ā§āĻ¨āĻ ā§āĻ˛āĻž whitespace āĻāĻāĻŋāĻ whitespace-āĻ āĻĒāĻŋāĻ°āĻŖāĻ¤ āĻšā§āĻŦāĨ¤ āĻ āĻ āĻŽā§āĻŋā§ā§ā§
āĻĒāĻŋāĻ°āĻŦāĻ¤ā§ āĻ˛āĻžāĻā§āĻ¨ āĻ¯āĻžā§āĻŦ āĻ¨āĻž āĨ¤ āĻŋāĻ āĻāĻ āĻ˛āĻžāĻā§āĻ¨ āĻāĻ˛ā§āĻ¤ āĻāĻ˛ā§āĻ¤ āĻ¯āĻŋāĻĻ <br /> āĻ āĻžāĻ āĻĒāĻžā§ āĻ¤ā§āĻŦ āĻŽā§āĻŋā§ā§ā§ āĻ¯āĻžā§āĻŦāĨ¤
Pre
āĻāĻžāĻŋāĻĄāĻ-āĻ āĻ¯āĻ¤ ā§āĻ˛āĻž Whitespace āĻĨāĻžāĻā§āĻŦ āĻ¤āĻžāĻ° āĻ¸āĻŦāĻ āĻžāĻāĻāĻžā§āĻ° āĻĻāĻāĻž āĻ¯āĻžā§āĻŦāĨ¤
Text will only wrap on line breaks Acts like the <pre> tag in HTML
pre-line
āĻĒāĻžāĻļāĻžāĻĒāĻžāĻŋāĻļ āĻ
ā§āĻ¨āĻ ā§āĻ˛āĻž whitespace āĻāĻāĻŋāĻ whitespace-āĻ āĻĒāĻŋāĻ°āĻŖāĻ¤ āĻšā§āĻŦāĨ¤ āĻ āĻ āĻŽā§āĻŋā§ā§ā§(
wrap) āĻ¯āĻžā§āĻŦ āĻ¯āĻāĻ¨ ā§ā§āĻžāĻāĻ¨ āĻšā§āĻŦ āĻŋāĻ āĻ˛āĻžāĻāĻ¨ āĻ āĻšā§āĻŦ āĻ¨āĻžāĨ¤
pre-wrap
āĻāĻžāĻŋāĻĄāĻ-āĻ āĻ¯āĻ¤ ā§āĻ˛āĻž Whitespace āĻĨāĻžāĻā§āĻŦ āĻ¤āĻžāĻ° āĻ¸āĻŦāĻ āĻžāĻāĻāĻžā§āĻ° āĻĻāĻāĻž āĻ¯āĻžā§āĻŦāĨ¤ āĻ āĻ āĻŽā§āĻŋā§ā§ā§(
wrap) āĻ¯āĻžā§āĻŦ āĻ¯āĻāĻ¨ ā§ā§āĻžāĻāĻ¨ āĻšā§āĻŦ āĻŋāĻ āĻ˛āĻžāĻāĻ¨ āĻ āĻšā§āĻŦ āĻ¨āĻžāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
p
{
white-space:nowrap;
}
28. 28
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
ā§§ā§¨.āĻā§āĻžāĻĄ āĻŋāĻ¸āĻ āĻĒāĻžāĻŋāĻāĻ
Word Spacing property-āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻĒāĻžāĻļāĻžāĻĒāĻžāĻŋāĻļ āĻļ ā§āĻ˛āĻžāĻ° āĻŽā§āĻ§ white space āĻāĻ° āĻĒāĻŋāĻ°āĻŽāĻžāĻ¨ āĻāĻŽāĻžā§āĻ¨āĻž
āĻŦāĻž āĻŦāĻžā§āĻžā§āĻ¨āĻž āĻ¯āĻžā§āĨ¤ āĻāĻ° āĻŽāĻžāĻ¨ px, pt, cm, em āĻāĻā§āĻ āĻšā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ āĻ¨ā§āĻāĻŋāĻāĻ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>
29. 29
<p>
This is some text. This is some text.
</p>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
āĻ
āĻ§ āĻžā§-āĻŋāĻ¤āĻ¨
[āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĒāĻŋāĻ°āĻŽāĻžāĻĒāĻ āĻĒāĻžāĻŋāĻ ]
āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛- āĻ āĻāĻŽāĻ°āĻž height āĻ width āĻāĻŋ āĻŋāĻŦāĻā§āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻŋāĻŦāĻŋāĻ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻāĻāĻžāĻ° āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ°
āĻŋāĻĻā§ā§āĻŋāĻāĨ¤ āĻŋāĻ āĻāĻŽāĻ°āĻž āĻ¯āĻāĻ¨ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻļāĻāĻŦ āĻ¤āĻāĻ¨ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻŋāĻĻā§ā§ āĻāĻ āĻāĻžāĻ ā§āĻ˛āĻž āĻāĻ° āĻāĻ°āĻŦ āĻ¨āĻžāĨ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŽāĻžāĻ
āĻā§āĻŋāĻ āĻĒāĻžāĻŋāĻāĻ° āĻ¸āĻžāĻšāĻžā§āĻ¯ āĻāĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻāĻāĻžāĻ° āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§āĨ¤ āĻāĻ āĻā§āĻŋāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžā§āĻ āĻŽā§āĻ˛āĻ¤ ā§§ āĻ ā§Ŧ āĻ¨āĻž āĻžāĻ°āĻāĻžāĻ
āĻŦāĻŋāĻļ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻāĻ° āĻ¸āĻāĻ˛ āĻāĻāĻžāĻ° āĻŋāĻ¨āĻ§āĻžāĻ°āĻ āĻĒāĻžāĻŋāĻ
āĻĒāĻžāĻŋāĻ āĻŦāĻŖāĻ¨āĻž āĻŽāĻžāĻ¨
1.height āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° height āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°
auto
length
%
2.max-height āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻ°ā§ āĻž height āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°
none
length
%
3.max-width āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻ°ā§ āĻž width āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°
none
length
%
4.min-height āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻ°āĻŋāĻ¨ height āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°
length
%
5.min-width āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻ°āĻŋāĻ¨ width āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°
length
%
30. 30
6.width āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° width āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°
auto
length
%
āĻāĻĒā§āĻ°āĻ° āĻāĻ āĻā§āĻŋāĻ āĻĒāĻžāĻŋāĻā§āĻ¤ āĻŦ āĻŦ āĻ¤ āĻāĻ˛ā§ ā§āĻ˛āĻžāĻ° āĻŽāĻžāĻ¨ āĻ āĻŦāĻŖāĻ¨āĻž āĻŋāĻ¨ā§ āĻĻāĻā§āĻž āĻšāĻ˛-
Noneī¨ No maximum height, maximum width. āĻāĻāĻž āĻŋāĻĄāĻĢ āĻŽāĻžāĻ¨āĨ¤
Autoī¨ āĻžāĻāĻāĻžāĻ° āĻŋāĻ¨ā§āĻāĻ āĻšāĻžāĻāĻ āĻ āĻžāĻ˛āĻā§ā§āĻ˛āĻ āĻā§āĻ°āĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĻŽāĻžāĻ¨āĨ¤
Lengthī¨ px, cm āĻāĻāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĨ¤
%ī¨ āĻĒā§ā§āĻ°āĻž āĻāĻā§ āĻž āĻāĻ¨ā§āĻā§ āĻ° āĻāĻ¨ āĻŋāĻ¸ā§āĻ˛ āĻšā§āĻŦāĨ¤
āĻ§āĻžāĻ°āĻžāĻŦāĻžāĻŋāĻšāĻāĻāĻžā§āĻŦ āĻŋāĻ¨ā§ āĻā§āĻĻāĻ° āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°āĻž āĻšāĻ˛āĻ
1+6.height and width Property:
āĻāĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° height āĻ width āĻŋāĻ¨āĻŖā§ āĻāĻ°āĻž āĻšā§ āĻāĻ āĻĒāĻžāĻŋāĻ ā§ā§āĻ° āĻžāĻ°āĻžāĨ¤ āĻ¯āĻŽāĻ¨-
<html>
<head>
<style type="text/css">
div{ height:250px; width:200px; background:#887733}
</style>
</head>
<body>
<div><h3>This is a Block</h3></div>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
31. 31
2.CSS max-height Property:
āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻ°ā§ āĻž āĻšāĻžāĻāĻ āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤ āĻ¯āĻŽāĻ¨-
<html>
<head>
<style type="text/css">
p{max-height:50px; background-color:yellow;}
</style>
</head>
<body>
<p>The maximum height of this paragraph is set to 50px. The maximum
height of this paragraph is set to 50px. The maximum height of this
paragraph is set to 50px. The maximum height of this paragraph is set to
50px. The maximum height of this paragraph is set to 50px. The maximum
height of this paragraph is set to 50px. The maximum height of this
paragraph is set to 50px. The maximum height of this paragraph is set to
50px. The maximum height of this paragraph is set to 50px. The maximum
height of this paragraph is set to 50px.</p>
32. 32
</body>
</html>
3.CSS max-width Property:
āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° max-width āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤ āĻ¯āĻŽāĻ¨-
<html>
<head>
<style type="text/css">
p{max-width:100px; background-color:yellow;}
</style>
</head>
<body>
<p>The maximum width of this paragraph is set to 100px.</p>
</body>
</html>
4.CSS min-height Property:
āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° min-height āĻŋāĻ¨ā§āĻĻāĻļ āĻā§āĻ°āĨ¤ āĻ¯āĻŽāĻ¨-
<html>
<head>
<style type="text/css">
34. 34
</style>
</head>
<body>
<p>The minimum width of this paragraph is set to 150px.</p>
</body>
</html>
āĻ
āĻ§ āĻžā§-āĻāĻžāĻ°
[āĻĢ āĻĒāĻžāĻŋāĻ ]
āĻāĻŽāĻžāĻ° āĻ˛āĻāĻž āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻŦāĻāĻŋāĻā§āĻ¤ āĻāĻŋāĻŽ āĻŦā§āĻ˛āĻŋāĻāĻ˛āĻžāĻŽ āĻĢā§ āĻ° āĻĒāĻŋāĻ°āĻĒā§āĻŖ āĻŋāĻ¨ā§ āĻ¨ āĻĒāĻžāĻā§āĻž āĻ¯āĻžā§āĻŦ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻ¸āĻŽā§āĨ¤
āĻĢ āĻā§ā§āĻŦ āĻĒā§āĻāĻ° āĻāĻ¨ āĻ
āĻ¤ āĻĒā§āĻŖ āĻāĻāĻŋāĻ āĻŋāĻŦāĻˇā§āĨ¤ āĻā§ā§āĻŦ āĻĒā§āĻāĻ° āĻ
āĻŋāĻ§āĻāĻžāĻāĻļ āĻāĻžā§āĻāĻž āĻā§ā§ā§ āĻĢ āĻŋāĻŦāĻĻ āĻŽāĻžāĻ¨ āĻ¤āĻžāĻ āĻāĻāĻŋāĻ
āĻ¸ā§ āĻ° āĻ āĻāĻāĻˇāĻŖā§āĻ āĻā§ā§āĻŦ āĻĒāĻ āĻ¤āĻŋāĻ°āĻ° āĻāĻ¨ āĻĢā§ āĻ° āĻ
āĻĒāĻŋāĻ°āĻ¸ā§āĻŽāĨ¤ āĻ āĻ
āĻ§ āĻžā§ā§ āĻāĻŽāĻ°āĻž āĻĢ āĻ¸ āĻŋāĻāĻ¤ āĻ¯āĻžāĻŦāĻ¤ā§ā§ āĻŋāĻŦāĻˇā§
āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°ā§āĻŦāĻžāĨ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸- āĻ āĻĢ āĻ¸ āĻŋāĻāĻ¤ āĻā§āĻŋāĻ āĻĒāĻžāĻŋāĻ āĻ¸āĻ āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ āĻ ā§āĻ˛āĻž āĻšāĻ˛āĻ
āĻĒāĻžāĻŋāĻ āĻŦāĻŖāĻ¨āĻž
1.font āĻ¸āĻāĻ˛ font properties-āĻāĻ° āĻāĻ¨ āĻāĻāĻŋāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļāĻ¨āĨ¤
2.font-family āĻ ā§āĻāĻ° āĻāĻ¨ font family āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ°āĨ¤
3.font-size āĻ ā§āĻāĻ° āĻāĻ¨ font size āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ°āĨ¤
4.font-style āĻ ā§āĻāĻ° āĻāĻ¨ font style āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ°āĨ¤
5.font-variant
āĻĢ Variant āĻāĻ° āĻ¸āĻžāĻšāĻžā§āĻ¯ āĻāĻĒāĻŋāĻ¨ āĻĢ āĻ small caps āĻ āĻĒāĻŋāĻ°āĻŦāĻŋāĻ¤āĻ¤ āĻāĻ°ā§āĻ¤
āĻĒāĻžā§āĻ°āĻ¨āĨ¤
6.font-weight
āĻāĻāĻŋāĻ āĻĢ āĻā§ āĻĒāĻŋāĻ°āĻŽāĻžāĻŖ āĻŽāĻžāĻāĻž āĻĻāĻāĻž āĻ¯āĻžā§āĻŦ āĻ¤āĻž āĻŦāĻžāĻāĻžā§āĻ¨āĻžāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ font-
weight āĻĒāĻžāĻŋāĻāĨ¤
āĻŋāĻ¤āĻŋāĻ āĻĒāĻžāĻŋāĻ āĻ¸ ā§āĻ āĻŋāĻ¨ā§āĻ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°āĻž āĻšāĻ˛āĻ
ā§§.āĻĢ āĻĒāĻžāĻŋāĻāĻ
āĻĢā§ āĻ° āĻŋāĻŦāĻŋāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ¨ āĻŋāĻ āĻŋāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļā§āĻ¨ āĻ¨āĻž āĻŋāĻĻā§ā§ āĻāĻāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļā§āĻ¨āĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ˛āĻāĻžāĻ° āĻāĻ¨ font-
property āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤ āĻ¯āĻŽāĻ¨āĻ āĻāĻāĻŋāĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļāĻ¨-
p{
35. 35
font-size:larger;
font-style:italic;
font:varient:small-caps;
font-family:Arial;
}
font-property āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻ¸āĻšāĻāĻāĻžā§āĻŦ āĻŋāĻ¨ā§āĻāĻ° āĻŽāĻ¤ āĻ˛āĻāĻž āĻ¯āĻžā§-
p{font: larger italic small-caps Arial }
āĻŋāĻ¤āĻŋāĻ āĻŽāĻžāĻ¨ā§āĻ āĻ¸ āĻŋāĻĻā§ā§ āĻāĻ˛āĻžāĻĻāĻž āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
p{font:15px arial,sans-serif;}
</style>
</head>
<body>
<p >This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This
is a paragraph.</p>
</body>
</html>
36. 36
ā§¨.āĻĢ āĻĢ āĻžā§āĻŽāĻŋāĻ˛ āĻĒāĻžāĻŋāĻāĻ
āĻāĻžāĻ¨ āĻĢ āĻĢ āĻžā§āĻŽāĻŋāĻ˛ āĻŦāĻž āĻĢ āĻĒ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻāĻžāĻ¨ āĻ¤āĻž āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨ āĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ [āĻĢ āĻĢ āĻžā§āĻŽāĻŋāĻ˛ āĻŦāĻž
āĻĢ āĻĒ āĻāĻŦāĻ āĻā§āĻ¨āĻŋāĻ°āĻ āĻĢ āĻĢ āĻžā§āĻŽāĻŋāĻ˛ āĻ¸ ā§āĻ āĻŋāĻŦ āĻžāĻŋāĻ°āĻ¤ āĻāĻžāĻ¨ā§āĻ¤ āĻāĻŽāĻžāĻ° āĻ˛āĻāĻž āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻŦāĻāĻŋāĻ āĻĒā§ā§āĻ¨]
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
p{font-family:"Times New Roman",Times,serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p >This is a paragraph, shown in the Times New Roman font.</p>
</body>
</html>
āĻĢā§ āĻ° āĻ¨āĻžā§āĻŽāĻ° āĻŽāĻžā§āĻ āĻ¸ āĻĨāĻžāĻā§āĻ˛ āĻ¤āĻžā§āĻ āĻ
āĻŦāĻļ āĻ āĻāĻŋ āĻŋāĻ¤ āĻŋāĻā§ āĻ° āĻŽāĻžā§āĻ āĻ°āĻžāĻā§āĻ¤ āĻšā§āĻŦāĨ¤ āĻ
āĻ¨ ā§ āĻāĻ āĻŋāĻ¨ā§āĻŽ āĻ¨āĻž āĻŽāĻžāĻ¨ā§āĻ˛āĻ
āĻāĻ˛ā§āĻŦāĨ¤ āĻ¤ā§āĻŦ āĻāĻŋ āĻŋāĻ¤ āĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ āĻŽāĨ¤ Single āĻ
ā§āĻ¨āĻ ā§āĻ˛āĻž āĻĢ āĻāĻāĻ¸āĻžā§āĻĨ āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻŋāĻ¨ā§āĻŽ-
h1{font-family:âArial Blackâ,Arial}
āĻā§ ā§ āĻāĻĒāĻŋāĻ¨ āĻā§āĻ¨āĻŋāĻ°āĻ āĻĢ āĻĢ āĻžā§āĻŽāĻŋāĻ˛āĻ° āĻ¨āĻžāĻŽ āĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻ āĻ§āĻ°ā§āĻŖāĻ° āĻĢ āĻĢ ā§āĻŽāĻŋāĻ˛ āĻ¨āĻžāĻŽ āĻ°ā§ā§ā§āĻ-
1.family-name â āĻĢā§ āĻ° āĻ¨āĻžāĻŽāĨ¤ āĻ¯āĻŽāĻ¨-Arial, times new roman āĻāĻ¤ āĻžāĻŋāĻĻāĨ¤
2.generic-family â āĻā§āĻ¨āĻŋāĻ°āĻ āĻĢ āĻĢ ā§āĻŽāĻŋāĻ˛āĻ° āĻ¨āĻžāĻŽāĨ¤ āĻ¯āĻŽāĻ¨-serif, sans-serif āĻāĻ¤ āĻžāĻŋāĻĻāĨ¤ āĻā§āĻŦāĻˇāĻ¨āĻžāĻ¯āĻŧ āĻĻāĻāĻž
āĻŋāĻā§āĻ¯āĻŧā§āĻ serif fonts āĻšā§āĻ¤ sans-serif fonts āĻ¯āĻž computer monitor āĻ āĻā§āĻŦ āĻ¸āĻšā§āĻ āĻĒāĻĄāĻŧāĻž āĻ¯āĻžāĻ¯āĻŧ āĨ¤
37. 37
ā§Š.āĻĢ āĻ¸āĻžāĻāĻ āĻĒāĻžāĻŋāĻāĻ
āĻĢā§ āĻ° āĻāĻāĻžāĻ° āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§ font-size āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ āĻāĻ āĻĒāĻžāĻŋāĻāĻ° āĻāĻ¨ āĻāĻžāĻ° āĻ§āĻ°ā§āĻŖāĻ° āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯ā§āĻ¤
āĻĒāĻžā§āĻ°- āĻ
āĻžāĻŦāĻ¸ā§ā§āĻ˛āĻ, āĻā§āĻĒāĻŋ āĻ, āĻļāĻ¤āĻāĻ°āĻž āĻ āĻĻāĻ āĨ¤
āĻ
āĻžāĻŦāĻ¸ā§ā§āĻ˛āĻ āĻ¸āĻžāĻāĻāĻ
āĻāĻžāĻ¨ āĻžāĻāĻāĻžā§āĻ° āĻ āĻ āĻ¸āĻžāĻāĻ āĻĒāĻŋāĻ°āĻŦāĻ¤ā§āĻ¨āĻ° āĻ¸ā§ā§āĻ¯āĻžāĻ āĻĻā§ āĻ¨āĻžāĨ¤ āĻāĻāĻž accessibility āĻāĻ° āĻāĻ¨ āĻāĻāĻŋāĻ āĻŦā§ āĻ¸āĻŽāĻ¸ āĻžāĨ¤ āĻ¯āĻŋāĻĻ
āĻāĻāĻāĻĒā§āĻ āĻ¸āĻžāĻāĻ āĻā§āĻāĻ āĻāĻžāĻ¨āĻž āĻĨāĻžā§āĻ āĻ¤ā§āĻŦ āĻ
āĻžāĻŦāĻ¸ā§ā§āĻ˛āĻ āĻ¸āĻžāĻāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤
āĻā§āĻĒāĻŋ āĻ āĻ¸āĻžāĻāĻāĻ āĻ āĻ āĻ¸āĻžāĻāĻ āĻĒāĻŋāĻ°āĻŦāĻ¤ā§āĻ¨āĻ° āĻ¸ā§ā§āĻ¯āĻžāĻ āĻĻā§āĨ¤
āĻ¨āĻžāĻāĻ āĻāĻĒāĻŋāĻ¨ āĻ¯āĻŋāĻĻ font size specify āĻā§āĻ° āĻ¨āĻž āĻĻāĻ¨ āĻ¤ā§āĻŦ āĻŋāĻĄāĻĢ āĻĢā§ āĻ° āĻ¯ āĻ¸āĻžāĻāĻ āĻ¤āĻžāĻ āĻĻāĻāĻž āĻ¯āĻžā§āĻŦāĨ¤ āĻāĻ° āĻāĻ
āĻŋāĻĄāĻĢ āĻ¸āĻžāĻāĻ āĻšāĻ˛- 16px (16px=1em).
font size property- āĻ¯ āĻ¸āĻāĻ˛ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
āĻ
āĻžāĻŦāĻ¸ā§ā§āĻ˛āĻ āĻŽāĻžāĻ¨
xx-small āĻĢ āĻ¸āĻžāĻāĻ āĻšā§āĻŦ xx-small āĻ¸āĻžāĻāĻ
x-small āĻĢ āĻ¸āĻžāĻāĻ āĻšā§āĻŦ extra small āĻ¸āĻžāĻāĻ
small āĻĢ āĻ¸āĻžāĻāĻ āĻšā§āĻŦ small āĻ¸āĻžāĻāĻ
medium āĻĢ āĻ¸āĻžāĻāĻ āĻšā§āĻŦ medium size. āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
large āĻĢ āĻ¸āĻžāĻāĻ āĻšā§āĻŦ large size
x-large āĻĢ āĻ¸āĻžāĻāĻ āĻšā§āĻŦ extra large size
xx-large āĻĢ āĻ¸āĻžāĻāĻ āĻšā§āĻŦ xx-large size
āĻā§āĻĒāĻŋ āĻ āĻŽāĻžāĻ¨āĻ āĻā§āĻāĻ° āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻ¸āĻžā§āĻĒā§ āĻŦāĻ¤āĻŽāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻāĻāĻžāĻ° āĻāĻžāĻ āĻŦāĻž āĻŦā§ āĻšā§ā§ āĻĨāĻžā§āĻāĨ¤
smaller parent āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻā§ā§ āĻāĻžāĻ āĻāĻāĻžā§āĻ°āĻ° āĻĢ āĻĒā§āĻ¤ āĻāĻ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
larger parent āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻā§ā§ āĻŦā§ āĻāĻāĻžā§āĻ°āĻ° āĻĢ āĻĒā§āĻ¤ āĻāĻ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
āĻĻāĻ āĻŽāĻžāĻ¨
length āĻŋāĻ¨āĻŋ āĻ¸āĻžāĻā§āĻāĻ° āĻĢ āĻĒā§āĻ¤ px, cm, etc āĻāĻāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤
āĻļāĻ¤āĻāĻ°āĻž āĻŽāĻžāĻ¨
% parent āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ¸āĻžā§āĻĒā§ āĻĢ āĻ¸āĻžāĻāĻ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
38. 38
<head>
<style type="text/css">
h1 {font-size:250%;}
h2 {font-size:20px;}
p {font-size:4em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
ā§Ē.āĻĢ āĻžāĻāĻ˛ āĻĒāĻžāĻŋāĻāĻ
āĻĢ ā§āĻĢāĻ¸ āĻ
āĻĨāĻžā§ āĻĢ āĻŋāĻ āĻāĻŽāĻ¨ āĻĻāĻāĻž āĻ¯āĻžā§āĻŦ āĻ¤āĻžāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ font-style āĻĒāĻžāĻŋāĻāĨ¤ āĻāĻ° āĻŋāĻ¤āĻ¨āĻŋāĻ āĻ āĻžāĻ˛ā§ āĻšā§āĻ¤
āĻā§āĻ-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
normal āĻžāĻāĻžāĻŋāĻŦāĻ āĻĢ ā§āĻĢāĻ¸ āĻĻāĻāĻžā§āĻŦāĨ¤ āĻāĻāĻž default
italic āĻāĻāĻžāĻŋāĻ˛āĻ āĻĻāĻāĻžā§āĻŦāĨ¤
39. 39
oblique āĻĢ ā§āĻĢāĻ¸ Oblique āĻāĻžāĻ¸ā§āĻ¨ āĻĻāĻāĻžā§āĻŦāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
40. 40
ā§Ģ.āĻĢ āĻ āĻžāĻŋāĻ°ā§ā§ āĻĒāĻžāĻŋāĻāĻ
font-variant property āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ° āĻāĻĒāĻ¨āĻžāĻ° āĻĢ small-caps-āĻ āĻĻāĻāĻžā§āĻŦ āĻŋāĻ āĻĻāĻāĻžā§āĻŦ āĻ¨āĻžāĨ¤ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸
āĻĢ Variant āĻāĻ° āĻ¸āĻžāĻšāĻžā§āĻ¯ āĻāĻĒāĻŋāĻ¨ āĻĢ āĻ small caps āĻ āĻĒāĻŋāĻ°āĻŦāĻŋāĻ¤āĻ¤ āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤ small-caps āĻŦāĻ˛ā§āĻ¤
āĻŦā§āĻāĻžā§ āĻŦā§ āĻšāĻžā§āĻ¤āĻ° āĻ
āĻ° ā§āĻ˛āĻžāĻ° āĻ¸āĻžāĻāĻ āĻšā§āĻŦ āĻāĻžāĻ āĻšāĻžā§āĻ¤āĻ° āĻ
ā§āĻ°āĻ° āĻ¸āĻžāĻā§āĻāĻ° āĻ¸āĻŽāĻžāĻ¨āĨ¤ āĻāĻ° āĻŋāĻ āĻāĻ˛ā§ āĻšā§āĻ¤ āĻĒāĻžā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
normal āĻžāĻāĻāĻžāĻ° āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻĢ āĻāĻžāĻļ āĻāĻ°ā§āĻŦāĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĻŽāĻžāĻ¨āĨ¤
small-caps āĻāĻāĻž āĻŦ āĻŦāĻšāĻžā§āĻ° āĻŦā§ āĻšāĻžā§āĻ¤āĻ° āĻ
āĻ° ā§āĻ˛āĻžāĻ° āĻ¸āĻžāĻāĻ āĻšā§āĻŦ āĻāĻžāĻ āĻšāĻžā§āĻ¤āĻ° āĻ
ā§āĻ°āĻ° āĻ¸āĻžāĻā§āĻāĻ° āĻ¸āĻŽāĻžāĻ¨āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
41. 41
āĻ
ā§āĻ¨āĻ āĻĢā§ āĻ° ā§ small-caps āĻ āĻžāĻŋāĻ°ā§āĻž āĻĨāĻžā§āĻ āĻ¨āĻž āĨ¤ āĻ¯āĻŋāĻĻ āĻāĻžāĻ¨ āĻĢā§ āĻ° āĻ˛āĻ āĻžāĻĒ āĻāĻžāĻ¸āĻ¨ āĻĒāĻžāĻā§āĻž āĻ¨āĻž āĻ¯āĻžā§ āĻ¤ā§āĻŦ āĻ¤āĻž
āĻŦā§ āĻšāĻžā§āĻ¤āĻ° āĻ
āĻ° āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĨ¤
ā§Ŧ.āĻĢ āĻā§ā§āĻ āĻĒāĻžāĻŋāĻāĻ
āĻāĻāĻŋāĻ āĻĢ āĻā§ āĻĒāĻŋāĻ°āĻŽāĻžāĻŖ āĻŽāĻžāĻāĻž āĻĻāĻāĻž āĻ¯āĻžā§āĻŦ āĻ¤āĻž āĻŦāĻžāĻāĻžā§āĻ¨āĻžāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ font-weight āĻĒāĻžāĻŋāĻāĨ¤ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤
āĻŋāĻŦāĻŋāĻ āĻĢā§ āĻ° bold, dark, heavy āĻāĻ¤ āĻžāĻŋāĻĻ āĻāĻžāĻ¸āĻ¨ āĻĨāĻžā§āĻāĨ¤ āĻ¤āĻžāĻ āĻāĻ¸āĻŦ āĻļ āĻŋāĻĻā§ā§ font-weight āĻāĻžāĻļ āĻ¨āĻž āĻā§āĻ°
āĻŋāĻ¸āĻāĻ¸āĻā§āĻ¸ font-weight āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°āĻž āĻšā§ āĻ¸āĻāĻ āĻž āĻŋāĻĻā§ā§āĨ¤ āĻ¯āĻŽāĻ¨- ā§Ēā§Ļā§Ļ āĻ
āĻĨ āĻšāĻ˛ āĻ¨āĻ°āĻŽāĻžāĻ˛ āĻĢ , ā§ā§Ļā§ĻāĻŋāĻšāĻ˛
āĻŦāĻž āĨ¤ āĻāĻ¸āĻŦ āĻ¸āĻāĻ āĻž āĻāĻžā§āĻžāĻ āĻā§ā§āĻāĻŋāĻ āĻā§āĻā§āĻžāĻĄāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻŽāĻžāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤āĻ ā§āĻ˛āĻž āĻšāĻ˛-lighter,
bolder, normal āĻāĻŦāĻ boldāĨ¤ lighter āĻ bolder āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĻ˛ āĻžāĻāĻāĻžāĻ° normal āĻ āĻŦāĻž āĻāĻžāĻ¸ā§āĻ¨āĻ°
āĻāĻžāĻāĻžāĻāĻžāĻŋāĻ āĻĢ āĻāĻžāĻ¸āĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻŦāĨ¤ āĻ¯āĻŽāĻ¨-
font-weight property- āĻ¯ āĻ¸āĻāĻ˛ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
normal āĻ¨āĻ°āĻŽāĻžāĻ˛ characters āĻŋāĻĄāĻĢāĻžāĻāĻ¨ āĻā§āĻ°āĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
bold āĻŦāĻž characters āĻŋāĻĄāĻĢāĻžāĻāĻ¨ āĻā§āĻ°āĨ¤
bolder Defines thicker characters
lighter Defines lighter characters
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
43. 43
āĻ
āĻ§ āĻžā§-āĻĒāĻāĻžāĻ
[āĻŋāĻ˛ āĻĒāĻžāĻŋāĻ]
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻ˛ āĻĒāĻžāĻŋāĻ unordered, ordered āĻāĻŽāĻ¨āĻŋāĻ āĻā§āĻŽāĻā§āĻāĻ List Marker āĻŋāĻšā§āĻ¸ā§āĻŦ āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ°
āĻ¸ā§ā§āĻ¯āĻžāĻ āĻĻā§āĨ¤ āĨ¤āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻŋāĻĻā§āĻ¯āĻŧ āĻŋāĻ˛ āĻ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻšā§āĻ¤ āĻ
ā§āĻ¨āĻ āĻŦāĻŋāĻļ āĻāĻž āĻŽāĻžāĻāĻ āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤ āĻ āĻ
āĻ§ āĻžā§ā§ āĻāĻŽāĻ°āĻž āĻŋāĻ˛
āĻŋāĻ¨ā§ā§ āĻ¯āĻžāĻŦāĻ¤ā§ā§ āĻŋāĻāĻā§ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°ā§āĻŦāĻžāĨ¤
āĻŋāĻ˛ā§ āĻ° āĻāĻ¨ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻĒāĻžāĻŋāĻāĻ
āĻĒāĻžāĻŋāĻ āĻŦāĻŖāĻ¨āĻž
1.list-style
list-style property āĻāĻāĻŋāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļā§āĻ¨āĻ āĻ¸āĻāĻ˛ list properties āĻ āĻ¤ā§ā§āĻ˛
āĻ§ā§āĻ°
2.list-style-image list-style-image property āĻŋāĻ˛ āĻāĻā§āĻāĻŽā§āĻ āĻā§āĻŽāĻ āĻžāĻ°āĻž āĻŋāĻ°ā§ āĻ¸ āĻā§āĻ°āĨ¤
3.list-style-
position
list-style-position property āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ° āĻŋāĻ˛ā§ āĻ° āĻāĻā§āĻāĻŽ ā§āĻ˛āĻž āĻžāĻāĻžāĻŋāĻŦāĻ āĻ
āĻŦ āĻž
āĻĨā§āĻ inside āĻ¨āĻž Outside-āĻ āĻĨāĻžāĻā§āĻŦāĨ¤
4.list-style-type
default number-āĻāĻ° ordered āĻŦāĻž unordered āĻŋāĻ˛
āĻāĻ° bullets/discs āĻšā§āĻ¤ āĻŋāĻ āĻžāĻāĻ˛ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤
āĻŋāĻ¨ā§ āĻ¸āĻāĻ˛ āĻĒāĻžāĻŋāĻ āĻŋāĻ¨ā§ā§ āĻŋāĻŦ āĻžāĻŋāĻ°āĻ¤ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°āĻž āĻšāĻ˛āĻ
ā§§.āĻŋāĻ˛ āĻžāĻāĻ˛ āĻĒāĻžāĻŋāĻāĻ
list-style property āĻāĻāĻŋāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļā§āĻ¨āĻ āĻ¸āĻāĻ˛ list properties āĻ āĻ¤ā§ā§āĻ˛ āĻ§ā§āĻ°āĨ¤ āĻāĻ° āĻāĻ list-
style-type āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻŽāĻ¨ āĻāĻāĻāĻž āĻŦ āĻŦ āĻž āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧ āĻ¯āĻāĻ¨ āĻāĻĒāĻ¨āĻžāĻ° list-style image āĻ˛āĻžāĻĄ āĻŋāĻ¨ā§āĻŦ āĻ¨āĻž āĻ¤āĻāĻ¨
āĻ
āĻ¨ list-style āĻĻāĻāĻžā§āĻŦāĨ¤ list-style shorthand property āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻŽ āĻšāĻ˛-
list-style-type> list-style-position >list-style-image
āĻ¯āĻŋāĻĻ āĻāĻžāĻ¨ āĻĒāĻžāĻŋāĻāĻ° āĻāĻ˛ā§ āĻŦāĻžāĻĻ āĻ¯āĻžā§ āĻ¤ā§āĻŦ āĻāĻžāĻ¨ āĻ¸āĻŽāĻ¸ āĻž āĻšā§āĻŦ āĻ¨āĻžāĨ¤ āĻā§ ā§ āĻ āĻĒāĻžāĻŋāĻāĻ° āĻŋāĻĄāĻĢ āĻāĻ˛ā§ āĻ§ā§āĻ° āĻ¨āĻā§āĻž āĻšā§āĻŦāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
45. 45
āĻā§āĻŽāĻā§āĻ list item marker āĻŋāĻšā§āĻ¸ā§āĻŦ āĻĻāĻāĻžā§āĻ¤ list-style-image property āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤ list-
style-image property āĻŋāĻ˛ āĻāĻā§āĻāĻŽā§āĻ āĻā§āĻŽāĻ āĻžāĻ°āĻž āĻŋāĻ°ā§ āĻ¸ āĻā§āĻ°āĨ¤ . āĻāĻžāĻ¨ āĻāĻžāĻ°ā§āĻŖ āĻā§āĻŽāĻ āĻ˛āĻžāĻĄ āĻ¨āĻž āĻšā§āĻ˛ āĻāĻ
āĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ image āĻ bullet points āĻŋāĻšāĻ¸āĻžā§āĻŦ unordered āĻŋāĻ˛ āĻāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ°
āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤normal bullet āĻāĻ° āĻĒāĻŋāĻ°āĻŦā§āĻ¤ image āĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤āĻ¸āĻŦā§āĻā§āĻ¯āĻŧ āĻāĻžāĻ˛ āĻšāĻ¯āĻŧ Unordered
āĻŋāĻ˛ āĻāĻ° ā§ image āĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻžāĨ¤ āĻŋāĻ¨ā§āĻāĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
ul {list-style-image:url('sqpurple.gif');}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
46. 46
āĻ¯āĻŋāĻĻ āĻā§āĻŽāĻ āĻ˛āĻžāĻĄ āĻ¨āĻž āĻšā§ āĻ¤ā§āĻŦ āĻŋāĻ¨ā§āĻāĻ° āĻŽāĻ¤ āĻāĻāĻāĻĒā§āĻ āĻĻāĻāĻžā§āĻŦāĨ¤
ā§Š.āĻŋāĻ˛ āĻžāĻāĻ˛ āĻĒāĻŋāĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻāĻ
list-style-position property āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ° āĻŋāĻ˛ā§ āĻ° āĻāĻā§āĻāĻŽ ā§āĻ˛āĻž āĻžāĻāĻžāĻŋāĻŦāĻ āĻ
āĻŦ āĻž āĻĨā§āĻ inside āĻ¨āĻž
Outside-āĻ āĻĨāĻžāĻā§āĻŦāĨ¤ list-style-position āĻāĻ° āĻāĻ˛ā§ inside āĻŋāĻĻā§āĻ˛ āĻ¤āĻāĻ¨ āĻŋāĻ˛ ā§āĻ˛āĻž āĻŽāĻžāĻŋāĻāĻ¨ āĻšā§āĻ¤ āĻŋāĻāĻ¤ā§āĻ°āĻ°
āĻŋāĻĻā§āĻ āĻĨāĻžāĻā§āĻŦ āĻāĻ° Outside āĻŋāĻĻā§āĻ˛ normal āĻŋāĻ˛ Position āĻ āĻĨāĻžāĻā§āĻŦāĨ¤ Outside āĻāĻ˛ā§āĻŋāĻ āĻāĻāĻŋāĻ default
āĻ āĻžāĻ˛ā§āĨ¤
ul { list-style-position: inside; }
ol { list-style-position: outside; }
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
ul.a {list-style-position:inside;}
ul.b {list-style-position:outside;}
</style>
</head>
<body>
<p>The following list has list-style-position: inside:</p>
<ul class="a">
47. 47
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
<p>The following list has list-style-position: outside:</p>
<ul class="b">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
<li>Honeybush Tea - A super fruity delight tea</li>
</ul>
<p>"list-style-position: outside" is the default setting.</p>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
48. 48
ā§Ē.āĻŋāĻ˛ āĻžāĻāĻ˛ āĻāĻžāĻāĻĒ āĻĒāĻžāĻŋāĻāĻ
āĻāĻĒāĻŋāĻ¨ āĻ¯āĻŋāĻĻ default number āĻāĻ° ordered āĻŋāĻ˛ āĻŦāĻž unordered āĻŋāĻ˛ āĻāĻ° bullets/discs āĻšā§āĻ¤
āĻŋāĻ āĻžāĻāĻ˛ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻāĻžāĻ¨ āĻ¤āĻžāĻšā§āĻ˛ āĻāĻĒāĻŋāĻ¨ āĻŋāĻ˛ āĻāĻ° āĻāĻ¨ āĻŋāĻŦāĻŋāĻ āĻ§āĻ°ā§āĻ¨āĻ° āĻžāĻāĻ˛ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤ āĻāĻ
āĻāĻžāĻāĻŋāĻ āĻāĻ°āĻž āĻšā§ āĻŋāĻ¨ā§āĻ list-style-type property-āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ āĻ¯āĻŽāĻ¨āĻ
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
50. 50
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
list-style-type property āĻ¯ āĻ¸āĻāĻ˛ āĻāĻ˛ā§ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ° āĻ¤āĻžā§āĻĻāĻ° āĻ¨āĻžāĻŽ āĻ āĻŦāĻŖāĻ¨āĻž āĻŋāĻ¨ā§ āĻĻāĻā§āĻž āĻšāĻ˛āĻ
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
armenian Armenian numbering āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
circle Circle āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
cjk-ideographic plain ideographic numbers āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
decimal āĻžāĻāĻžāĻŋāĻŦāĻ āĻ¨āĻž āĻžāĻ° āĻāĻžāĻļ āĻā§āĻ°āĨ¤ āĻāĻāĻž <ol> āĻāĻ° āĻāĻ¨ āĻŋāĻĄāĻĢ āĨ¤
decimal-leading-zero āĻ¨āĻž āĻžā§āĻ°āĻ° ā§āĻ¤ ā§Ļ āĻĨāĻžāĻā§āĻŦ (01, 02, 03, āĻāĻ¤ āĻžāĻŋāĻĻ.)
disc āĻāĻ°āĻžāĻ āĻŦā§ āĻāĻžāĻļ āĻā§āĻ°āĨ¤āĻāĻāĻž <ul> āĻāĻ° āĻāĻ¨ āĻŋāĻĄāĻĢ āĨ¤
georgian Georgian numbering āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
hebrew Hebrew numbering āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
hiragana Hiragana numbering āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
hiragana-iroha Hiragana iroha numbering āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
katakana Katakana numbering āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
katakana-iroha Katakana iroha numbering āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
51. 51
lower-alpha āĻāĻžāĻ āĻšāĻžā§āĻ¤āĻ° āĻ
āĻ° āĻāĻžāĻļ āĻā§āĻ° (a, b, c, d, e āĻāĻ¤ āĻžāĻŋāĻĻ)
lower-greek āĻāĻžāĻ āĻšāĻžā§āĻ¤āĻ° ā§āĻ āĻ
āĻ° āĻāĻžāĻļ āĻā§āĻ°
lower-latin āĻāĻžāĻ āĻšāĻžā§āĻ¤āĻ° āĻ˛ āĻžāĻŋāĻāĻ¨ āĻ
āĻ° āĻāĻžāĻļ āĻā§āĻ° (a, b, c, d, e, āĻāĻ¤ āĻžāĻŋāĻĻ)
lower-roman āĻāĻžāĻ āĻšāĻžā§āĻ¤āĻ° āĻ°āĻžāĻŽāĻžāĻ¨ āĻ
āĻ° āĻāĻžāĻļ āĻā§āĻ° (i, ii, iii, iv, v, āĻāĻ¤ āĻžāĻŋāĻĻ)
none āĻāĻžāĻ¨ āĻŋāĻ āĻĻāĻāĻžā§āĻŦ āĻ¨āĻžāĨ¤
square Square āĻŋāĻ āĻāĻžāĻļ āĻā§āĻ°āĨ¤
upper-alpha āĻŦā§ āĻšāĻžā§āĻ¤āĻ° āĻ
āĻ° āĻāĻžāĻļ āĻā§āĻ° (A, B, C, D, E, āĻāĻ¤ āĻžāĻŋāĻĻ )
upper-latin āĻŦā§ āĻšāĻžā§āĻ¤āĻ° āĻ˛ āĻžāĻŋāĻāĻ¨ āĻ
āĻ° āĻāĻžāĻļ āĻā§āĻ° (A, B, C, D, E, āĻāĻ¤ āĻžāĻŋāĻĻ)
upper-roman āĻŦā§ āĻšāĻžā§āĻ¤āĻ° āĻ°āĻžāĻŽāĻžāĻ¨ āĻ
āĻ° āĻāĻžāĻļ āĻā§āĻ° (I, II, III, IV, V, āĻāĻ¤ āĻžāĻŋāĻĻ)
āĻ
āĻ§ āĻžā§-āĻā§
[āĻŋāĻ˛āĻāĻ āĻĒāĻžāĻŋāĻ]
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻ¨āĻāĻ° āĻ āĻžāĻ āĻŦāĻž āĻŋāĻ˛āĻā§āĻ āĻāĻŽāĻ°āĻž āĻā§āĻĢ āĻ¯āĻžāĻ āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻŋāĻ°āĨ¤ āĻŋāĻ˛āĻā§āĻ āĻŋāĻŦāĻŋāĻ CSS property
(color, font-family, background, etc.) āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻŋāĻŦāĻŋāĻ āĻžāĻāĻ˛ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤ āĻŋāĻ āĻŋāĻ˛ā§ āĻ°
āĻļāĻžāĻ˛ āĻžāĻāĻ˛ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§ āĻŋāĻ˛ā§ āĻ° āĻ
āĻŦ āĻžāĻ° āĻāĻĒāĻ° āĻŋāĻāĻŋ āĻā§āĻ°āĨ¤
āĻŋāĻ˛ā§ āĻ° āĻāĻžāĻ°āĻŋāĻ āĻ
āĻŦ āĻž āĻšāĻ˛-
īˇ a:linkī¨āĻāĻāĻŋāĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻŋāĻ˛āĻāĻ āĻ¯āĻž āĻŋāĻāĻŋāĻāĻ āĻāĻ°āĻž āĻšā§ āĻŋāĻ¨āĨ¤
īˇ a:visitedī¨āĻāĻāĻāĻž āĻŋāĻ˛āĻāĻ āĻ¯āĻž āĻĒā§ā§āĻ° āĻŋāĻāĻŋāĻāĻ āĻāĻ°āĻž āĻšā§āĻ¯āĻŧā§āĻ
īˇ a:hoverī¨āĻāĻŋāĻ āĻāĻāĻŋāĻ āĻŋāĻ˛āĻāĻ āĻ¯āĻžāĻ° āĻāĻĒāĻ° āĻŽāĻžāĻāĻ¸ āĻ°āĻžāĻāĻžāĻ° āĻ¸āĻžā§āĻĨ āĻ¸āĻžā§āĻĨ āĻŋāĻāĻā§ā§āĻžāĻ˛ āĻā§āĻĢ āĻĻāĻāĻžā§āĻŦāĨ¤
īˇ a:activeī¨āĻāĻŋāĻ āĻāĻāĻŋāĻ āĻŋāĻ˛āĻāĻ āĻ¯āĻāĻž āĻŦāĻ¤āĻŽāĻžā§āĻ¨ āĻ¸āĻŋ ā§ āĻā§āĻāĨ¤ āĻ
āĻ¨ āĻāĻžā§āĻŦ āĻŦāĻ˛āĻž āĻ¯āĻžā§ āĻāĻāĻāĻžāĻ° āĻ¯āĻāĻ¨ āĻŋāĻ˛āĻā§āĻ āĻŋ āĻ
āĻā§āĻ° āĻ°āĻ¸āĻĒā§ āĻ° āĻāĻ¨ āĻ
ā§āĻĒ āĻž āĻā§āĻ° āĻ¸ āĻ¸āĻŽā§ā§āĻ° āĻā§āĻĢ āĨ¤
āĻ¨āĻžāĻāĻ āĻŋāĻ˛ā§ āĻ° āĻāĻ¨ āĻŋāĻŦāĻŋāĻ āĻžāĻāĻ˛ āĻŋāĻĻā§āĻ¤ āĻāĻžāĻā§āĻ˛ āĻŋāĻ¨ā§āĻāĻ° āĻŋāĻ¨ā§āĻŽ ā§āĻ˛āĻž āĻŽā§āĻ¨ āĻāĻ˛ā§āĻ¤ āĻšā§āĻŦ-
īˇ a:hover- āĻ a:link āĻāĻŦāĻ a:visited āĻāĻ° āĻĒā§āĻ° āĻžāĻĒāĻ¨ āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
īˇ a:active â āĻ a:hover-āĻāĻ° āĻĒā§āĻ° āĻžāĻĒāĻ¨ āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
52. 52
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
to be effective.</p>
</body>
</html>
āĻāĻĒā§āĻ°āĻ° āĻāĻžāĻĄ ā§āĻ˛āĻž index.html āĻ¨āĻžā§āĻŽ āĻ¸āĻ āĻā§āĻ° āĻāĻāĻāĻĒā§āĻ āĻĻāĻā§āĻ¨āĨ¤
āĻŋāĻŦāĻŋāĻ āĻžāĻā§āĻ˛āĻ° āĻŋāĻ˛ā§ āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
53. 53
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
54. 54
<p><b><a class="one" href="default.asp" target="_blank">This link changes
color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes
font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes
background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes
font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes
text-decoration</a></b></p>
</body>
</html>
āĻāĻĒā§āĻ°āĻ° āĻāĻžāĻĄ ā§āĻ˛āĻž index.html āĻ¨āĻžā§āĻŽ āĻ¸āĻ āĻā§āĻ° āĻāĻāĻāĻĒā§āĻ āĻĻāĻā§āĻ¨āĨ¤
āĻ
āĻ§ āĻžā§-āĻ¸āĻžāĻ¤
[āĻŦ āĻžāĻ āĻ āĻĒāĻžāĻŋāĻ]
āĻāĻĒāĻ¨āĻžāĻ° āĻ¸āĻžāĻā§āĻāĻ° āĻŦ āĻžāĻ āĻ āĻ
ā§āĻ¨āĻ āĻŦāĻŋāĻļ āĻĒā§āĻŖāĨ¤ HTML-āĻ āĻ§ā§ bgcolor āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻĒā§ā§āĻ°āĻž
Background âāĻāĻ° āĻ°āĻ āĻŦāĻĻāĻ˛āĻžā§āĻ¨āĻž āĻ¯āĻžā§āĨ¤ āĻŋāĻ āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻĒāĻŋāĻ¨ āĻ¯ā§āĻāĻžāĻ¨ HTML āĻāĻŋāĻ˛ā§āĻŽā§ āĻ°
(Heading, Paragraph, Link, Table, Span etc. āĻāĻ° background color or image āĻ¸āĻ
āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤ āĻ¤āĻžāĻāĻžāĻĄāĻŧāĻž background image āĻŋāĻāĻāĻžā§āĻŦ āĻĻāĻŋāĻļāĻ¤ āĻšā§āĻŦ āĻ¸ āĻŋāĻŦāĻˇāĻ¯āĻŧāĻŋāĻ āĻāĻĒāĻŋāĻ¨ āĻŋāĻ¨āĻ¯āĻŧ āĻ¨ āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻ°ā§āĻŦāĻ¨āĨ¤
āĻāĻĒāĻŋāĻ¨ āĻĒāĻ āĻŽāĻ¤ āĻāĻŋāĻā§āĻ horizontally, vertically repeat āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤āĻ¤āĻžāĻāĻžāĻĄāĻŧāĻž
āĻāĻĒāĻŋāĻ¨ background āĻ fixed position āĻ āĻ°āĻžāĻā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨ āĻŦāĻž scroll āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤ āĻāĻŽāĻ°āĻž āĻ āĻ
āĻ§ āĻžā§ā§
āĻŦ āĻžāĻ āĻ āĻŋāĻ¨ā§ā§ āĻŋāĻŦ āĻžāĻŋāĻ°āĻ¤ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°ā§āĻŦāĻžāĨ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ āĻŦ āĻžāĻ āĻ āĻĒāĻžāĻŋāĻ
āĻĒāĻžāĻŋāĻ āĻŦāĻŖāĻ¨āĻž
1.background
āĻ¸āĻāĻ˛ background properties- āĻ āĻāĻāĻŋāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļā§āĻ¨āĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ¤ā§ā§āĻ˛
āĻ§āĻ°āĻž āĻ¯āĻžā§āĨ¤
55. 55
2.background-
attachment
āĻāĻ āĻĒāĻžāĻŋāĻ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ° āĻĒāĻ āĻŋāĻ˛āĻ-āĻāĻ° āĻ¸āĻžā§āĻĨ āĻ¸āĻžā§āĻĨ background āĻā§āĻŽāĻāĻŋāĻ
fixed āĻĨāĻžāĻā§āĻŦ āĻ¨āĻž āĻĒā§āĻāĻ° āĻ¸āĻžā§āĻĨ āĻ¸āĻžā§āĻĨ āĻ˛ āĻāĻ°ā§āĻŦāĨ¤
3.background-color
background-color property āĻāĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° background
color āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ°āĨ¤
4.background-image
background-image property āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻāĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ°
āĻŦ āĻ āĻā§ āĻā§āĻŽāĻ āĻ¸āĻ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤
5.background-position
āĻā§āĻŽāĻā§āĻ āĻŋāĻ āĻ āĻāĻžāĻ¨ āĻžā§āĻ¨ āĻžāĻĒāĻ¨ āĻāĻ°ā§āĻŦāĻ¨ āĻ¤āĻž āĻŦā§āĻ˛ āĻĻāĻā§āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°
background-position Property āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĨ¤
6.background-repeat
āĻāĻžāĻ¨ āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ repeat āĻšā§āĻŦ āĻŋāĻ āĻ¨āĻž, āĻšā§āĻ˛ āĻāĻžāĻ¨ āĻŋāĻĻā§āĻ āĻŋāĻ āĻĒāĻŋāĻ°āĻŽāĻžāĻŖ āĻšā§āĻŦ āĻ¤āĻž
āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§ CSS-āĻāĻ° background-repeat āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤
ā§§.āĻŦ āĻžāĻ āĻžāĻ āĻĒāĻžāĻŋāĻāĻ
āĻŦ āĻžāĻ āĻžāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ¸āĻāĻ˛ background properties- āĻ āĻāĻāĻŋāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļā§āĻ¨āĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ¤ā§ā§āĻ˛ āĻ§āĻ°āĻž āĻ¯āĻžā§āĨ¤
background āĻĒāĻžāĻŋāĻāĻ° āĻ
āĻĄāĻžāĻ° āĻšāĻ˛- background-color>background-image>background-
repeat>background-attachment>background-position. āĻā§āĻĻāĻ° āĻāĻžāĻ¨āĻāĻžāĻ° āĻāĻ˛ā§ āĻŦāĻžāĻĻ āĻĒā§ā§āĻ˛
āĻ¸āĻŽāĻ¸ āĻž āĻ¨āĻāĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<head>
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
56. 56
ā§¨.āĻŦ āĻžāĻ āĻžāĻ āĻāĻāĻžāĻā§āĻŽ āĻĒāĻžāĻŋāĻāĻ
background-attachment property āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ° āĻĒāĻ āĻŋāĻ˛āĻ-āĻāĻ° āĻ¸āĻžā§āĻĨ āĻ¸āĻžā§āĻĨ background
āĻā§āĻŽāĻāĻŋāĻ fixed āĻĨāĻžāĻā§āĻŦ āĻ¨āĻž āĻĒā§āĻāĻ° āĻ¸āĻžā§āĻĨ āĻ¸āĻžā§āĻĨ āĻ˛ āĻāĻ°ā§āĻŦāĨ¤ āĻāĻĒāĻŋāĻ¨ āĻžāĻāĻāĻžāĻ° āĻāĻā§ āĻžāĻ° āĻ˛āĻŦāĻžāĻ° āĻ˛ āĻ āĻ¨āĨ¤
āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻāĻ āĻĒāĻ āĻŋāĻ˛ā§ āĻ° āĻ¸āĻžā§āĻĨ āĻ¸āĻžā§āĻĨ āĻ˛ āĻšā§ āĨ¤ āĻāĻāĻ¨ āĻāĻĒāĻŋāĻ¨ āĻāĻžā§ āĻ¨ āĻĒāĻ āĻ˛ āĻāĻ°ā§āĻŦāĻ¨ āĻŋāĻ āĻŦ āĻžāĻ āĻžāĻ
āĻā§āĻŽāĻ āĻ¯āĻ¨ āĻŋ āĻ° āĻĨāĻžā§āĻāĨ¤ āĻāĻŋāĻ āĻāĻ°āĻž āĻ¸ āĻŦ background-attachment āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ āĻĒā§āĻāĻ° āĻ ā§āĻāĻ°
āĻ¸āĻžā§āĻĒā§ āĻŋ āĻ° āĻ āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻā§āĻ āĻŦāĻ˛āĻž āĻšā§ WatermarkāĨ¤ āĻā§āĻŽāĻā§āĻ Watermark āĻāĻ°āĻžāĻ° āĻāĻ¨ āĻŋāĻ¨ā§āĻāĻ° āĻŽāĻ¤
āĻāĻžāĻĄ āĻŋāĻ˛āĻā§āĻ¨-
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
body
{
background-image:url('22.png');
background-repeat:repeat;
background-attachment:fixed;
}
div{height:1200px; width:960px; background:#112200; margin:0 auto;}
</style>
</head>
<body>
<div>
<p>This is a division</p>
</div>
57. 57
</body>
</html>
āĻāĻĒā§āĻ°āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻŋāĻ āĻāĻžāĻ˛āĻāĻžā§āĻŦ āĻžāĻāĻŋāĻāĻ āĻā§āĻ° āĻĻāĻā§āĻ¨āĨ¤
background-attachment property āĻŋāĻ¨ā§āĻāĻ° āĻŋāĻ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
scroll āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻāĻ āĻĒāĻ āĻŋāĻ˛ā§ āĻ° āĻ¸āĻžā§āĻĨ āĻ¸āĻžā§āĻĨ āĻ˛ āĻšā§āĻŦāĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤ .
fixed āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ āĻŋāĻĢ āĻĄ āĻĨāĻžāĻā§āĻŦāĨ¤
ā§Š.āĻŦ āĻžāĻ āĻžāĻ āĻāĻžāĻ˛āĻžāĻ° āĻĒāĻžāĻŋāĻāĻ
background-color property āĻāĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° background color āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻā§āĻ°āĨ¤ āĻāĻžāĻ¨
āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻŦ āĻžāĻ āĻžāĻ āĻšāĻ˛ āĻ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻŽāĻžāĻ āĻ¸āĻžāĻā§āĻāĻ° āĻ¸āĻŽāĻžāĻ¨, āĻ¯āĻžā§āĻ¤ padding āĻāĻŦāĻ border āĻ
āĻā§ āĻĨāĻžāĻā§āĻŦ
āĻŋāĻ margin āĻĨāĻžāĻā§āĻŦ āĻ¨āĻžāĨ¤ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ background color āĻāĻŦāĻ text color āĻāĻāĻ¸āĻžā§āĻĨ
background-color āĻĒāĻžāĻŋāĻāĻ° āĻ¸āĻžā§āĻĨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯āĻžā§ āĻ¯āĻžā§āĻ¤ āĻ āĻ āĻāĻžāĻ˛ āĻĒā§āĻž āĻ¯āĻžā§āĨ¤
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
ā§Ē.āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ āĻĒāĻžāĻŋāĻāĻ
background-image property āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻāĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻŦ āĻ āĻā§ āĻā§āĻŽāĻ āĻ¸āĻ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤
58. 58
Body { background-image: url(largePic.jpg); }
p { background-image: url(smallPic.jpg); background-color:#00ff00 }
āĻāĻ° āĻĢā§āĻ˛ background āĻ āĻāĻ āĻāĻŋāĻŦ āĻāĻŦāĻ Paragraph āĻ āĻā§āĻ°āĻ āĻāĻŋāĻŦ āĻĻāĻāĻž āĻ¯āĻžā§āĻŦāĨ¤
url('URL') āĻā§āĻŽā§āĻāĻ° 'URL'āĨ¤
none āĻāĻžāĻ¨ āĻŦ āĻžāĻ āĻ āĻā§āĻŽāĻ āĻĨāĻžāĻā§āĻŦ āĻ¨āĻžāĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
ā§Ģ.āĻŦ āĻžāĻ āĻžāĻ āĻĒāĻŋāĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻāĻ
āĻāĻžāĻ¨ āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻā§āĻ āĻŋāĻ āĻ āĻāĻžāĻ¨ āĻžā§āĻ¨ āĻžāĻĒāĻ¨ āĻāĻ°ā§āĻŦāĻ¨ āĻ¤āĻž āĻŦā§āĻ˛ āĻĻāĻā§āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ° background-position
Property āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĨ¤ āĻāĻ° āĻŽāĻžāĻ¨ āĻŋāĻšā§āĻ¸ā§āĻŦ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°- āĻĻāĻ , āĻļāĻ¤āĻāĻ°āĻž āĻšāĻžāĻ° āĻ āĻŋāĻāĻā§āĻžāĻĄāĨ¤āĻļāĻ¤āĻāĻ°āĻž āĻšāĻžāĻ°
āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ āĻĻāĻ / āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨ā§āĻĻā§āĻļāĻ° āĻāĻ¨ āĨ¤ āĻ¯āĻŽāĻ¨- ā§Ļ%ā§Ļ% āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ˛ āĻ āĻā§āĻŽāĻ āĻžāĻāĻāĻžāĻ° āĻāĻā§ āĻžāĻ° āĻāĻāĻĻāĻŽ
āĻāĻĒā§āĻ°āĻ° āĻŦāĻžāĻŽ āĻāĻžāĻ¨āĻžā§ āĻ
āĻŦ āĻžāĻ¨ āĻāĻ°ā§āĻŦāĨ¤ āĻāĻŦāĻžāĻ° ā§Ģā§Ļ%ā§Ģā§Ļ% āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ˛ āĻ¤āĻžāĻ° āĻ
āĻŦ āĻžāĻ¨ āĻšā§āĻŦ āĻŽāĻ§ āĻŋāĻŦ ā§ā§āĻ¤āĨ¤ āĻĻā§āĻ āĻ°
āĻĒāĻŋāĻ°āĻŽāĻžāĻĒāĻ¸āĻŽā§āĻš ( āĻ¯āĻŽāĻ¨ 4em 50%) āĻšāĻ˛ Vertical āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļāĻāĨ¤ āĻā§ āĻā§āĻžāĻĄ āĻŦ āĻžāĻŦāĻšāĻžā§āĻ°āĻ° āĻŦāĻ˛āĻžā§ āĻāĻ¨ā§āĻā§āĻŋāĻŽāĻāĨ¤ āĻ˛āĻŋ āĻ
āĻŽāĻžā§āĻ¨āĻ° āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻāĻāĻžā§āĻ¨āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°, āĻ¸ā§ ā§ āĻāĻžāĻ¨ āĻ
āĻ¸ā§āĻŋāĻŦāĻ§āĻž āĻšā§āĻŦ āĻ¨āĻžāĨ¤ āĻāĻžāĻ°āĻŖ āĻā§āĻā§āĻžāĻĄ ā§āĻ˛āĻžāĻ° āĻŋāĻ¤āĻ¨āĻŋāĻ (Top, Middle,
Bottom) āĻāĻ˛ (vertical) āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļāĻ, āĻāĻ° āĻ
āĻ¨ āĻŋāĻ¤āĻ¨āĻŋāĻ (Left, Right, Center) āĻāĻ¨ā§āĻā§āĻŋāĻŽāĻ
āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļāĻāĨ¤ āĻ¯āĻŽāĻ¨-
Body{background-position: top left}
āĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļāĻ¨ā§āĻ āĻ
āĻ¨ āĻāĻžā§āĻŦāĻ āĻ˛āĻāĻž āĻ¯āĻžā§āĨ¤
Body{background-position: left top}
āĻŦāĻž, Body{background-position: ā§Ļ% ā§Ļ%}
background-position Property- āĻ¤ āĻŦ āĻŦ āĻ¤ āĻŽāĻžāĻ¨āĻ¸āĻŽā§āĻš-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
āĻŋāĻāĻā§āĻžāĻĄ
left top
left center
left bottom
right top
right center
right bottom
center top
center center
āĻ¯āĻŋāĻĻ āĻāĻĒāĻŋāĻ¨ āĻ§ā§ āĻāĻāĻŋāĻ keyword āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĻ¨ āĻ
āĻ¨ āĻāĻ˛ā§ āĻšā§āĻŦ "center"
59. 59
center bottom
āĻļāĻ¤āĻāĻ°āĻž āĻšāĻžāĻ°
x% y%
āĻĨāĻŽ āĻŽāĻžāĻ¨āĻāĻž horizontal āĻ
āĻŦ āĻžāĻ¨ āĻāĻŦāĻ āĻŋ āĻ¤ā§ā§ āĻāĻ˛ā§āĻāĻž the vertical āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļ
āĻā§āĻ°āĨ¤ āĻāĻĒāĻŋāĻ¨ āĻ¯āĻŋāĻĻ āĻāĻāĻŋāĻ āĻŽāĻžāĻ¨ āĻŋāĻ āĻ āĻā§āĻ° āĻĻāĻ¨ āĻ¤ā§āĻŦ āĻ
āĻĒāĻ° āĻŽāĻžāĻ¨āĻŋāĻ ā§Ģā§Ļ% āĻšā§āĻŦāĨ¤āĻŋāĻĄāĻĢ āĻŽāĻžāĻ¨ āĻšāĻ˛-
0% 0%āĨ¤
āĻĻāĻ
xpos ypos
āĻĨāĻŽ āĻŽāĻžāĻ¨āĻāĻž horizontal āĻ
āĻŦ āĻžāĻ¨ āĻāĻŦāĻ āĻŋ āĻ¤ā§ā§ āĻāĻ˛ā§āĻāĻž the vertical āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļ
āĻā§āĻ°āĨ¤ āĻāĻ āĻŽāĻžāĻ¨ āĻŋāĻĒā§ āĻ˛ āĻŦāĻž āĻ
āĻ¨ āĻāĻžāĻ¨ āĻāĻā§āĻ āĻšā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ āĻāĻĒāĻŋāĻ¨ āĻ¯āĻŋāĻĻ āĻāĻāĻŋāĻ āĻŽāĻžāĻ¨ āĻŋāĻ āĻ āĻā§āĻ°
āĻĻāĻ¨ āĻ¤ā§āĻŦ āĻ
āĻĒāĻ° āĻŽāĻžāĻ¨āĻŋāĻ ā§Ģā§Ļ% āĻšā§āĻŦāĨ¤ āĻāĻĒāĻŋāĻ¨ % āĻāĻŦāĻ positions āĻ āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĻ¨āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
60. 60
<p><b>Note:</b> For this to work in Firefox and Opera, the background-
attachment property must be set to "fixed".</p>
</body>
</html>
ā§Ŧ. āĻŦ āĻžāĻ āĻžāĻ āĻŋāĻ°āĻŋāĻĒāĻ āĻĒāĻžāĻŋāĻāĻ
āĻāĻžāĻ¨ āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ āĻŋāĻ°āĻŋāĻĒāĻ āĻšā§āĻŦ āĻŋāĻ āĻ¨āĻž, āĻšā§āĻ˛ āĻāĻžāĻ¨ āĻŋāĻĻā§āĻ āĻŋāĻ āĻĒāĻŋāĻ°āĻŽāĻžāĻŖ āĻšā§āĻŦ āĻ¤āĻž āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§ CSS-āĻāĻ°
background-repeat āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ background-repeat āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ¨ ā§āĻ˛āĻž āĻšā§āĻ¤ āĻĒāĻžā§āĻ°-
āĻāĻ˛ā§ āĻŦāĻŖāĻ¨āĻž
repeat āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ vertically āĻāĻŦāĻ horizontally āĻŋāĻ°āĻŋāĻĒāĻ āĻšā§āĻŦāĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
repeat-x āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ āĻ§ā§ horizontally āĻŋāĻ°āĻŋāĻĒāĻ āĻšā§āĻŦāĨ¤
repeat-y āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ āĻ§ā§ vertically āĻŋāĻ°āĻŋāĻĒāĻ āĻšā§āĻŦāĨ¤
no-repeat āĻŦ āĻžāĻ āĻžāĻ āĻā§āĻŽāĻ āĻŋāĻ°āĻŋāĻĒāĻ āĻšā§āĻŦ āĻ¨āĻžāĨ¤
61. 61
āĻ
āĻ§ āĻžā§-āĻāĻ
[āĻĒāĻŋāĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ]
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻĒāĻŋāĻāĻļāĻ¨ āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻŽāĻ°āĻž āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻāĻŋāĻ˛ā§āĻŽ āĻ¸ āĻāĻ° āĻ¸āĻŋāĻ āĻ (exact) āĻĒāĻŋāĻāĻļāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļ āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻŋāĻ°āĨ¤
āĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻŽāĻ°āĻž āĻāĻāĻŋāĻ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻŋāĻĒāĻā§āĻ¨ āĻā§āĻ°āĻāĻŋāĻ āĻāĻŋāĻ˛ā§āĻŽ āĻžāĻĒāĻ¨ āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻŋāĻ° āĻāĻŦāĻ āĻāĻ°āĻ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°ā§āĻ¤ āĻĒāĻžāĻŋāĻ° āĻ¯
āĻ¯āĻŋāĻĻ āĻāĻŋāĻ˛ā§āĻŽ āĻāĻ¨ā§āĻ āĻŦāĻŋāĻļ āĻŦā§ āĻšā§ āĻ¤ā§āĻŦ āĻŋāĻ āĻāĻā§āĻŦāĨ¤ top, bottom, left, āĻāĻŦāĻ right āĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°
āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ āĻ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤ āĻŋāĻ āĻ¯āĻ¤ āĻ¨ āĻ¨āĻž position property āĻ¸āĻ āĻāĻ°āĻž āĻšā§āĻŦ āĻ¤āĻ¤ āĻŖ āĻāĻāĻ¸āĻŦ āĻĒāĻžāĻŋāĻ
āĻāĻžāĻ āĻāĻ°ā§āĻŦ āĻ¨āĻžāĨ¤ āĻ¤āĻžāĻ°āĻž positioning method-āĻāĻ° āĻāĻĒāĻ° āĻŋāĻāĻŋ āĻā§āĻ° āĻŋāĻŦāĻŋāĻ āĻāĻžā§āĻŦ āĻāĻžāĻ āĻā§āĻ° āĻĨāĻžā§āĻāĨ¤ āĻāĻžāĻ° āĻ§āĻ°ā§āĻŖāĻ°
positioning method āĻā§āĻ āĻ¯āĻž āĻŋāĻ¨ āĻĒ-
1.Static Positioning
2.Fixed Positioning
3. Relative Positioning
4. Absolute Positioning
āĻāĻĻāĻžāĻšāĻ°āĻŖāĻ¸āĻš āĻŋāĻ¨ā§ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°āĻž āĻšāĻ˛āĻ
1.Static Positioning:
HTML āĻāĻŋāĻ˛ā§āĻŽ ā§āĻ˛āĻž āĻ¸āĻžāĻ§āĻžāĻ°āĻ¨āĻ¤ āĻžāĻŋāĻāĻ positioned āĻšā§, āĻ
āĻĨāĻžā§ āĻāĻžāĻ¨ āĻāĻāĻŋāĻ HTML āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻĒāĻŋāĻāĻļāĻ¨
āĻžāĻĒāĻžāĻŋāĻ āĻ¯āĻŋāĻĻ āĻžāĻŋāĻāĻ āĻā§āĻ° āĻĻāĻāĻ¯āĻŧāĻž āĻšāĻ¯āĻŧ; āĻ¤āĻžāĻšā§āĻ˛ āĻ¤āĻž HTML āĻāĻĒāĻžāĻĻāĻžāĻ¨ āĻ¸āĻŽā§ā§āĻšāĻ° āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻāĻŦāĻ āĻāĻžāĻŋāĻŦāĻ āĻĒāĻŋāĻāĻļāĻ¨ āĻŋāĻ¨ā§āĻĻāĻļ
āĻāĻ°ā§āĻŦāĨ¤ āĻā§ ā§ top, bottom, left, āĻāĻŦāĻ right āĻžāĻĒāĻžāĻŋāĻ āĻ¸āĻŽā§āĻš āĻŋāĻĄ āĻžā§āĻ°āĻļāĻ¨ āĻāĻ°ā§āĻ˛āĻ āĻ āĻ
āĻ¨ā§āĻ¯āĻžāĻ¯āĻŧā§ āĻāĻžāĻ¨ āĻāĻžāĻ
āĻšā§āĻŦ āĻ¨āĻž; āĻ
āĻĨāĻžā§ top, bottom, left, and right āĻžāĻĒāĻžāĻŋāĻ āĻ¸āĻŽā§āĻš āĻŋāĻ¨āĻŋ āĻ¯āĻŧ āĻšā§āĻ¯āĻŧ āĻ¯āĻžā§āĻŦāĨ¤ āĻ¤āĻžāĻ āĻŦāĻ˛āĻž āĻ¯āĻžā§ static
positioned āĻĒāĻžāĻŋāĻ ā§āĻ˛āĻž top, bottom, left, āĻāĻŦāĻ right āĻĒāĻžāĻŋāĻ āĻžāĻ°āĻž āĻāĻžāĻŋāĻŦāĻ¤ āĻšā§ āĻ¨āĻžāĨ¤
63. 63
āĻāĻžāĻĄ āĻŋāĻŦā§ āĻˇāĻŖāĻ āĻāĻĒā§āĻ°āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻŋāĻā§āĻ¤ āĻ˛ āĻ āĻ¨ āĻāĻŽāĻ°āĻž āĻŋāĻ āĻĒ āĻžāĻ°āĻž āĻžāĻĢ āĻŋāĻ¨ā§ā§āĻŋāĻ āĻāĻŦāĻ āĻāĻāĻāĻžāĻ° āĻĒāĻŋāĻāĻ¸āĻžāĻ¨ āĻžāĻŋāĻāĻ āĻā§āĻ°
āĻŋāĻĻā§ā§āĻŋāĻ āĻāĻŦāĻ āĻ
āĻ¨ āĻāĻž āĻžāĻāĻžāĻŋāĻŦāĻ āĻ
āĻŦ āĻžā§ āĻā§āĻ āĻŋāĻ āĻ¤āĻžāĻ°āĻĒāĻ°āĻ āĻŋāĻ āĻĒ āĻžāĻ°āĻž āĻžā§āĻĢāĻ° āĻāĻāĻāĻĒā§ā§āĻ āĻāĻžāĻ¨ āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻ¨āĻžāĻ , āĻāĻāĻž āĻĨā§āĻ
āĻŦā§āĻāĻž āĻ¯āĻžā§ āĻ¯, āĻ¤āĻžāĻ āĻŦāĻ˛āĻž āĻ¯āĻžā§ static positioned āĻĒāĻžāĻŋāĻ ā§āĻ˛āĻž top, bottom, left, āĻāĻŦāĻ right āĻĒāĻžāĻŋāĻ
āĻžāĻ°āĻž āĻāĻžāĻŋāĻŦāĻ¤ āĻšā§ āĻ¨āĻžāĨ¤
2.Fixed Positioning:
āĻāĻžāĻ¨ āĻāĻāĻŋāĻ HTML āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻŽāĻŋāĻ¨āĻāĻ° āĻŋ ā§āĻ¨āĻ° āĻ¸āĻžā§āĻĒā§ āĻāĻžāĻ¨ āĻŋāĻ¨āĻŋāĻĻ āĻžā§āĻ¨ āĻŋ āĻ°āĻāĻžā§āĻŦ āĻžāĻĒāĻ¨ āĻāĻ°āĻžāĻ° āĻāĻ¨ āĻĒāĻŋāĻāĻļāĻ¨
āĻŋāĻĢ āĻĄ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšāĻ¯āĻŧāĨ¤ āĻāĻāĻāĻž āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻĒāĻŋāĻāĻļāĻ¨ āĻ¯āĻŋāĻĻ āĻŋāĻĢ āĻĄ āĻā§āĻ° āĻĻāĻ¨ āĻ¤āĻžāĻšā§āĻ˛ āĻ¸āĻāĻž āĻžāĻāĻāĻžā§āĻ°āĻ° āĻāĻā§ āĻž āĻ¸āĻžā§āĻĒā§
āĻ
āĻŦ āĻžāĻ¨ āĻāĻ°ā§āĻŦ āĻāĻŦāĻ āĻžāĻāĻāĻžāĻ° āĻ¯āĻŋāĻĻ āĻ˛ āĻā§āĻ°āĻ¨ āĻ¤āĻŦā§āĻ āĻ¸āĻāĻž āĻŋ āĻ° (fixed) āĻĨāĻžāĻā§āĻŦāĨ¤ āĻāĻāĻ¨ āĻĨā§āĻŽ position:fixed;
āĻŋāĻĄ āĻžā§āĻ°āĻļāĻ¨ āĻā§āĻ°, āĻāĻ° āĻĒāĻ° top, bottom, left, and right āĻžāĻĒāĻžāĻŋāĻ āĻ¸āĻŽā§āĻš āĻŋāĻĄ āĻžā§āĻ°āĻļāĻ¨ āĻāĻ°ā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤ Fixed
positioned elements ā§āĻ˛āĻž āĻ
āĻ¨ āĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽ ā§āĻ overlap āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
64. 64
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a
!DOCTYPE is specified.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>
āĻāĻā§ āĻžāĻāĻž āĻ˛ āĻāĻ°ā§āĻ˛āĻ āĻĄāĻžāĻ¨āĻĒāĻžā§āĻļāĻ° some more text āĻ˛āĻāĻžāĻŋāĻ āĻ˛ āĻāĻ°ā§āĻŦ āĻ¨āĻžāĨ¤
65. 65
3. Relative Positioning:
āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻāĻĒāĻžāĻĻāĻžāĻ¨ āĻ¸āĻŽā§ā§āĻšāĻ° āĻžāĻāĻžāĻŋāĻŦāĻ āĻ
āĻŦ āĻžā§āĻ¨āĻ° āĻ¸āĻžā§āĻĒā§ top, bottom, left, and right āĻžāĻĒāĻžāĻŋāĻ
āĻŦ āĻŦāĻšāĻžā§āĻ°āĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻāĻžāĻ¨ āĻŦ āĻ° āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨āĻ§āĻžāĻ°ā§āĻŖāĻ° āĻāĻ¨ āĻŋāĻ°ā§āĻ˛āĻŋāĻāĻ āĻĒāĻŋāĻāĻļāĻ¨ āĻžāĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšāĻ¯āĻŧāĨ¤ āĻĒāĻŋāĻāĻļāĻ¨ āĻŋāĻ°ā§āĻ˛āĻŋāĻāĻ
āĻžāĻĒāĻžāĻŋāĻāĻ° ā§āĻ¤ āĻ¸āĻāĻ˛ āĻŋāĻšāĻ¸āĻžāĻŦ āĻšāĻ¯āĻŧ āĻ āĻāĻĒāĻžāĻĻāĻžāĻ¨āĻŋāĻāĻ° āĻžāĻāĻžāĻŋāĻŦāĻ āĻ
āĻŦ āĻžāĻ¨ āĻĨā§āĻāĨ¤ āĻ
āĻĨāĻžā§ āĻĒāĻŋāĻāĻļāĻŋāĻ¨āĻ āĻ¨āĻž āĻāĻ°āĻž āĻšā§āĻ˛ āĻāĻĒāĻžāĻĻāĻžāĻ¨āĻŋāĻ
āĻ¯ āĻžā§āĻ¨ āĻ
āĻŦ āĻžāĻ¨ āĻāĻ°ā§āĻ¤āĻž āĻ¸āĻāĻžāĻ¨ āĻĨā§āĻāĨ¤ relatively positioned āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° āĻāĻĒāĻžāĻĻāĻžāĻ¨ ā§āĻ˛āĻž āĻ
āĻ¨ āĻžāĻ¨ āĻāĻŋāĻ˛ā§āĻŽā§ āĻ°
āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻŽā§āĻ āĻŦāĻž āĻāĻāĻžāĻ°āĻ˛ āĻžāĻĒ āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal
position</h2>
<h2 class="pos_right">This heading is moved right according to its normal
position</h2>
<p>Relative positioning moves an element RELATIVE to its original
position.</p>
</body>
66. 66
</html>
āĻŋāĻ°ā§āĻ˛āĻŋāĻāĻ āĻĒāĻŋāĻāĻļāĻ¨ āĻāĻ° ā§ āĻ¯ āĻ¸āĻāĻ˛ āĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ āĻ¤āĻžā§āĻĻāĻ° āĻŋāĻāĻā§ āĻļāĻ¤ āĻĻāĻā§āĻ¨āĻ
Move Left - āĻā§ ā§ left āĻāĻ° āĻāĻ¨ negative value āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
Move Right - āĻā§ ā§ left āĻāĻ° āĻāĻ¨ positive value āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
Move Up - āĻā§ ā§ top āĻāĻ° āĻāĻ¨ negative value āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤ .
Move Down - āĻā§ ā§ left āĻāĻ° āĻāĻ¨ positive value āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻšā§āĻŦāĨ¤
4. Absolute Positioning:
HTML āĻāĻĒāĻžāĻĻāĻžāĻ¨ āĻ¸āĻŽā§ā§āĻšāĻ° āĻā§āĻ¤ āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨āĻ§āĻžāĻ°ā§āĻŖāĻ° āĻāĻ¨ āĻĒāĻŋāĻāĻļāĻ¨ āĻāĻŦāĻ¸āĻŋāĻ˛āĻāĻ āĻžāĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšāĻ¯āĻŧāĨ¤ āĻāĻžāĻ¨ āĻāĻāĻŋāĻ
HTML āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻĒāĻŋāĻāĻļāĻ¨ āĻžāĻĒāĻžāĻŋāĻ āĻ¯āĻŋāĻĻ āĻāĻŦāĻ¸āĻŋāĻ˛āĻāĻ āĻā§āĻ° āĻĻāĻāĻ¯āĻŧāĻž āĻšāĻ¯āĻŧ āĻ¤āĻžāĻšā§āĻ˛ āĻ¤āĻžāĻ° āĻ
āĻŦ āĻžāĻ¨ āĻāĻžāĻŋāĻŦāĻ ā§āĻŽ āĻŋāĻ¨ā§āĻĻāĻŋāĻļāĻ¤ āĻšāĻ¯āĻŧ
āĻ¨āĻž, āĻā§ ā§ top, bottom, left, and right āĻžāĻĒāĻžāĻŋāĻ āĻ¸āĻŽā§ā§āĻšāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻ āĻāĻĒāĻžāĻĻāĻžāĻ¨āĻŋāĻāĻ° āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨āĻ§āĻžāĻŋāĻ°āĻ¤ āĻšāĻ¯āĻŧāĨ¤
āĻā§ ā§ āĻ
āĻ¨ āĻāĻāĻŋāĻ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻāĻĒā§āĻ°āĻ āĻāĻāĻžāĻ°āĻ˛ āĻžāĻĒ āĻā§āĻ° āĻ āĻāĻĒāĻžāĻĻāĻžāĻ¨āĻŋāĻāĻ° āĻ
āĻŦ āĻžāĻ¨ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻ¸ āĻŦ āĻšāĻ¯āĻŧāĨ¤
āĻāĻĻāĻžāĻšāĻ°āĻ¨:
<html>
<head>
<style type="text/css">
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
67. 67
<p>With absolute positioning, an element can be placed anywhere on a page.
The heading below is placed 100px from the left of the page and 150px from
the top of the page.</p>
</body>
</html>
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻāĻ°āĻ āĻŋāĻāĻā§ āĻĒāĻŋāĻāĻļāĻžāĻ¨ āĻĒāĻžāĻŋāĻ
āĻŋ āĻĒ āĻĒāĻžāĻŋāĻ (Clip Property):
āĻāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻāĻžāĻ¨ āĻ
āĻāĻļ āĻĻā§āĻļ āĻŽāĻžāĻ¨ āĻšā§āĻŦ āĻ¤āĻž āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§ Clip āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ āĻ¯āĻŽāĻ¨- āĻāĻžāĻ¨ āĻā§āĻŽā§āĻāĻ° āĻ¸āĻžāĻāĻ
āĻ
ā§āĻ¨āĻ āĻŦā§ āĻšā§āĻ˛ āĻ¤āĻžāĻ° āĻāĻ¤āĻā§āĻā§ āĻĻāĻāĻž āĻ¯āĻžā§āĻŦ āĻ¤āĻž āĻāĻ āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤ āĻāĻ° āĻŋāĻ¸āĻ¨āĻ āĻž āĻšāĻ˛-
Clip: sClip
āĻāĻāĻžā§āĻ¨ sClip āĻāĻ° āĻŽāĻžāĻ¨ āĻšā§āĻ¤ āĻĒāĻžā§āĻ° āĻŋāĻ-
shape āĻāĻāĻŋāĻ āĻāĻŋāĻ˛ā§āĻŽ āĻŋ āĻĒ āĻāĻ°ā§āĻŦ āĻ¯āĻžāĻ° āĻŽāĻžāĻ¨ āĻšā§āĻ¤ āĻĒāĻžā§āĻ°- rect (top, right, bottom, left)
auto āĻāĻžāĻ¨ āĻŋ āĻŋāĻĒāĻ āĻšā§āĻŦ āĻ¨āĻžāĨ¤ āĻāĻāĻž āĻŋāĻĄāĻĢ āĨ¤
āĻāĻžāĻ¨ āĻ¸āĻžāĻā§āĻĄāĻ° āĻŽāĻžāĻ¨ āĻĻā§āĻž āĻ¨āĻž āĻšā§āĻ˛ āĻ¤āĻž auto āĻŋāĻšā§āĻ¸ā§āĻŦ āĻ§ā§āĻ° āĻ¨ā§,āĻ
āĻĨāĻžā§ āĻ¸ āĻŋāĻĻāĻāĻāĻž clip āĻā§āĻ° āĻ¨āĻžāĨ¤ āĻŋ āĻĒ āĻĒāĻžāĻŋāĻ āĻāĻžāĻ āĻā§āĻ° āĻ¨āĻž
āĻ¯āĻŋāĻĻ "overflow:visible" āĻŋāĻ˛āĻāĻž āĻšā§āĨ¤ āĻāĻžāĻ¨ āĻā§āĻŽāĻā§āĻ āĻŋ āĻĒ āĻāĻ°āĻžā§āĻ¨āĻžāĻ° āĻāĻ¨ āĻŋāĻ¨ā§āĻāĻ° āĻŽāĻ¤ āĻā§āĻŽāĻ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ°
āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°-
<html>
<head>
<style type="text/css">
img
{
position:absolute;
68. 68
clip:rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>
āĻāĻžāĻ¸āĻ° āĻĒāĻžāĻŋāĻ (cursor Property):
āĻāĻŽāĻ°āĻž āĻāĻā§ āĻžāĻ, āĻŋāĻ˛āĻ¨āĻž āĻŦ āĻŦāĻšāĻžāĻ° āĻ¸āĻŽāĻ¯āĻŧ āĻŋāĻŦāĻŋāĻ āĻŽāĻžāĻāĻ¸ āĻāĻžāĻ¸āĻ° āĻāĻāĻāĻ¨ āĻĻā§āĻāĻŋāĻāĨ¤ āĻŋāĻŦāĻŋāĻ āĻĒāĻŋāĻ°āĻŋ āĻŋāĻ¤ āĻ¸āĻžā§āĻĒā§ āĻŽāĻžāĻāĻ¸ āĻāĻžāĻ¸āĻ°
āĻāĻ° āĻāĻāĻāĻ¨ āĻŋāĻŦāĻŋāĻ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ¨āĻ¸āĻžāĻ§āĻžāĻ°āĻ¨ āĻ¯āĻāĻ¨ āĻāĻĒāĻ¨āĻžāĻ° site visit āĻāĻ°ā§āĻŦ āĻ¸āĻāĻžā§āĻ¨āĻ āĻŋāĻŦāĻŋāĻ āĻĒāĻŋāĻ°āĻŋ āĻŋāĻ¤ āĻ¸āĻžā§āĻĒā§ āĻŽāĻžāĻāĻ¸ āĻāĻ°
āĻāĻāĻāĻ¨ āĻŋāĻŦāĻŋāĻ āĻā§āĻ° āĻ¤āĻ°ā§ āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤ āĻāĻŋāĻ āĻŦāĻŋāĻļ āĻŦ āĻŦ āĻ¤ āĻšā§ āĻŋāĻ˛ā§ āĻ° āĻāĻ¨ āĨ¤ āĻ¯āĻž āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻžāĻ°āĻž āĻāĻ°āĻž āĻ¸ āĻŦ āĨ¤ āĻ¯āĻŽāĻ¨-
p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair }
āĻ¯ āĻāĻžāĻ¸āĻ° āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻŦāĻ¨ āĻ¤āĻžāĻ° URL âāĻ āĻ˛āĻāĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°-
P{cursor: url(âsajkdg.curâ) url(âsdjg.curâ),text}
āĻāĻžāĻ¸āĻ° āĻĒāĻžāĻŋāĻ āĻ¯ āĻ¸āĻāĻ˛ āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°-
cursor: auto
cursor: inherit
cursor: crosshair
cursor: default
cursor: help
cursor: move
cursor: pointer
cursor: progress
69. 69
cursor: text
cursor: wait
cursor: e-resize
cursor: ne-resize
cursor: nw-resize
cursor: n-resize
cursor: se-resize
cursor: sw-resize
cursor: s-resize
cursor: w-resize
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:progress">progress</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:wait">wait</span><br />
</body>
</html>
āĻāĻāĻžāĻ°ā§ āĻž āĻĒāĻžāĻŋāĻ(Overflow Property):
70. 70
āĻ¯āĻŋāĻĻ āĻāĻŋāĻ˛ā§āĻŽ āĻāĻ¨ā§āĻ āĻŦā§ āĻ° āĻŽāĻžā§āĻ āĻāĻŋāĻ˛ā§āĻŽ āĻāĻ¨ā§āĻ āĻ¨āĻž āĻ§ā§āĻ° āĻ¤ā§āĻŦ āĻŋāĻ āĻāĻā§āĻŦ āĻ¤āĻž āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§ overflow
āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ āĻ
āĻ¨ āĻāĻžā§āĻŦ āĻŦāĻ˛āĻž āĻ¯āĻžā§- top left, height āĻ width āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽ āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖāĻā§āĻ¤ āĻŦā§ āĻ° āĻŽāĻžā§āĻ
āĻāĻ¨ā§āĻ āĻ¨āĻž āĻ§āĻ°ā§āĻ˛ āĻ¤āĻžāĻ° āĻŋāĻ āĻšā§āĻŦ āĻ¤āĻž āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§ overflow āĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ§ ā§āĻŽāĨ¤ āĻāĻ āĻĒāĻžāĻŋāĻāĻ° āĻāĻžāĻ°āĻŋāĻ āĻŽāĻžāĻ¨ āĻšā§āĻ¤ āĻĒāĻžā§āĻ°-
visible
āĻĒā§ā§āĻ°āĻž āĻāĻ¨ā§āĻ āĻāĻāĻāĻžā§āĻ¨āĻžāĻ° āĻāĻ¨ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻāĻāĻžāĻ° āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻāĻ°ā§āĻŦāĨ¤āĻāĻŋāĻ āĻŋāĻĄāĻĢ āĻŽāĻžāĻ¨āĨ¤
hidden āĻāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĻ˛ āĻ¸āĻžāĻā§āĻāĻ° āĻŦāĻŋāĻļ āĻ āĻ āĻĻāĻāĻž āĻ¯āĻžā§āĻŦ āĻ¨āĻžāĨ¤
scroll āĻāĻ¨ā§āĻ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻŋāĻ¨āĻ§āĻžāĻŋāĻ°āĻ¤ āĻāĻāĻžā§āĻ°āĻ° āĻā§ā§ āĻŦāĻŋāĻļ āĻŦāĻž āĻāĻŽ āĻ¯āĻžāĻ āĻšāĻžāĻ āĻ¨āĻž āĻāĻ¨ āĻ¸āĻŦāĻ¸āĻŽā§ āĻ˛āĻŦāĻžāĻ° āĻĻāĻļāĻ¨ āĻāĻ°ā§āĻŦāĨ¤
auto
āĻāĻ¨ā§āĻ āĻŋāĻ¨āĻ§āĻžāĻŋāĻ°āĻ¤ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻāĻāĻžā§āĻ°āĻ° āĻā§ā§ āĻŦāĻŋāĻļ āĻšā§āĻ˛āĻ āĻāĻŦāĻ˛ āĻ˛āĻŦāĻžāĻ° āĻĻāĻāĻžā§āĻŦāĨ¤
<html>
<head>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds
the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better
control of the layout. The default value is visible.</div>
71. 71
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better
control of the layout. The default value is visible.</div>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
āĻāĻĄ āĻāĻ¨ā§āĻĄ (Z-index Property):
āĻĒāĻŋāĻāĻļāĻ¨ āĻāĻŦāĻ¸āĻŋāĻ˛āĻāĻ (position:absolute) āĻā§āĻ° āĻāĻŦāĻ top, bottom, left, and right āĻāĻ¤ āĻžāĻŋāĻĻ
āĻžāĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻāĻāĻžāĻŋāĻ§āĻ HTML āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻĒāĻ° ā§āĻ°āĻ° āĻāĻĒāĻ° āĻāĻāĻžāĻ°āĻ˛ āĻžāĻĒ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤
āĻāĻāĻžāĻŋāĻ§āĻ HTML āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻĒāĻ° ā§āĻ°āĻ° āĻāĻĒāĻ° āĻāĻāĻžāĻ°āĻ˛ āĻžāĻĒ āĻāĻ°āĻž āĻāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžāĻ¨ āĻāĻžāĻ° āĻāĻĒā§āĻ°
āĻ
āĻŦ āĻžāĻ¨ āĻāĻ°ā§āĻŦ āĻ¤āĻž āĻāĻĄ āĻāĻ¨ā§āĻĄ (Z-index) āĻžāĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšā§āĨ¤ (Z-
index) āĻžāĻĒāĻžāĻŋāĻāĻ° āĻŽāĻžāĻ¨ āĻŋāĻšā§āĻ¸ā§āĻŦ āĻāĻŽāĻ°āĻž auto āĻāĻŦāĻ āĻāĻžāĻ¨ āĻ¸āĻāĻ āĻž āĻ¯āĻŽāĻ¨ 1,2,3,-1 āĻāĻŋāĻ¤ā§ āĻŦ āĻŦāĻšāĻžāĻ°
āĻāĻ°āĻž āĻšā§āĨ¤
72. 72
āĻāĻŽāĻ°āĻž āĻĻā§āĻāĻŋāĻ p o s i t i o n a b s o l u t e: āĻāĻ° āĻ¸āĻžā§āĻĨ t o p b o t t o m l e f t, , ,
a n d r i g h t āĻāĻ¤ āĻžāĻŋāĻĻ āĻĒāĻžāĻŋāĻ āĻŋāĻŽāĻŋāĻļā§ā§ āĻŋāĻŦāĻŋāĻ āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻāĻāĻžāĻ°āĻ˛ āĻžāĻĒ āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻĒāĻžā§āĻ°āĨ¤ āĻŋāĻŦāĻŋāĻ āĻāĻĒāĻžāĻĻāĻžāĻ¨
āĻāĻāĻžāĻ°āĻ˛ āĻžāĻĒ āĻāĻ°āĻžā§āĻ¨āĻž āĻšā§āĻ˛ āĻāĻžāĻ¨āĻŋāĻ āĻāĻžāĻ° āĻāĻĒā§āĻ° āĻ
āĻŦ āĻžāĻ¨ āĻāĻ°ā§āĻŦ āĻ¤āĻž āĻāĻĄ āĻāĻ¨ā§āĻĄ (Z -i n d e x ) āĻžāĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°
āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°āĻž āĻšāĻ¯āĻŧāĨ¤
z-index āĻĒāĻžāĻŋāĻ āĻ āĻ§āĻ°ā§āĻŖāĻ° āĻŽāĻžāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤ āĻĒāĻžā§āĻ°-
auto Sets the stack order equal to its parents. This is default
number Sets the stack order of the element. Negative numbers are allowed
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨-
āĻĻāĻļāĻ¨āĻ
73. 73
āĻ
āĻ§ āĻžā§-āĻ¨ā§
[āĻŦ āĻĒāĻžāĻŋāĻ]
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸ āĻāĻ° ā§ āĻŋāĻ¤āĻŋāĻ āĻ āĻ˛ā§āĻāĻ˛ āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ āĻāĻāĻŋāĻ āĻŦ āĻŋāĻšā§āĻ¸ā§āĻŦ āĻ§ā§āĻ° āĻ¨ā§āĻž āĻšā§āĨ¤ āĻāĻ āĻŦā§ āĻ° āĻā§āĻ āĻŋāĻāĻā§ āĻĒāĻžāĻŋāĻāĨ¤
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻāĻ¸āĻŦ āĻĒāĻžāĻŋāĻ āĻ āĻ¤āĻžāĻ° āĻŦ āĻŦāĻšāĻžāĻ°ā§āĻ āĻŦ āĻŽā§āĻĄāĻ˛ āĻŦā§āĻ˛ āĻ
āĻŋāĻāĻŋāĻšāĻ¤ āĻāĻ°āĻž āĻšā§āĨ¤ āĻāĻ āĻŦā§ āĻ° āĻŋāĻŦāĻŋāĻ āĻĒāĻžāĻŋāĻ āĻĒāĻŋāĻ°āĻŦāĻ¤āĻ¨ āĻā§āĻ°
āĻŋāĻŦā§āĻļāĻˇ āĻā§āĻ° āĻāĻžāĻ¨ āĻāĻĒāĻžāĻĻāĻžā§āĻ¨āĻ° āĻāĻžāĻ°āĻĒāĻžā§āĻļ āĻŦāĻĄāĻžāĻ° āĻŦāĻž āĻāĻ¨ā§āĻĄ āĻ¤āĻŋāĻ°āĻ° āĻāĻ¨ āĻŦ āĻŽā§āĻĄāĻ˛ āĻŦāĻžāĻāĻž āĻā§āĻŦ āĻĻāĻ°āĻāĻžāĻ°āĨ¤ āĻŋāĻĄāĻāĻžāĻāĻ¨ āĻ
āĻ˛āĻāĻā§āĻāĻ° āĻāĻ¨ "box model" āĻā§āĻŦāĻ āĻĒā§āĻŖāĨ¤ "box model" āĻāĻ¸ā§āĻ˛ āĻāĻāĻŋāĻ āĻŦ āĻ¯āĻž HTML āĻāĻĒāĻžāĻĻāĻžāĻ¨ā§āĻ
āĻŋāĻā§āĻ° āĻĨāĻžā§āĻāĨ¤ āĻŦ āĻŽā§āĻĄā§āĻ˛āĻ° āĻāĻĒāĻžāĻĻāĻžāĻ¨ āĻ˛ āĻšāĻ˛-
1.margins 2.borders 3.padding 4. contents
āĻŦ āĻŽā§āĻĄā§āĻ˛āĻ° āĻāĻ āĻ¨ āĻ¨ā§ āĻĻāĻāĻžā§āĻ¨āĻž āĻšāĻ˛āĻ
74. 74
Margin - Margin āĻŦāĻ˛ā§āĻ¤ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻāĻŋāĻ˛ā§āĻŽ āĻāĻ° border āĻāĻ° āĻāĻžāĻ°āĻĒāĻžā§āĻļāĻ° āĻ
āĻāĻļā§āĻ āĻŦāĻž āĻāĻŋāĻ˛ā§āĻŽā§ āĻ°
āĻāĻžāĻ°āĻĒāĻžā§āĻļāĻ° āĻ
āĻāĻļā§āĻ āĻŦāĻžāĻāĻžāĻ¯āĻŧ
Border - padding āĻāĻŦāĻ content-āĻāĻ° āĻāĻžāĻ°āĻĒāĻžā§āĻļāĻ° āĻ
āĻāĻļāĻ āĻšāĻ˛ āĻŦāĻĄāĻžāĻ°āĨ¤ āĻŦāĻĄāĻžāĻ° āĻŦ āĻžāĻ āĻ āĻāĻžāĻ˛āĻžāĻ° āĻžāĻ°āĻž āĻāĻžāĻŋāĻŦāĻ¤
āĻšā§āĨ¤
Padding â āĻŦāĻĄāĻžāĻ° āĻāĻŦāĻ āĻāĻ¨ā§āĻā§ āĻ° āĻŽāĻžā§āĻāĻ° āĻĢāĻāĻžāĻāĻž āĻžāĻ¨āĻ āĻšāĻ˛ padding āĨ¤ padding āĻŦāĻĄāĻžāĻ° āĻŦ āĻžāĻ āĻ āĻāĻžāĻ˛āĻžāĻ° āĻžāĻ°āĻž
āĻāĻžāĻŋāĻŦāĻ¤ āĻšā§āĨ¤
Content â āĻ¯āĻāĻžā§āĻ¨ āĻāĻāĻāĻŋāĻāĻāĻŽāĻāĻ˛ āĻāĻŋāĻ˛ā§āĻŽ āĻ¯āĻŽāĻ¨- āĻ āĻ , āĻā§āĻŽāĻ āĻāĻ¤ āĻžāĻŋāĻĻ āĻĨāĻžā§āĻāĨ¤
āĻāĻžāĻ¨ āĻāĻ¨ā§āĻā§ āĻ° āĻāĻ¨ āĻŋāĻĢ āĻĄ āĻāĻžāĻ¨ āĻāĻŋāĻ°ā§āĻž āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°ā§āĻ¤ āĻāĻŽāĻ°āĻž āĻŋāĻ¸āĻāĻ¸āĻāĻ¸- āĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ width and height
āĻĒāĻžāĻŋāĻ āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ° āĻĨāĻžāĻŋāĻāĨ¤ āĻŋāĻ āĻĒā§ā§āĻ°āĻž āĻāĻŋāĻ°ā§āĻž āĻŋāĻ¨āĻ§āĻžāĻ°āĻŖ āĻāĻ°ā§āĻ¤ padding, border and margin āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¤
āĻšā§āĻŦāĨ¤
ā§Šā§Ļā§Ļ āĻŋāĻĒā§ āĻ˛ āĻāĻ¨ā§āĻ āĻāĻŋāĻ°ā§āĻžāĻ° āĻāĻ¨ āĻŋāĻĄāĻāĻ˛āĻžā§āĻ°āĻļāĻ¨ āĻĻāĻā§āĻ¨āĻ
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
āĻŋāĻšāĻ¸āĻžāĻŦ āĻā§āĻ° āĻĻāĻāĻž āĻ¯āĻžāĻāĻ
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
75. 75
+ 20px (left and right margin)
= 300px
āĻŋāĻ¨ā§āĻāĻ° āĻ¸ā§ ā§ā§āĻžāĻ āĻā§āĻ° āĻŋāĻšāĻ¸āĻžāĻŦ āĻ āĻ¨āĻ
ī¨Total element width = width + left padding + right padding + left border +
right border + left margin + right margin
ī¨Total element height = height + top padding + bottom padding + top border
+ bottom border + top margin + bottom margin
āĻāĻāĻŋāĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻā§āĻ¨āĻ
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="250px.gif" width="250" height="1" /><br /><br />
76. 76
<div class="ex">The line above is 250px wide.<br />
The total width of this element is also 250px.</div>
</body>
</html>
āĻāĻāĻāĻĒā§āĻāĻ
āĻŋāĻ¸āĻāĻ¸āĻāĻ¸-āĻ āĻŦ āĻŦ āĻ¤ āĻ¸āĻāĻ˛ Margin Properties:
āĻĒāĻžāĻŋāĻ āĻŦāĻŖāĻ¨āĻž
margin
āĻ¸āĻāĻ˛ āĻŽāĻžāĻŋāĻāĻ¨ āĻĒāĻžāĻŋāĻā§āĻ āĻāĻāĻŋāĻ āĻĒāĻžāĻŋāĻ- āĻ¤ āĻŋāĻ¨ā§ā§ āĻāĻ¸āĻž āĻ¯āĻžā§ margin shorthand
property ("margin") āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĨ¤
margin-bottom āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° bottom margin-āĻāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤
margin-left āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° left margin -āĻāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤
margin-right āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° right margin -āĻāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤
margin-top āĻāĻŋāĻ˛ā§āĻŽā§ āĻ° top margin -āĻāĻ° āĻāĻ¨ āĻŦ āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§āĨ¤
āĻ§āĻžāĻ°āĻžāĻŦāĻžāĻŋāĻšāĻāĻāĻžā§āĻŦ āĻĒāĻžāĻŋāĻ ā§āĻ˛āĻž āĻŋāĻ¨ā§ āĻā§āĻ˛āĻžāĻāĻ¨āĻž āĻāĻ°āĻž āĻšāĻ˛āĻ
1.Margin - Shorthand property
āĻ¸āĻāĻ˛ margin property āĻ āĻāĻāĻŋāĻ property- āĻ¤ āĻŋāĻ¨ā§ā§ āĻāĻ¸āĻž āĻ¯āĻžā§ margin shorthand
property ("margin")āĻŦ āĻŦāĻšāĻžāĻ° āĻā§āĻ°āĨ¤ margin āĻĒāĻžāĻŋāĻ top>right>bottom>left āĻāĻ āĻŽ āĻŽā§āĻ¨ āĻā§āĻ˛āĨ¤
margin property āĻāĻžāĻ°āĻŋāĻ āĻāĻ˛ā§ āĻŋāĻ¨ā§ā§ āĻāĻŋāĻ āĻ¤āĨ¤
īˇ margin:25px 50px 75px 100px;