Page 97 - TP_iPlus_V2.1_Class6
P. 97

The <SUB> Tag   A semicolon should be used at the end of the property-value if more than one property is used.
                 However, you can skip the semicolon if only one property is used.
 The <SUB> tag is used to turn the enclosed text into a subscript. For example, H O is coded
 2
 as  H<sub>2</sub>O  All the properties and their values are enclosed within curly braces. For example, if you want to
                 create a style that fills a background colour in a web page, then you need to use the background-
                 colour property of CSS in the following manner:
 If HTML is a canvas and you are an artist, how would you design web pages
                 body {background-color:green}
 and layout to express your creativity and style?
                 In the preceding code, body signifies the <BODY> tag, background-color is the property and

                 green is the value of property that will change the background colour of the web page to green.
 i +  EDITING AN EXISTING HTML DOCUMENT  Using CSS Style

 Follow these steps to edit an HTML document:  There are three ways to use the CSS styles in HTML document which are:

                 •  Inline style sheet
 1  Right-click on   •  Internal Style Sheet
 the file icon.  •  External Style Sheet
                 Inline Style Sheet


                 An inline style is used to apply a unique style to a single element. It allows you to create and
 2  Click on the
                 apply a style directly to the element. Syntax to create an inline style is:
 Open with option.
                 <element style = “property1:value1; property2:value2; … ….”>
 3  Click on
 Notepad.        Where, element is any valid HTML tag and the style is the global attribute of HTML used by all
                 the tags of HTML. The style attribute contains the CSS properties and their values within double
                 quotes. For example:

                 <body style=”background-color:green; color:white”>
 Editing HTML file
                 Text in white colour
 This will open your HTML document in Notepad so that you can make changes to the file. After
                 </body>
 making the required changes, you need to save the file by pressing the Ctrl+S keys.
                 Internal Style Sheet
 If your web page is already opened in a web browser, you need to press the F5 key to see the
 changes you have made.  CSS design can also be applied to an HTML document by using <STYLE> tag. This tag should be

                 placed inside the <HEAD> and </HEAD> tags. An internal style sheet is commonly used when
 i +  INTRODUCING CSS3  one web page has a unique style. For example:

 CSS stands for Cascading Style Sheets. It is used for designing or styling a web page. It handles   <head>
 and describes how an HTML web page will be presented on a web browser. It helps save a lot of
                 <style>
 time, as one design layout can be used to create multiple web pages. The latest version of CSS
                 body{background-color:green; color:white;}
 is CSS 3.
                 </style>
 CSS  comprises  style  rules  that  are  interpreted  by  the  web  browser  and  then  applied  to  the
 corresponding elements in HTML web page. Syntax to create a style in CSS is:  </head>

                 <body>
 selector{property1:value1; property2:value2; … …}
                 Text in white colour
 Where, selector refers to an HTML tag to which a style will be applied like <BODY>. The property1
 is a property of CSS that can be used to create a style and value1 is the valid value of the property.   </body>



                                                                                                                  95
                                                                                        HTML—An Introduction
   92   93   94   95   96   97   98   99   100   101   102