Hello everyone, I am Lao Zhao from the front end. Today we will explain how to use CSS styles to beautify HTML elements. CSS is an essential part of front-end development. Through CSS, various styles can be added to the webpage to make the webpage look more beautiful and comfortable.
In the previous courses, we have learned the basic syntax of CSS and common CSS styles. Today we will learn how to use CSS styles to beautify HTML elements.
Suppose we have a simple HTML page that contains a paragraph and a button element. Now we want to change their appearance with CSS styles.
We can first change the font of the text on the page by using the font-family attribute. For example, we can set the font of a paragraph to "Arial":
CSS
p{ font-family: Arial; }Next, we can use the color property to change the color of the text. For example, we can set the text color of a paragraph to red:
CSS
p{ font-family: Arial; color: red; }Similarly, we can also use the background-color property to change the background color of an element. For example, we can set the background color of a button to blue:
CSS
button{ background-color: blue; }In addition to basic styles, we can also use CSS styles to change the size, position, and shape of elements. For example, we can use the width and height properties to change the size of an element, the margin and padding properties to change the inner and outer spacing of an element, and the border property to change an element's border.
Next, let's look at a complete case. Suppose we have a login containing