Quick Contact

    HTML Styles

    Introduction

    When it comes to web page display, HTML is rather restricted. It was initially intended to be a straightforward means of displaying information. CSS (Cascading Style Sheets) was created by the World Wide Web Consortium (W3C) in December 1996 to give a better way to style HTML components.

    CSS makes it extremely simple to set font size and typeface, colour for text and backgrounds, alignment of text and pictures, amount of space between components, border and outlines for elements, and many other stylistic aspects.

    Adding Styles to HTML Elements

    Style information can be provided as a single document or incorporated directly in the HTML content. These are the three ways to add stylistic information to an HTML document.

    • Inline styles —

      Using the style property in the HTML start element to create inline styles.

    • Embedded style —

      Using the < style> elements in the document’s head section.

    • External style sheet —

      Using the < link> element, pointing to an external CSS files.

    Note:

    The inline styles have the highest priority, and the external style sheets have the lowest. It means if you specify styles for your paragraphs in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override the external style sheet.

    Inline Styles

    Inline styles are used to implement the element’s unique style rules by inserting the CSS rules straight into the start tag. The style property can be used to tie it to an element.

    A sequence of CSS property and value pairs comprise the style attribute. Each property:value pair is separated by a semicolon (;), much as in an embedded or external style sheet. However, it must all be on one line, with no line breaks following the semicolon.

    The following example shows how to change the colour and font size of the text:

    Example

    < !DOCTYPE html>
    < html>
    < head>
    < title>Inline Style< /title>
    < /head>
    < body>
    < h1 style="text-align: center;">< u>< i> Ducat India< /i>< /u>< /h1>
    < h2 style="text-align: center; color: blue; font-size: 20px">< u>About DUCAT Creative< /u>< /h2>
    < p style="text-align: center; color: red; font-size: 18px; font-family: georgia;">
    

    Getting a job is as difficult as beating the crowd because being in the corporate world demands a lot from the applicant because of which the applicants are putting their best, which results in the increment of difficulty level. You can see each and every thing is connected but the solution of this problem is either spending years to reach to a desired position or come to Ducat. At Ducat we provide the entire necessary computer training which helps the newbies and also the experienced workers so that they can achieve better recognition in this competitive world.

    Ducat provides the best available programs which helps in enhancing the technical skills which seems to be beneficial for all the applicants.

    < /p>
    < /body>
    < /html>
    

    Output

    HTML Styles

    Advantages of Inline Styles:

    • Inline styles have priority over external or internal stylesheets, therefore they are executed first.
    • Inline styles may be introduced fast and simply to the element that needs to be formatted, eliminating the requirement to generate a new document.

    Disadvantages of Inline Styling:

    • They have a tendency to override element characteristics that the creator may not have intended.
    • HTML documents will become hard-coded and impossible to manage if just inline styles were utilized.
    • If a single style is to be applied to a collection of elements, it must be added to each and every element within the group. For example, if all paragraph tags are to be center-aligned, each paragraph element must first be discovered and its text-align attribute set to center. This gets pretty time-consuming.

    Embedded Style Sheets

    Embedded or internal style sheets have no effect on the document within which they are contained.

    The < style> element is used to establish embedded style sheets in an HTML document’s head section. Within the < head> section, we can declare an unlimited number of < style> elements.

    The following example shows how style rules may be integrated into a web page.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    	< meta charset="UTF-8">
    < title>Using Embedded Style Sheet in HTML< /title>
    < style type="text/css">
    body { background-color: Yellow; }
    		h1 { color: blue; }
    p { color: red; }
    < /style>
    < /head>
    < body>
    	< h1>Ducat India< /h1>
    

    Getting a job is as difficult as beating the crowd because being in the corporate world demands a lot from the applicant because of which the applicants are putting their best, which results in the increment of difficulty level. You can see each and every thing is connected but the solution of this problem is either spending years to reach to a desired position or come to Ducat. At Ducat we provide the entire necessary computer training which helps the newbies and also the experienced workers so that they can achieve better recognition in this competitive world.

    < /body>
    < /html>
    

    Output

    HTML Styles

    External Style Sheets

    Whenever the layout is extended to multiple pages, an external styling sheet is excellent.

    An external style sheet contains all of the site’s style rules in a single document which you can link to from any HTML document. External style sheets are the most adaptable since they allow you to modify the look of a complete website by updating only one file.

    Linking External Style Sheets

    Using the < link> element, an external style sheet may be connected to an HTML document.

    The < link> tag is placed within the < head> section, as demonstrated here:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    	< meta charset="UTF-8">
    < title>Linking External Style Sheet in HTML< /title>
    < link rel="stylesheet" href="/examples/css/style.css">
    < /head>
    < body>
    	< h1>Linking External Style Sheet< /h1>
    	< p>The styles of this HTML document are defined in linked style sheet.< /p>
    < /body>
    < /html>
    

    Output

    Linking External Style Sheet

    The styles of this HTML document are defined in linked style sheet.

    Importing External Style Sheets

    Another method for fetching an external style sheet is to use the @import rule. The @import declaration directs the browser to load and utilize an external style sheet.

    It can be used in two ways. The easiest method is to include it in your < head> section’s < style> element. It should be noted that additional CSS rules can still be placed in the < style> element.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    	< meta charset="UTF-8">
    < title>Importing Style Sheet in HTML< /title>
    < style type="text/css">
            @import url("/examples/css/style.css");
    p {
    color: red;
    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>
    

    Output

    The styles for this heading are defined in the imported style sheet</>

    The styles for this paragraph are defined in the embedded style sheet.

    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.