Home > Web Front-end > CSS Tutorial > Why use CSS?

Why use CSS?

青灯夜游
Release: 2020-11-23 14:48:04
Original
3096 people have browsed it

Using CSS, you can move most or even all of the presentation information (style) of the web page out of the HTML file to separate the style and content; this can reduce the file size, save network bandwidth, and avoid duplication of style codes. Making maintenance easier, the same content can be used in different styles to achieve different purposes.

Why use CSS?

Why use CSS?

CSS helps you separate the informational content of a document from the trivial matter of how it is presented. The little things about how a document is presented are called the style of the document.

css moves most or even all of the presentation information of a web page out of the (X) HTML file and retains them in a style sheet. Separating styles from content has the following benefits:

  • Reduce file size and save network bandwidth

  • Avoid duplication

  • Makes maintenance easier.

  • The performance information of the site is separated from the core content, allowing site designers to make various modifications to the entire website in a short period of time.

  • You can use the same content with different styles to achieve different purposes

CSS simplifies the formatting code of web pages, external style sheets It will also be saved in the cache of the browser, which speeds up the download and display speed and reduces the amount of code that needs to be uploaded (because repeated formats will only be saved once). As long as you modify the CSs style sheet file that saves the website format, you can change the style and characteristics of the entire site. It is particularly useful when modifying a site with a large number of pages. This avoids modification of web pages one by one and greatly reduces the workload.

Your website may have thousands of similar pages. Using CSS, you can store style information in a common file shared by all pages. When a user opens a web page, the user's browser loads styles for the page content alone. When a user prints a web page, you should provide different styles to ensure that the printed page is readable.

Normally, you will use HTML to describe the content of the page rather than the style, and use CSS to specify the style of the page rather than the content. Of course, there are exceptions, and HTML can also provide some methods to specify styles. For example, in HTML you can use the tag to bold text, and you can specify the background color of the page in the tag. When you use CSS, you generally avoid using HTML's styling capabilities so that all styling information is kept in one place.

Practice: Create a style sheet for an HTML document

Create a style sheet

1. Create a text file; this file is your style sheet. Name it style1.css

2. In your CSS file, copy the following line of code and copy it in, then save the file:

strong { color: red; }
Copy after login

Link your document and style sheet

1. Create another text file; this file is your document. Name it anything you like

2. In your HTML file, copy the following code and copy it in. Please quote your own style sheet in the line:

<!DOCTYPE html>
 <html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   <link rel="stylesheet" href="style1.css">
   </head>
   <body>
     <p>
       <strong>C</strong>ascading
       <strong>S</strong>tyle
       <strong>S</strong>heets
     </p>
   </body>
 </html>
Copy after login

For more programming-related knowledge, please visit: Programming Course! !

The above is the detailed content of Why use CSS?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template