How to add CSS
- Previous Page CSS Selectors
- Next Page CSS Comments
When the browser reads the stylesheet, it will format the HTML document based on the information in the stylesheet.
Three methods of using CSS
There are three ways to insert a stylesheet:
- External CSS
- margin-left: 20px;
- <p>This is a paragraph.</p>
External CSS
By using an external stylesheet, you can change the entire look of a website by simply modifying one file!
Each HTML page must include a reference to an external stylesheet file within the <link> element in the head section.
Example
External styles are defined within the <link> element in the <head> section of an HTML page:
Inline styles are defined in the "style" attribute of the relevant element: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <html> margin-left: 40px; <h1>This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body>
外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。
External style sheets can be written in any text editor and must be saved with a .css extension.
External .css files should not contain any HTML tags.
"mystyle.css" is as follows:
Internal styles are defined within the <style> element in the <head> section of an HTML page: "mystyle.css" } h1 { The following styles are set for the <h1> element: )。The correct format is: }
background-color: lightblue;Note: Do not add spaces between the attribute value and the unit (for example
margin-left: 20 px;)。The correct format is:
margin-left: 20px;
Internal CSS
If an HTML page has a unique style, then an internal style sheet can be used.
Example
Internal styles are defined in the <style> element within the head section.
Inline styles are defined in the "style" attribute of the relevant element: <!DOCTYPE html> <head> <style> Internal styles are defined within the <style> element in the <head> section of an HTML page: body { } h1 { background-color: linen; color: maroon; } </style> </head> <html> margin-left: 40px; <h1>This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body>
<p>This is a paragraph.</p>
Inline CSS
Inline styles (also known as inline styles) can be used to apply unique styles to a single element.
Example
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS properties.
Inline styles are defined in the "style" attribute of the relevant element: <!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body>
</html>Tip:
Inline styles lose many of the advantages of style sheets (by mixing content with presentation). Use this method with caution.
Multiple Style Sheets
If some properties are defined for the same selector (element) in different style sheets, then the value from the last read style sheet will be used.Suppose a certainExternal Style Sheet
h1 { The following styles are set for the <h1> element: }
color: navy;Then, suppose a certainInternal Style Sheet
h1 { color: orange; }
Example
If the internal style is also set for the <h1> element as follows:AfterThe <h1> element will be orange if defined in the following style:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } </style> </head>
Example
However, if the internal style is linked to an external stylesheetBeforeDefined internal styles, then the <h1> element will be dark blue:
<head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Cascading Order
When multiple styles are specified for a certain HTML element, which style will be used?
All styles in the page will be 'cascaded' into a new 'virtual' stylesheet according to the following rules:
- Inline Styles (within HTML elements)
- External and Internal Style Sheets (in the head section)
- Browser Default Styles
Therefore, inline styles have the highest priority and will override external and internal styles as well as browser default styles.
- Previous Page CSS Selectors
- Next Page CSS Comments