How to insert css style into html-Front-end Q&A-php.cn

How to insert css style into html

青灯夜游

Release： 2023-01-11 09:20:09

Original

14816 people have browsed it

How to insert css style in html: 1. Use the style attribute to insert CSS code in a specific HTML tag; 2. Put the CSS code in the style tag pair in the head part of the document; 3. Put the CSS code in Into the external CSS file, use the link tag to introduce it into the html document.

How to insert css style into html

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

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:

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

Copy after login

2. Inline

Inline css style is to place css code on a specific page in the section. Inline CSS needs to be placed between the 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.

<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

3. External linkage

External linkage is to use the link tag element to refer to the external CSS file (.css file) into the HTML page. The reference needs to be placed In the section of the page.

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

Copy after login

Explanation of each attribute:

The href attribute sets the address of the external style sheet file, which can be a relative address or an absolute address.
The rel attribute defines the associated document, which here indicates that the associated document is a style sheet.
The type attribute defines the type of imported file. Like the style element, text/css indicates a CSS text file.

Generally when defining the tag, three basic attributes should be defined, among which href is a must-set attribute.

You can also add the title attribute in the link element to set the title of the optional style sheet. That is, when a web document imports multiple style sheets, you can select the style sheet file to be applied through the title attribute value.

Tip: In the Firefox browser, you can select the "View --> Page Style" option in the menu, and then the title attribute value will be displayed in the submenu. Just select a different title attribute value. Selectively apply required style sheet files. IE browser does not support this feature.

In addition, the title attribute is related to the rel attribute. According to the W3C organization's plan, future web documents will use multiple elements to import different external files, such as style sheet files, script files, and themes. files, and can even include other customized supplementary files. After importing so many files of different types and names, you can use the title attribute to select. At this time, the role of the rel attribute becomes apparent. It can specify the imported file type to be applied when the web page file is initially displayed. Currently, it can only be associated with CSS. Style sheet type.

External styles are the best solution for CSS applications. A style sheet file can be referenced by multiple web pages. At the same time, a web page file can import multiple style sheets by repeatedly using the link element to import different style sheets. document.

Related recommendations: "css video tutorial"

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