How to add css style to html? Advantages and disadvantages of inline, embedded and external-CSS Tutorial-php.cn

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

青灯夜游

Release： 2018-11-02 14:32:31

Original

16058 people have browsed it

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 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 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>

Copy after login

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 section of the page, for example:

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

Copy after login

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

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

Copy after login

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!