CSS3 ==== - is used to control the style and layout of Web pages.

CSS3 Modules ========= -CSS3 is split up in to modules.

New important Modules =============== Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface Where to put CSS ============ CSS code can be written in three places: External style sheet - in an entirely separate file from the HTML document Internal style sheet - in the HTML document's head section Inline - the style is made an attribute of the desired HTML element Refer slide 2 of Css Fonts CSS3 Fonts: ========= -Before CSS3,web designers had to use the fonts installed on the user's computer. -In CSS3 fonts are defined in the css3 @font-face rule. Browser Support =========== Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web O pen Font Format) font. Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) a nd OTF (OpenType Fonts). Chrome, Safari and Opera also support SVG fonts/shapes. Internet Explorer also supports EOT (Embedded OpenType) fonts. Note: Internet Explorer 8 and earlier versions, do not support the @font-face ru le.

CSS3 Font Families ============ There are two types of font family. 1.Generic Family. 2.Font Family. Generic family-Serif,Sans-Serif,Monospace. Font Family-Times New Roman-Georgia,Arial,Verdana,Courier New,Lucida Console.

font-weight Property ============= Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 7 00 | 800 | 900 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light 400 - Normal 500 - Medium 600 - Semi Bold (Demi Bold) 700 - Bold 800 - Extra Bold (Ultra Bold) 900 - Black (Heavy) normal Same as 400 . bold Same as 700 . bolder Specifies the weight of the face bolder than the inherited value. lighter Specifies the weight of the face lighter than the inherited value. Font width:(Font-stretch property) ====================== Value: ===== normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded Refer Slide No:13. Font-Style Property ============= Value:normal | italic | oblique

Font-Size Property ============ Value:<absolute-size> | <relative-size> | <length> | <percentage> Absolute size: ========= Sets the text to a specified size Does not allow a user to change the text size in all browsers (bad for a ccessibility reasons) Absolute size is useful when the physical size of the output is known. Relative size: ========= Sets the size relative to surrounding elements Allows a user to change the text size in browsers. pixel: ==== -Setting the text size with pixels gives you full control over the text size. Example: h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} em === -To avoid the resizing problem with older versions of Internet Explorer, many de velopers use em instead of pixels. -The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px . So, the default size of 1em is 16px. Example: h1 {font-size:2.5em;} /* 40px/16=2.5em */ Note: Go to slide 14

eg: