Where to put css code in html-Front-end Q&A-php.cn

Where to put css code in html

青灯夜游

Release： 2023-01-06 11:14:51

Original

6186 people have browsed it

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

Where to put css code in html

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;...."> 内容</标签名>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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