Pe te ea © Explain the use of CSS Learn to use Background properties ° © Use inline style © Use Font properties ° ° _J various tags and how they are used to create —F web pages. tis chapter, you wll learn about $ C8 (Cascading Slyle Shee!) used to make your web page more atiractive andl readable. Know how to use Margin Border properties Introduction to CSS CSS stands for Cascading Style Sheet. CSS works with HTML to control the presentation of your web page. CSS saves a lot of efforts. It can control the 7 layout of multiple web pages all at ones. S409 In simple words, CSS is used to style the web pages. &D Oy CSS enhances the look and feel of your web pages and makes them more presentable. You have learned about the basic syntax rule of CSS in the previous class. Let’s have a quick recap. CSS is platform independent and can support latest browsers as well Syntax of CSS style rule: Selector Declaration Declaration — t f Property Value Property Value & Fig. 5.4. syntax of CSS style rule © The selector points to the HTML element you want to style. © The declaration block contains one or more declarations separated by semicolons (;). Each declaration includes a CSS property name and a.value, separate by a colon (:). © A(CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. Let us see an example, Let us use CSS to make the text within

elements appear in green color and center aligned. 57 j color: green; ‘text-align: center; Hello World! This web page is styled with CSS.

Hello World!

This web page is styled with CSS.

& Fig. 5.2 an HTML document using CSS & Fig. 5.3 a CSS styled web page CSS — Background Properties ‘The CSS background properties are used to add the background effects for HTML elements. CSS provides the following background properties: + Background-image + Background-color + Background-position + Background-repeat Background-Image This property is used to set the background image of an HTML element. You can set the background- image property as shown below: chtal>

This page has an image as the background!

& Fig. 5.4 setting background.image & Fig. 5.8 background image using CSS Background-Color ‘This property is used to set the background color of an HTML element. You can set the background- ) color property as shown below: ;italy & Fig. 5.6 setting background color of a web page Background-Position ‘This property is used to set the position of the background image of an HTML element. You can set the background-position of the background image to 100px as shown below: A 1 ) Isers/CSS/note. jpg”) 5 & Fig, 5.8 setting background position of an image _@ Fig. 5.9. position of background image es ! You can also set the background position to left, right, top and bottom. Background-Repeat ‘This property is used to control the repetition of background image. You can set the background- repeat as shown on the next page: This image 4s being repeated!

2 Fig. 5.10 setting background image repeat & Fig. 5.11 background image repeat Inline Style Usually CSS is written in a