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:

Internal style Internal style is to add the tag between the and tags in the HTML document, and then add the Write CSS style code within the tag. For example:

My Website body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333333; } Welcome to my website This is the home page of my website

In the above code, the tag contains CSS styles, where the "body" tag controls the background color and font of the web page, and the "h1" tag controls the title color.

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:

My Website Welcome to my website This is the home page of my website

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:

Hello, this is a paragraph

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:

Hello, this is a paragraph

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.