Page 151 - Digicode_AI_class_8
P. 151

Inline Style Sheet
            An inline style is used to apply a unique style for a single element. It allows you to create and apply

            a style on 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 all 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 into 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 external stylesheet is:
            <head>

            <link rel=“stylesheet” type=“text/css” href=“name of style sheet”>
            </head>

            Where, HREF attribute contains the path of the stylesheet. For example, if you have saved the file in
            which styles are written with the name style.css, then the code will be:

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

            </head>

                                                                                         HTML5 & CSS3    149
   146   147   148   149   150   151   152   153   154   155   156