CSS Creation
When a style sheet is read, the browser will format the HTML document according to it.
How to insert a style sheet
There are three ways to insert a style sheet:
External style sheet
Internal style sheet
Inline style
##External style sheet
tag to link to the style sheet. The tag is in the head (of the document):
The browser will read the style declaration from the file mystyle.css and format it according to it document. External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheets should be saved with a .css extension. Here is an example of a style sheet file:<head><link rel="stylesheet" type="text/css" href="mystyle .css">
</head>
hr {color:sienna;}p {margin-left:20px;}
body {background-image:url ("../style/images/back40.gif");}
Do not leave a space between the attribute value and the unit. If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work in IE 6, but not in Mozilla/Firefox or Netscape.
Internal style sheets
When a single document requires special styling, an internal style sheet should be used. You can define an internal style sheet at the top of the document using the <style> tag, like this:The tag defines an internal style sheet at the top of the document, like this:
#<head><style>
hr { color:sienna;}
p {margin-left:20px;}
body {background-image:url("../style/images/back40.gif");}
</style> ;
</head>
Inline style
Because the presentation and content are mixed At the same time, inline styles lose many of the advantages of style sheets. Use this approach with caution, for example when the style only needs to be applied once to an element. To use inline styles, you need to use the style attribute within the relevant tag. The Style property can contain any CSS property. This example shows how to change the color and left margin of a paragraph:<p style="color:sienna;margin-left:20px">This is a paragraph</p>
Priority
If in an external style sheet,Internal style sheet (located inside the tag),Inline style (inside the HTML element), if the style of the same HTML element is set, the style of the inline style (inside the HTML element) will take effect
So their priority is
Inline styles (inside HTML elements) are the highest
The second is the internal style sheet (located inside the tag)
The last is the external Style sheet