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>
Next Section