Home > Article > Web Front-end > How to add css style to html?

How to add css style to html?

青灯夜游Original: 2019-06-01 10:16:2926550browse

html There are three ways to add css styles, namely inline (using the style attribute, used within a specific HTML tag), and inline (the style tag puts the css code in a specific in the head part of the page), external linking (using the link tag to link external css files to HTML).

1. Inline style

Use the style attribute to set CSS styles within specific HTML tags.

It is recommended not to use inline CSS because each HTML tag needs to be styled separately. If you only use inline CSS, it may become very difficult to manage the website. 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 is as follows:

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

2. Inline

Inline css style is to place css code on a specific page in the 93f0f5c25f18dab9d176bd4f6de5d30e section. Inline CSS needs to be placed between the c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 tags.

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.

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>

3. External link

External link is to use the link tag element to add an external CSS file ( .css file) is referenced into the HTML page, and the reference needs to be placed in the 93f0f5c25f18dab9d176bd4f6de5d30e section of the page.

This is the most convenient way to add CSS to html pages. This way, any changes you make to the external CSS files will be reflected on your website.

An example of an external style sheet:

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

Most websites today use external style sheets, which are styles that are written in separate documents and then attached to various web documents. External style sheets affect any files they are connected to, meaning if you have a 20 page website and every page uses the same style sheet, when changes need to be made you can simply edit the style sheet to complete those pages. Makes long-term site management easier.

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

css html 样式表

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 import js files into HTML?Next article：How to import js files into HTML?

See more

How to add css style to html?

Related articles