What kinds of CSS styles are there? Three ways to summarize CSS style sheets (with code)

What are the different types of CSS styles? CSS style code inserted in the form of basic can be divided into the following three kinds: inline, embedded and external three, these three styles are priority, their priority is: inline > Embedded > External, let's look at the CSS three style types of specific content and code.

Note : embedded > External has a premise: the placement of the embedded CSS style must be behind the exterior. As is the case with the right code editor, <link href= "Style.css" ...> code in front of <style type= "Text/css" >...</style> Code (also written in the actual development). Interested partners can try, change them in order, and see if their priority changes.

In fact, in general, it is-the nearest principle (the higher the priority level from the Set element).

However, note that the precedence summarized above is a precondition: inline, inline, external style sheet CSS style is in the case of the same weight value.

1. CSS Inline style sheet

CSS style sheet is to write CSS code directly in the existing HTML tags, such as the following code:

<p style= "Color:red" > here the text is red. </p>

Note that it is wrong to write in the start tag of the element:

<p> here the text is red. </p style= "color:red" >

and CSS style code to write in style= "" double quotes, if there are multiple CSS style code settings can be written together, separated by semicolons. The following code:

<p style= "color:red;font-size:12px" > here the text is red. </p>

<! DOCTYPE html>
2. CSS Embedded style sheet

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags. The following code is implemented to set the text in three <span> tags to red:

<style type= "Text/css" >span{color:red;} </style>
Embedded CSS styles must be written between <style></style>, and in general the embedded CSS style is written between 
<! DOCTYPE html>
3. CSS external style sheet

An external CSS style (also known as an inline) is to write the CSS code in a separate external file, with the CSS style file " .css " as the extension, within 
<link href="base.css" rel="stylesheet" type="text/css" />

Attention:

1. CSS style file names are named with meaningful English letters, such as MAIN.CSS.

2, rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.

3, <link> label location is generally written in the 
Index.html

<! DOCTYPE html>
Style.css

span{   color:red;   font-size:20px;}
Related articles recommended:

CSS folding Style (1)-Three ways to use CSS styles

HTML CSS style sheet

Precedence of styles in CSS style sheets