CSS Self-Study notes (3): Use of CSS style sheets

When a browser reads a stylesheet, the browser formats the HTML document according to the style sheet, showing a variety of pages.

There are three ways that you want your browser to read the stylesheet:

1. External style sheet

An external style sheet can be understood as. CSS file. An external style sheet is an ideal choice when multiple pages use the same style.

With an external style sheet, you can change the appearance of the entire site by changing a file, without having to adjust the HTML file, especially when multiple pages use the same style.

Each HTML page uses a label <link> to connect an external style sheet:

link rel= "stylesheet" type= "Text/css" href= " mystyle.css />
The browser reads the style declaration from the style sheet mystyle.css and formats the HTML document.
Note: There is no space between the property value and the unit in the style sheet.
2. Internal style sheet
An internal style sheet is where you place the definition of a style at the beginning of an HTML document.
An internal style is a good choice when a single HTML document requires a special style.
You can use the internal style in the <style> tab.
<style type="text/css">  hr {color: #3F0;}  p {margin-left:100px;}  Body {background-image:url ("Bg.gif");} </style> 
3. Inline style
An inline style sheet is where you place the definition of a style in the HTML tag.
With inline styles, you need to use style attributes (style) within the associated HTML tags, and the style property can contain any CSS properties.
style= "COLOR: #3F0; margin-left:100px ">this is a paragraph</p>
This is the inline style of the label p, and the effect is
Note: inline styles can damage many of the advantages of a style sheet.
4. Problems with multiple styles
If the same selector defines different properties in different style sheets, this is a property value that inherits from the style sheet's type.
The inner style inherits the properties of the external style.
Example: properties defined by an external style
h3 {  color: #F00;;  left  8pt ;  }
Internal style definition Properties
h3 {  right ;   20pt ;  }
When displayed on a browser
You can see that the inner style inherits the properties of the external style.
Once again, the inline style is defined