CSS Basic Tutorial

Basic knowledge required

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

  • HTML
  • XHTML

If you want to learn these projects first, please Home page Access related tutorials.

CSS Overview
  • CSS stands for Cascading Style Sheets (Cascading Style SSheets)
  • Style definitionHow to display HTML elements
  • Styles are usually stored inStyle sheetsIn
  • Adding styles to HTML 4.0 was toSolve the problem of separation of content and presentation
  • External Style SheetsCan greatly improve work efficiency
  • External style sheets are usually stored in CSS filesIn
  • Multiple style definitions canCascadingFor a

Styles solve a common problem

HTML tags were originally designed to define document content. By using tags such as <h1>, <p>, <table>, HTML was originally intended to express information such as 'This is a title', 'This is a paragraph', 'This is a table'. The layout of the document was expected to be completed by the browser without using any formatting tags.

As two major browsers (Netscape and Internet Explorer) continuously add new HTML tags and attributes (such as font tags and color properties) to the HTML specification, it is becoming increasingly difficult to create a site where the document content is clearly independent of the document's presentation layer.

To solve this problem, the World Wide Web Consortium (W3C), this non-profit standardization alliance, undertook the mission of HTML standardization and created STYLES (style) outside of HTML 4.0.

All mainstream browsers support Cascading Style Sheets.

Style sheets greatly improve work efficiency

The stylesheet defines how HTML elements are displayed. Font tags and color properties in styles of HTML 3.2 are usually stored in external .css files. By simply editing a simple CSS document, external style sheets give you the ability to change the appearance of the layout of all pages on the site at the same time.

Since CSS allows for the simultaneous control of the styles and layout of multiple pages, it 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 global transformations, simply change the style, and all elements on the website will be automatically updated.

Multiple styles are 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 even possible to reference multiple external style sheets within a single 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 style sheet according to the following rules, with the number 4 having the highest priority.

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

Therefore, inline styles (within HTML elements) 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).