How to write external css

With the continuous development of web design and development technology, CSS (Cascading Style Sheets) has become an important web design language. Through CSS, we can easily control the style of web pages to achieve better web design. In actual development, we usually put CSS files externally. So, let’s discuss how to write external CSS.

1. Create a CSS file

First, we need to create a CSS folder in the root directory of the website and create a CSS file in it. It is recommended to use meaningful names for file names to facilitate management by yourself and others.

2. Connect CSS files

In HTML files, we need to reference CSS styles by connecting CSS files. We can use external linking (link) or inline style (style).

1. External linking method

<link rel="stylesheet" href="样式文件路径">

Among them, the rel attribute refers to the relationship between the style sheet and the document, usually "stylesheet" is used to represent the style sheet; the href attribute refers to The address of the style sheet. The style file path is relative to the HTML file, and can be an absolute path or a relative path.

For example:

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

2. Embedded style method

<style type="text/css">
    样式内容
</style>

The type attribute refers to the type of style file, usually "text/css" ;The style content is a piece of CSS code.

For example:

<style type="text/css">
    body {
        background-color: gray;
    }
</style>

3. Writing CSS styles

The way of writing CSS styles in CSS files is similar to the way of using style tags to write CSS styles in HTML files. We can use the CSS selector to select the part that needs to be modified, and then use CSS properties and attribute values ​​to set the style.

For example:

body {
    background-color: gray;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

In the above code, we select the body element of the entire page and set its background color, font size and font style.

4. Advantages

Using external CSS files can bring the following benefits:

1. Separate structure and style. Putting style rules in a separate file allows programmers to focus on structuring code and formatting styles.
2. Differentiated presentation. Different websites/pages can share a type of style file to maintain a unified look and feel on the website.
3. Reduce duplication of work. If multiple pages have the same style, we only need to define it once in one CSS file.
4. Improve file reusability. CSS files can be shared among multiple Web pages, improving the reusability of CSS files.

5. Summary

The above is the writing method and advantages of external CSS. Of course, in actual development, we need to pay attention to the spelling of the file path and file name to avoid errors such as 404. In addition, we must also adapt to the characteristics of adaptive layout to write CSS styles. Through continuous practice and learning, we can continuously improve code quality, optimize user experience, and achieve better web design.

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