A brief introduction to the three methods introduced in CSS

This article introduces to you about the introduction of CSS in the three ways of simple introduction, there is a certain reference value, the need for friends can refer to, I hope to help you.

There are three ways to introduce CSS: internal style sheet, inline style (inline style) table, external style sheet, and, of course, multiple styles

inline style

<p style= "color:red;font-size:20px" > Inline style sheet </p >

Inline style unloads the style directly within the HTML code line, generally only used when the style is applied only on the current element, and in other cases try not to use it.

Internal style sheet

<style>        p {            color:blue;            font-size:20px        }    </style>

The internal style sheet is usually written in the HTML header and is enclosed in a <style> tag within the

External style sheet

<link rel= "stylesheet" href= "Css/googlefonts.css" >

An external style sheet is a separate style that is written to a CSS file and referenced in the header. When using an external style sheet, be aware of the problem with style overrides if multiple styles are present.

Multiple styles

When using multiple styles, multiple styles will overlap one, and in general more than one style sheet will overlap according to the following rules, where 4 is the highest weight

1. Browser default settings

2. External style sheet

3. Internal style sheet (inside head tag)

4. Inline style (inside HTML elements)

Multi-style precedence order

For multiple styles of the same element, the priority order is the following, with 7 being the highest priority (!important rule exception, but generally not used):

1. Universal Selector (*)

2. Element (type) Selector

3. Class Selector

4. Property Selector

5. Pseudo class

6. ID Selector

7. inline style