Page 116 - CA 165 ver 1.0 Class 10
P. 116

CASCADING STYLE SHEETS                                                      4








                         ‘Cascading Style Sheet’ is commonly referred to as CSS. CSS is a simple design language which
                         enables to simplify the process of making web pages. It handles and describes how an HTML web
                         page will be presented on a web browser. It helps to save lot of time as one design layout can be
                         used to make more number of web pages.

                         Using CSS, web designer can control the text colour, font style, paragraph spacing, columns size,
                         background images, layout designs, etc.

                         A CSS comprises of style rules that are interpreted by the web browser and then applied to the
                         corresponding elements in a document. Its style rule is made of two parts i.e., ‘Selector’ and
                         ‘Declaration’. ‘Declaration’ can be further categorized into ‘Property’ and ‘Value’. Syntax is:
                           Selector {Property:Value}
                         Where,

                           Selector: It signifies or points to an HTML tag to which a style will be applied. Selector could
                            be any tag like <H1>, <TABLE>, etc.
                           Property: It is a type of attribute (such as text colour, font style, paragraph spacing, etc.) of
                            HTML tag.
                           Value: It is the value assigned to the property. Value is always followed by ‘Property’ and
                            separated by ‘colon’.

                         A CSS declaration block is enclosed by curly braces and always ends with a semicolon. Declaration
                         block can contain one or more declarations separated by a semicolon.
                         Selectors can be defined in various ways. Some of the selectors are illustrated below:
                         Type Selector


                           H1{color:blue}
                         Here, H1 is the selector and 'color' is a CSS property. In this case, all elements of H1 will appear in
                         blue colour. Let us take another example:
                            P  {

                              text-align: center;
                              color: red;

                              }
                         Here, P is a selector and text-align is a CSS property.







                   114   Touchpad Computer Applications-X
   111   112   113   114   115   116   117   118   119   120   121