Home > Article > Web Front-end > How to add css style to html? Advantages and disadvantages of inline, embedded and external

How to add css style to html? Advantages and disadvantages of inline, embedded and external

青灯夜游Original: 2018-11-02 14:32:3116038browse

htmlHow to add css style? This article will introduce you to three methods of adding CSS styles to HTML: the advantages and disadvantages of inline, embedded and external styles. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, we need to understand what are the three methods of adding css styles to html? They are:

1. Use inline CSS to apply rules for specific elements, that is: inline

2. Use internal CSS and in the 93f0f5c25f18dab9d176bd4f6de5d30e HTML document section Contains CSS rules, that is: inline

3. Link to an external file (.css file) containing all CSS rules, that is: external

Let’s introduce it in detail below Let’s talk about the implementation and advantages and disadvantages of in-line, embedded and external methods.

1. Inline CSS

Inline CSS should be used within specific HTML tags. The c9ccee2e6ea535a969eb3f532ad9fe89 attribute is used to set the style of a specific HTML tag. It is recommended not to use inline CSS as each HTML tag needs to be styled individually and managing your website can become very difficult if you only use inline CSS. However, it can be useful in certain situations. For example, in situations where you don't have access to CSS files or only need to apply styles to a single element. An example of an HTML page with inline CSS looks like this:

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

Advantages of inline CSS:

1. Very useful if you want to test and preview changes it works.

2. Very useful for quick repair.

3. Reduce HTTP requests.

Disadvantages of inline CSS:

Inline CSS must be applied to every element.

2. Inline

Inline css style is to place the css code in the 93f0f5c25f18dab9d176bd4f6de5d30e section of a specific page. Classes and IDs can be used to reference CSS code, but they are only active on that specific page. CSS styles embedded in this way are downloaded every time the page loads, which can improve loading speeds. Using inline style sheets is useful in some situations, such as sending someone a page template. It's much easier to see a preview since everything is in one page. Inline CSS should be placed between the c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 tags. An example of an internal style sheet:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Advantages of embedded CSS:

1. The style sheet only affects one page.

2. Internal style sheets can use classes and IDs.

3. No need to upload multiple files. HTML and CSS can be in the same file.

Disadvantages of embedded CSS:

1. Increase page loading time.

2. It only affects one page - useless if you want to use the same CSS on multiple documents.

3. External links

Perhaps the most convenient way to add CSS to an html page is to link it to an external file (. css file). This way, any changes you make to the external CSS files will be reflected on your website. References to external CSS files should be placed in the 93f0f5c25f18dab9d176bd4f6de5d30e section of the page, for example:

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

and style.css contains all style rules. For example:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Advantages of external CSS:

1. The size of the HTML page is smaller and the structure is clearer.

2. Faster loading speed.

3. The same .css file can be used on multiple pages.

Disadvantages of external CSS:

1. The page may not be rendered correctly before the external CSS is loaded.

Conclusion

The above is the entire content of this article, which introduces you to different methods of adding CSS to html pages. And understand the differences between inline, external and internal style sheets. You can use different methods to add css styles. I hope it will be helpful to your learning. [Recommended video learning: css tutorial]

The above is the detailed content of How to add css style to html? Advantages and disadvantages of inline, embedded and external. For more information, please follow other related articles on the PHP Chinese website!

css html 样式表 http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set underline in HTML? How to underline html textNext article：How to set underline in HTML? How to underline html text

See more

How to add css style to html? Advantages and disadvantages of inline, embedded and external

Related articles