CSS Introduction

Basic knowledge required

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

  • HTML
  • XHTML

If you wish to learn these projects first, please Home page Visit related tutorials.

CSS Overview

  • CSS stands for Cascading Style Sheets (Cascading Style SSheets)
  • Style definitionsHow to display HTML elements
  • Styles are usually stored inStyle sheetsIn
  • Adding styles to HTML 4.0 was toSolve the problem of separating content from presentation
  • External StylesheetCan greatly improve work efficiency
  • External style sheets are usually stored in CSS filesIn
  • Multiple style definitions canCascadingTo

Styles solve a common problem

HTML tags were originally designed to be used for defining 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 was completed by the browser without using any formatting tags.

As the two main browsers (Netscape and Internet Explorer) continuously add new HTML tags and attributes (such as font tags and color attributes) to the HTML specification, it has become increasingly difficult to create a website where document content is clearly independent of the document presentation layer.

To address this issue, the World Wide Web Consortium (W3C), this non-profit standardization alliance, undertook the mission of HTML standardization and created styles (Style) beyond HTML 4.0.

All mainstream browsers support cascading style sheets.

Style sheets greatly improve work efficiency

Style sheets define how HTML elements are displayed, similar to the role played by the font tag and color attributes in HTML 3.2. Styles are usually stored in external .css files. By editing a simple CSS document, external style sheets enable you to change the layout and appearance of all pages on the site simultaneously.

Due to the ability to control the styles and layouts of multiple pages simultaneously, CSS can be considered a breakthrough in the field of WEB design. As a website developer, you can define styles for each HTML element and apply them to as many pages as you wish. For a global update, simply change the style, and all elements on the website will automatically update.

Multiple styles will be cascaded into one.

Style sheets allow style information to be specified in multiple ways. Styles can be specified within a single HTML element, within the head element of an HTML page, or in an external CSS file. It is also possible to reference multiple external style sheets 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, all styles are cascaded into a new virtual stylesheet according to the following rules, with the number 4 having the highest priority.

  1. Browser Default Settings
  2. External Stylesheet
  3. Internal Stylesheet (located within the <head> tag)
  4. Inline Styles (within the HTML element)

Therefore, inline styles (within the HTML element) have the highest priority, which means they will take precedence over the following style declarations: style declarations within the <head> tag, style declarations in an external stylesheet, or style declarations in the browser (default value).