How to add CSS

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>

Try It Yourself

外部样式表可以在任何文本编辑器中编写,并且必须以 .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 examplemargin-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>

Try It Yourself

<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>

Try It Yourself

</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>

Try It Yourself

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>

Try It Yourself

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:

  1. Inline Styles (within HTML elements)
  2. External and Internal Style Sheets (in the head section)
  3. Browser Default Styles

Therefore, inline styles have the highest priority and will override external and internal styles as well as browser default styles.

Try It Yourself