The style tag in HTML
In this article, I will show you how to use the style tag in HTML, this is a tag used to write CSS code for HTML tags, or specify information to CSS files for web pages.
When it comes to the style tag, you must definitely think of CSS. But because we haven't learned yet, let's temporarily run the examples in the article to see the results. Later, when you move to the series of CSS lessons, you will learn more carefully.
Mục lục
What is the style tag in HTML?
Style is a normal HTML tag, it is used to define the scope of CSS code for the browser to compile. All the code inside the style tag is not displayed on the interface, it just compiles and runs in the background in the browser.
Example : Use the style tag to specify the display text color of the p tag and the h1 tag.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <p>this is a test.</p> </body> </html>As you can see, inside the style tag I have defined two CSS properties:
<style> h1 {color:red;} p {color:blue;} </style>Use the style tag to format the interface
For you to understand better, I will do a very simple example, which is divided into two cases as follows:
<!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html>Result
Chào mừng bạn đến với website học lập trình online web888.vn <!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> p{ background: white; color: black; text-align: center; font-size: 30px; } </style> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html> Chào mừng bạn đến với website học lập trình online web888.vnRun the two examples above and you will see the difference between them. The first example has a white background and black text, the second example has a blue background and white text. Regarding the HTML structure, there is no difference, but in example 2, I have added a CSS code as follows:
<style type="text/css"> p{ background: blue; color: white; text-align: center; font-size: 30px; } </style>So, to add CSS to the HTML tag, we put it inside the style tag. As for the CSS syntax, you can read the article CSS syntax to better understand.
So you already understand the meaning of the HTML style tag, right? Later we will practice writing CSS code on this style tag itself. See you in the next post.
