HTML style

This section introduces the style tag of HTML

Let us look at a piece of code first

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body style="background-color:black;">
 
 <h1 style="color: white">标题的颜色</h1>
 
 <p style="color:red">
     我是标签的颜色</p>
 </body>
 </html>

The meaning of the above code is to change the background color of the web page to black, and the text of the title The color turns to white, and the text of the paragraph turns to red.

Code running results:

## You can see that in the above code, regardless of the label <body> ,<h1> or <p>, their tags all have style. Now we know that the style attribute is used to change the style of HTML elements.

The style attribute of HTML

The role of the style attribute : Provides a common way to change the style of all HTML elements.

Styles were introduced in HTML 4 and are the new preferred way to change the style of HTML elements. HTML styles allow you to add styles directly to HTML elements using the style attribute, or indirectly by defining them in a separate style sheet (CSS file).

You can learn all about styles and CSS in our CSS tutorials.

In our HTML tutorial, we will teach you about HTML styles using the style attribute.

Deprecated tags and attributes

In HTML 4, several tags and attributes are deprecated. Deprecated means that these tags and attributes will not be supported in future versions of HTML and XHTML.

The message here is clear: please avoid using these deprecated tags and attributes!

The following tags and attributes should be avoided:

Tag	Attribute
<center>	Defines the centered content.
<font> and <basefont>	define HTML fonts.
<s> and <strike>	Define strikethrough text
<u>	Define underlined text

align Define the alignment of text bgcolor Define the background color color Define the text color

For the above tags and attributes: please use styles instead!

HTML Style Example - Background Color

The background-color attribute defines the background color for the element:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body style="background-color:yellow">
 
 </body>
 </html>

## The #style attribute obsoletes the "old" bgcolor attribute.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body bgcolor="yellow">
 </body>
 </html>

HTML style example - font, color and size

The font-family, color and font-size attributes define the elements respectively Font family, color and font size of Chinese text:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 
 <h1 style="font-family:verdana">标题</h1>
 <p style="font-family:arial;color:red;font-size:20px;">段落</p>
 
 </body>
 </html>

style attribute obsolete the old <font> tag and can no longer be used

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 
 <h1><font face="verdana">标题</font></h1>
 <p><font size="5" face="arial" color="red">段落</font></p>
 
 </body>
 </html>

## HTML Style Example - Text Alignment
The text-align attribute specifies the horizontal alignment of text within an element:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 <h1 style="text-align:center">标题</h1>
 <p>学HTML PHP 就到www.php.cn</p>
 </body>
 </html>

The style attribute obsoletes the old "align " Attributes.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 <h1 align="center">标题</h1>
 
 <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
 </body>
 </html>

Continuing Learning

new file

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body style="background-color:black;"> <h1 style="color: white">标题的颜色</h1> <p style="color:red"> 我是标签的颜色</p> </body> </html>

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

# Properties	Description

HTML style

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]