Page 81 - Trackpad_V4.0_c6_Flpbook
P. 81

Inline Style Sheet

                 An inline style is used to apply a unique style to a single element. It allows you to create and apply a
                 style directly to the element. Syntax to create an inline style is:


                 <element style = "property1:value1; property2:value2; … ….">
                 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">
                 Text in white colour

                 </body>
                 Internal Style Sheet

                 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 one web page
                 has a unique style. For example:

                 <head>

                 <style>
                 body{background-color:green; color:white;}
                 </style>

                 </head>
                 <body>

                 Text in white colour
                 </body>


                 External Style Sheet

                 In case of external stylesheet, the CSS styles are written in a separate file which is saved with .css
                 extension. You need to include a reference to the external style sheet file within the <LINK> element
                 inside the <HEAD> element. Syntax to include the reference of the external stylesheet is:

                 <head>

                 <link rel="stylesheet" type="text/css" href="name of style sheet file">
                 </head>
                 Where, HREF attribute contains the path of the stylesheet. For example, if you have saved the file with

                 the styles as style.css, then the code will be:

                 <head>
                 <link rel="stylesheet" type="text/css" href="style.css">

                 </head>



                                                                                    Introduction to HTML5 & CSS3    79
   76   77   78   79   80   81   82   83   84   85   86