How to set css style

CSS styles are a language used to format web content. CSS styles are used to set text, color, background color, alignment, spacing, borders and other web design-related styles. In many cases, setting CSS styles can make a website more modern, beautiful, and easier to use. Here is some basic information on how to style CSS.

1. Inline style

Inline style is a way to write CSS styles directly on HTML elements. This approach is useful for individual elements and can be achieved by using the "style" attribute in the tag. For example, the following code sets the text color and font size of a paragraph using inline CSS styles:

This is a paragraph .

In this code, the "style" attribute sets the following style:

“color: red;”设置颜色为红色
“font-size: 18px;”设置字体大小为 18 像素。

2. Embedded style

Embedded style is the CSS A way of writing styles in the "head" tag of an HTML file. This method allows the same style to be used throughout the document, which is useful for larger websites. Here is an example of an embedded CSS style:

This is a paragraph.

In this code, the "p" selection The tool applies the style to all "p" elements, including the paragraph above. These two CSS styles set the text color to blue and the font size to 16 pixels.

3. External style sheet

External style sheet is a way to save CSS styles in a separate CSS file. This approach is useful when multiple web pages use the same style, and makes the HTML file easier to read and maintain. Here is an example of an external CSS stylesheet:

In a separate "style.css" file you can set multiple styles like this:

p {
color : green;
font-size: 14px;
}

h1 {
color: blue;
font-size: 32px;
}

In the HTML file, you would link to this stylesheet:

Now, all "p" elements will get the specified style (text color green, font size 14 pixels), and all "h1" elements will get another One style (text color blue, font size 32 pixels).

4. Selector

CSS style selector determines which HTML elements apply which styles. Selectors can select elements based on element type, class, ID, attributes, etc. Here are some common selector formats:

元素类型选择器：直接选择元素的名称。例如，“p”选择器将选择所有段落。
类选择器：“.”加上一个类名称。例如，“.my-class”选择器将选择具有名称“my-class”的所有元素。
ID 选择器：“#”加上一个 ID 名称。例如，“#my-id”选择器将选择具有 ID 名称“my-id”的所有元素。
属性选择器：“[]”加上一个属性名称和一个可选的属性值。例如，“[href]”选择器将选择具有任何 href 属性的元素，而“[href='https://example.com']”选择器将选择具有 href 设置为“https://example.com” 的元素。

Selectors are used with CSS styles and placed within curly brackets. Here is an example where the selector applies the style to all "p" elements:

p {
color: red;
font-size: 16px;
}

The above is the basic knowledge of setting CSS styles. Once you understand these concepts, you'll be able to start exploring more advanced CSS applications like responsive design, animation, and more. No matter what type of website you're creating, it's helpful to know how to style CSS.

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