Introduction to CSS


CSS refers to Cascading Style Sheets, which is used to define how to display HTML elements. CSS styles are usually stored in style sheets, which can solve the problem of separation of content and presentation. External style sheets can greatly improve work efficiency.

Knowledge you need

Before continuing, you need to have a basic understanding of the following knowledge:

  • HTML / XHTML

If you wish to learn these projects first, please visit the relevant tutorials on Homepage. .

What is CSS?

  • CSS refers to cascading style sheets (Cascading Style Sheets)

  • Style DefinitionHow to display HTML elements

  • Styles are usually stored in styles In the table

  • styles are added to HTML 4.0 to solve the problem of separation of content and presentation

  • External style sheetscan greatly improve work efficiency

  • External style sheets are usually stored in CSS files

  • Multiple style definitions can be cascaded into one

##Style solves a common problem

HTML tags Originally designed to define document content. By using tags like <h1>, <p>, <table>, the original intention of HTML was to express information such as "This is a title", "This is a paragraph", "This is a table". At the same time, the document layout is completed by the browser without using any formatting tags.

Because the two major browsers (Netscape and Internet Explorer) continue to add new HTML tags and attributes (such as font tags and color attributes) to the HTML specification, create document content that is clearly independent of the document The presentation layer of a site is becoming increasingly difficult.

In order to solve this problem, the World Wide Web Consortium (W3C), a non-profit standardization alliance, has taken on the mission of standardizing HTML and created styles outside of HTML 4.0.

All major contemporary browsers support Cascading Style Sheets (CSS).

CSS style sheets greatly improve work efficiency

Style sheets define how HTML elements are displayed, just like the font tag and color attributes of HTML 3.2. Styles are usually saved in external .css files. External style sheets give you the ability to change the layout and appearance of all pages in your site at the same time by simply editing a simple CSS document.

CSS can be called a breakthrough in the field of WEB design because it allows the style and layout of multiple pages to be controlled at the same time. As a website developer, you can define styles for each HTML element and apply them to as many pages as you wish. To make a global update, simply change the style and all elements in the site will update automatically.

Multiple styles will be cascaded into a

Style sheet allows style information to be specified in multiple ways. Styles can be specified in individual HTML elements, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external stylesheets within the same HTML document.

Cascading order

When the same HTML element is defined by more than one style, which style will be used?

Generally speaking, all styles will be cascaded in a new virtual style sheet according to the following rules, with number 4 having the highest priority.

Browser default settings

  1. External style sheet

  2. Internal style sheet (located inside the <head> tag)

  3. Inline styles (inside HTML elements)

Therefore, inline styles (inside HTML elements) have the highest priority, This means that it will take precedence over style declarations in the <head> tag, in external style sheets, or in the browser (the default).