Here is the output produced by the above internal style sheet – Embedded CSS code:
In the above example style element contain, starting and ending tag, and this style element contains an attribute with value text/css.
style elements declaration was written between an opening and the closing tags, and declaration consists of a selector (property and value) followed by curly braces.
The curly braces contain a property colon, semicolon.
The external style sheet – External CSS
In this method, all CSS which you want to use in your website or blog is declared in an external style sheet.
its a separated file of CSS. which use to control the website user interface design that file typically has an extension of “.CSS”
you can include in all of your HTML web pages.
as you see in case of an internal style sheet when used CSS file its placed inside the HTML Document but,
in case of the external style sheet, the CSS code (file) is placed the outside the web HTML pages and the reference of
the CSS file which will be placed in the HTML document.
now the external style sheet, linked in your Web pages in the following two ways.
the external style sheet, linked use @import rules, here The @import keyword is used,
followed by the URL (Uniform Resource Identifier) of the style sheet to which you want to import
the style rules.
The following code shows an example of the @import rule.
In the above code, you can see that @import keyword followed by the URL of the style sheet named new_stylesheet.css
The HTML link element is used to link a style sheet. This LINK element has the following three attributes. I) rel II) href III) type
Here, in the above code fragment, the rel attribute define that what you are linking (In Case of CSS style sheet).
the href attribute indicates or specifies the path of the file (in case of CSS extension .css file) and The type
specifies the MIME type for the browser,
As you see in above, rel attribute value is set to the stylesheet, the value of the href attributes is new_stylesheet.css and the type attribute value set to text/css
The in-line style – Inline CSS
The Inline style – Inline CSS, properties are always written in single line with separated by semicolons. and Inline CSS properties placed inside the HTML element.