Introduction to CSS


The Knowledge You Need

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

  • HTML / XHTML

If you want to study these subjects first, on the home page to access the tutorials.


What is CSS?

  • CSS refers to Cascading Style Sheets

  • Style defines how to display HTML elements

  • Style is typically stored in a style sheet

  • The style is added to HTML 4.0 to solve the problem of separation of content and presentation

  • External style sheets can greatly improve work efficiency

  • External style sheet is usually stored in a CSS file in

  • Multiple style definitions can be cascaded into one


CSS Examples

An HTML document can display different styles.


The Style Solves A Big Problem

HTML tags were originally designed to define the content of a document, as in the following example:

<h1>This is a heading.</h1>
<p>This is a paragraph.</p>

The style sheet defines how to display HTML elements, just like the font tags and color attributes in HTML play the role. The style is usually saved in an external .css file. We only need to edit a simple CSS document to change the layout and appearance of all pages.

CSS style sheets greatly improve work efficiency. By editing a simple CSS document, external style sheets give you the ability to change the layout and appearance of all pages in the site at the same time.

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

Modern browsers all support CSS.


Apply The Same Style to Multiple Pages

A separate .CSS file (this file does not belong to any page file) usually saved externally can use the same CSS style sheet in multiple pages. By referencing the .CSS file in any page file, you can set up multiple pages with consistent styles.

Style Cascade

Style cascading is to set the same style multiple times on an element, which will use the attribute value set last time.

Style stacking priority

When multiple styles are defined for the same HTML element, which style should be used?

Generally speaking, all styles will be stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest priority.

  1. Browser default settings

  2. External style sheet

  3. Internal style sheet (located <head> internal label)

  4. Inline style (inside HTML element)

Therefore, the (#4.) inline style (inside the HTML element) has the highest priority, which means it will take precedence over the following style declarations: style declarations in tags, style declarations in external style sheets, or style declarations in the browser (Default value).