Home > Article > Web Front-end > Where to put css code in html

Where to put css code in html

青灯夜游Original: 2021-05-21 13:53:596193browse

In HTML, CSS code can directly use the style attribute and put it in the HTML tag. The syntax is "e79d9b40fb3de9338049c4093820c299content313ec86217575972f09783f4ac3a87d2 "; You can also use the style tag to write the css code in the head tag of the HTML document.

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

In html, the placement position of css code

##1. Directly use the style attribute and place it in the html tag

The basic syntax format is as follows:

<标签名 style="属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...."> 内容</标签名>

In the syntax, style is the attribute of the tag. In fact, any HTML tag has the style attribute, which is used to set the inline style. The writing specifications of attributes and values are the same as CSS style rules. Inline style only affects the tag where it is located and the subtags nested in it.

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. Use the style tag to write the css code in the head tag of the HTML document

The basic syntax format is as follows:

<head>
<style type="text/CSS">
    选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;....}
</style>
</head>

In the syntax, the style tag is generally located after the title tag in the head tag, and can also be placed anywhere in the HTML document.

type="text/CSS" can be omitted in HTML5, and it is more in line with the specifications, so this place can be written or omitted.

Example:

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

(Learning video sharing:

css video tutorial)

The above is the detailed content of Where to put css code in html. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 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：What selector should be used to select the sub-element in css?Next article：What selector should be used to select the sub-element in css?

See more

Where to put css code in html

Related articles