HTML style-CSS
CSS (Cascading Style Sheets) The style used to render HTML element tags.
Look! Styles and colors
How to use CSS
CSS was used in HTML 4 and was introduced to better render HTML elements.
CSS can be added to HTML in the following ways:
- Inline style-use "style" attribute in HTML elements
- Internal style sheet-use the <style> element in the <head> area of the HTML document to include CSS
- External references-use external CSS files
The best way is to reference the CSS file externally.
In the HTML tutorials on this site, we used inline CSS styles to introduce examples. This is to simplify the examples, and also makes it easier for you to edit the code online and run the examples online.
Inline style
When special styles need to be applied to individual elements, inline styles can be used. The way to use inline styles is to use style attributes in the relevant tags. Style attributes can contain any CSS attributes. 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
The background-color attribute (background-color) defines the background color of an element:
Examples
The early background-color attribute (background-color) is defined using the bgcolor attribute.
HTML style examples-font, font color, font size
We can use the font-family (font), color (color), and font-size (font size) attributes to define the font style:
Examples
Now font-family (font), color (color), and font-size (font size) attributes are often used to define text styles, instead of using the <font> tag.
HTML style example-text alignment
Use the text-align attribute to specify the horizontal and vertical alignment of the text:
The text alignment attribute text-align replaces the old label <center>.
Internal style sheet
When a particular style is needed for a single file, an internal style sheet can be used. You can define the internal style sheet through the <style> tag in the <head> section:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
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 appearance of the entire site by changing a file.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML style tags
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
Deprecated labels and attributes
In HTML 4, tags and attributes that originally supported defining HTML element styles have been deprecated. These tags will not support the new version of HTML tags.
The deprecated tags are: <font>, <center>, <strike>
Deprecated attributes: color and bgcolor.