How to connect html to css

HTML and CSS are important components of front-end technology. Cooperation between the two can help the page achieve a better appearance and interactive experience. This article will introduce how HTML is associated with CSS to achieve page style control.

1. About HTML and CSS

HTML is the basic structure of a web page and can be understood as the skeleton of a house. It defines the content, layout, tags and links in the web page. CSS is a style sheet, which can be understood as the decoration of a house. It controls the appearance, layout and color of the web page.

2. Add CSS to HTML

There are two ways to add CSS style sheets to HTML documents, namely internal styles and external styles. They will be introduced below:

1. Internal style

Internal style is to add the

<title>My Website</title>
<style>
body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333333;
}
</style>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

In the above code, the

2. External style

External style is to put the CSS code in a separate CSS file, and then import the CSS file into the HTML document through the tag of the HTML document. For example:

<title>My Website</title>
<link>


<h1 id="Welcome-to-my-website">Welcome to my website</h1>
<p>This is the home page of my website</p>

In the above code, the tag points to a CSS file named "style.css", which the HTML code will use to control the style of the web page.

3. CSS Selector

To understand how to create CSS styles, you must first understand CSS selectors. Selectors are a way of specifying HTML elements to be styled. The following are some common CSS selectors:

1. Element selector

Element selector is a way to use the tag name as a selector. For example, the following CSS code sets the color of all paragraph elements to red:

p {
  color: red;
}

2. Class selector

The class selector assigns class names to HTML elements. These class names can Used in stylesheets to specify styles. For example, the following CSS code sets all elements with the class attribute "my-class" to a red background color and a font size of 16pt:

.my-class {
  background-color: red;
  font-size: 16pt;
}

In HTML code, you can apply this style by adding the class attribute To the element, the method is as follows:

<div>
  <p>Hello, this is a paragraph</p>
</div>

3. ID selector

The ID selector specifies a unique ID name for an HTML element. By using this in the style sheet Name, which can be styled for the ID element. For example, the following CSS code sets an element with an ID attribute value of "my-id" to a blue background and an 18pt font size:

#my-id {
  background-color: blue;
  font-size: 18pt;
}

In HTML code, you can apply this style to On the element, the method is as follows:

<div>
  <p>Hello, this is a paragraph</p>
</div>

4. Summary

Adding CSS style sheets to HTML can easily control the appearance and style of the page, which can be done in two ways: internal and external style sheets. accomplish. When writing CSS styles, you must understand CSS selectors, which are ways to specify the HTML elements to which styles should be applied. By combining these techniques, you can get beautiful and easy-to-manage pages.

The above is the detailed content of How to connect html to css. For more information, please follow other related articles on the PHP Chinese website!