Quick Contact

    Include CSS in HTML Documents

    Introduction

    CSS can be connected as a single document or embedded directly in the HTML document. CSS can be included in an HTML document in three ways:

    • Inline styles —

      It is use tostyle attribute in the HTML start tag.

    • Embedded styles —

      Using the < style> component in the head section of a document.

    • External style sheets —

      Making use of the < link> element, to pointing to an external CSS file.

    Note:
    External style sheets have the least impact, followed by inline styles. If you clarify styles for a component in both the embedded and external style sheets, the clashing style rules in the embedded style sheet will takes priority over the external file.

    Inline Styles

    Inline styles are utilized to implement the element’s unique and stylish rules by inserting the CSS rules effectively through into start tag. The style attribute can be used to connect it to an attribute.

    A sequence of CSS property and combination of attributes comprise the style attribute. Every “property: value” pair is isolated by a semicolon (;), just like in integrated or external style sheets. However, it must all be on one line, with no line breaks after the semicolon.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    	< meta charset="utf-8">
    < title>Example of CSS Inline Styles< /title>
    < /head>
    < body>
    	< h1 style="color:red; font-size:40px;">Heading< /h1>
    	< p style="color:green; font-size:30px;">Paragraph.< /p>
    	< div style="color:blue; font-size:20px;">Text Content.< /div>
    < /body>
    < /html>
    

    Output

    Heading

    Paragraph.

    Text Content.

    Using inline styles is generally regarded as a bad practice. Because style rules are entrance door inside the HTML tag, the appearance becomes mixed with the information of the document, making the code difficult to maintain and defeating the objective of using CSS.

    Embedded Style Sheets

    Embedded or internal style sheets have no effect on the document in which they are integrated.

    The < style> element is used to define integrated style sheets in an HTML document’s head tag. In an HTML document, you can define an unlimited number of < style> components, however they must seem to between the < head> and < /head> tags.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    	< meta charset="utf-8">
    < title>Example of CSS Embedded Style Sheet< /title>
    < style>
    body { background-color: Skyblue; }
    p { color: #fff; }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a paragraph of text.< /p>
    < /body>
    < /html>
    

    Output

    External Style Sheets

    When the style is implemented to multiple pages of the website, an external styling sheet is suitable.

    An external style sheet is a separate document that contains all of the style rules and can be linked from any HTML file on your site. External style sheets are the most adaptable because they allow you to change the look of an entire website by changing just one file.

    External style sheets can be attached in two ways: linking and importing.

    Linking External Style Sheets

    We must first start creating a style sheet before linking. Let’s open your preferred code editor and make a new file. Now, inside this file, type the following CSS code and save it as “style.css.”

    Example

    body{
    	background:lightyellow;
    	font: 18px Arial, sans-serif;
    	}
    h1{
    	color: orange;
    }
    

    Using the < link> tag, an external style sheet can also be connected to a Html file. The < link> tag is placed within the < head> section.

    < !DOCTYPE html>
    < html lang="en">
    < head>
    	< meta charset="utf-8">
    < title>Example of CSS External Style Sheet< /title>
    < link rel="stylesheet" href="/examples/css/style.css">
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a paragraph of text.< /p>
    < /body>
    < /html>
    

    Output

    Importing External Style Sheets

    Another method for loading an external style sheet is to use the @import rule. The @import statement instructs the browser to load and use an external style sheet.

    It can be used in two ways. The most basic is within your document’s header. It should be noted that other CSS rules can still be added to the < style> element.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    	< meta charset="utf-8"> 
    < title>Example of CSS Imported Style Sheet< /title>
    < style>
            @import url("/examples/css/style.css");
    p {
    color: blue;
    font-size: 16px;
            }
    < /style>
    < /head>
    < body>
    	< h1>The styles for this heading are defined in the imported style sheet< /h1>
    	< p>The styles for this paragraph are defined in the embedded style sheet.< /p>
    < /body>
    < /html>
    

    Accordingly, the @import rule can be used to procure a style sheet inside another config file.

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Example of CSS @import rule< /title>
    < style>
            @import url("/examples/css/layout.css");
            @import url("/examples/css/color.css");
    body {
    color:blue;
    font-size:14px;
            }
    < /style>
    < /head>
    < body>
    < div>
    		< h1>Importing External Style Sheet< /h1>
    		< p>The layout styles of these HTML element is defined in 'layout.css' and colors in 'color.css'.< /p>
    < /div>
    < /body>
    < /html>
    

    Output
    Note:
    All @import guidelines must appear at the beginning of the style sheet. Any style stipulation characterized in the style sheet itself takes precedence over any contradicting guidelines established in the imported style sheets. Importing a style sheet in just another style sheet, on the other hand, is not suggested because of performance issues.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.