HTML style

First give an example:

<html>
<body style="background-color:PowderBlue;">
<h1>改变颜色</h1>
<p style="font-family:verdana;color:red">
字体颜色变红色</p>
<p style="font-family:times;color:green">
字体颜色变绿色</p>
<p style="font-size:30px">字体高度变为30px</p>
</body>
</html>

HTML style attribute

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.

How to use CSS

CSS was started in HTML 4 to better render HTML elements The introduced .

CSS can be added to HTML in the following ways:

Inline styles - using the "style" attribute in HTML elements

Internal style sheets-in The <head> area of an HTML document uses the <style> element to contain CSS

External references - using external CSS files

The best way is to reference CSS files externally.

In the HTML tutorial on this site, we use inline CSS styles to introduce examples. This is to simplify the examples and make it easier for you to edit the code online and run the examples online.

You can learn more CSS knowledge through the CSS tutorial CSS tutorial on this site.

Inline style

Inline styles are used when special styles need to be applied to individual elements. The way to use inline styles is to use the style attribute in the relevant tag. Style properties can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML style example - background color

Background-color attribute defines the background color of an element:

<!DOCTYPE html>
<html>
<body style="background-color:pink;">
<h2 style="background-color:red;">好好学习</h2>
<p style="background-color:green;">天天向上</p>
</body>
</html>

HTML style example - font, font color, font size

We can use font-family (font ), color (color), and font-size (font size) attributes to define the font style:

Example

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Now usually use font-family (font), color (color) , and the font-size (font size) attribute to define text styles instead of using the <font> tag.

HTML style example - text alignment

Use the text-align (text alignment) attribute to specify the horizontal and vertical alignment of text:

Example

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The text alignment attribute text-align replaces the old tag <center>.

Internal style sheet

When a single file requires special styling, you can use an internal style sheet. You can define an internal style sheet via the <style> tag in the <head> section:

<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
</body>
</html>

External style sheet

When styles need to be applied to many pages, external style sheets will be the ideal choice. Using external style sheets, you can change the look of your entire site by changing one file.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Continuing Learning

new file

<!DOCTYPE html> <html> <body style="background-color:pink;"> <h2 style="background-color:red;">好好学习</h2> <p style="background-color:green;">天天向上</p> </body> </html>

submit Reset Code

Automatic operation

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]