1. CSS style priority
You can use Cascading Style Sheets (CSS) to control the appearance of webpages. With CSS, You can precisely locate the elements on the web page and set the appearance of these elements.
CSS can be external, internal, or embedded relative to a webpage. A webpage can also use one or more of these types of CSS.
Generally, the styles defined in the three types of CSS have the following priorities:
The style defined in Embedded CSS has the highest priority,
The style priority defined in the internal CSS is second,
The style priorities defined in external CSS are the lowest.
(1) external CSS styles
When you need to apply the same style to some or all webpages on the website, you can use an external style sheet. By defining styles in one or more external style sheets and applying them to webpages, you can ensure that the entire website has a uniform appearance. If you decide to change a style, you only need to make one change in the external CSS. The changes are automatically reflected in all webpages that reference the style and CSS.
External CSS is included in the. CSS file, such as global.css. The syntax of external CSS is the same as that of internal CSS (see the example in the next section of this topic). The only difference is that you do not need to add the <style> mark before and after the style defined in external CSS.
(2) Internal CSS
When you only need to define a style for the current webpage or replace the style defined in the external CSS appended to the current webpage, you can use internal CSS (sometimes referred to as "embedded CSS ").
The internal CSS is included in the
<style type="text/css">li { position:absolute;}</style>
(3) cascading CSS
You can use an embedded style when you need to apply the Cascading Style Sheet attribute to each element on the webpage and do not need to reuse the style. Embedded styles are defined in the starting tag of HTML elements in webpages.
<P style = "border: 1px; solid; red;"> Mao </P>