HTML style-CSS
CSS (Cascading Style Sheets) is used to render the style of HTML element tags.
Look! Styles and colors
Manipulate Text
Colors, Boxes
And more…
How to use CSS
CSS was introduced in HTML 4 to better render HTML elements
CSS can be added to HTML in the following ways:
Inline style-use the “style” attribute in the HTML element
Internal stylesheet-in the HTML document header
<head>area use<style>element to contain CSSExternal references-use external CSS files
The best way is to reference the CSS file externally.
In the HTML tutorial on this site, we use the inline CSS style to introduce the example, which is to simplify the example and make it easier for you to edit the code and run the example online.
You can learn more about CSS through the CSS tutorial on this site.
Inline style
Inline styles can be used when special styles need to be applied to individual elements. The way to use inline styles is to use style attributes in related tags. 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 instance-background color
The background color attribute (background-color) defines the background color of an element:
Example
<bodystyle="background-color:yellow;"><h2style="background-color:red;">This is a title</h2><pstyle="background-color:green;">This is a paragraph.</p></body>
The early background color attribute (background-color) is defined by using the bgcolor property definition.
HTML style example-font, font color, font size
We can use the font-family, color, and font-sizeproperties to define the font style:
Example
<h1style="font-family:verdana;">A title</h1><pstyle="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
Instead of using the < font > tag, font-family, color, and font-size attributes are now commonly used to define text styles.
HTML style instance-text alignment
Use text-align the (text alignment) property specifies the horizontal and vertical alignment of the text:
Example
<h1style="text-align:center;">Centered titles</h1><p>This is a paragraph.</p>
Text alignment attribute text-align replace the old label <center> .
Internal style sheet
When a single file requires a special style, you can use an internal style sheet. You can do it in the <head> partially pass <style> the tag defines the internal style sheet:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External style sheet
External stylesheets are ideal when styles need to be applied to many pages.Using external stylesheets, 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 label
Label |
Description |
|---|---|
< style > |
Define text style |
< link > |
Define the resource reference address |
Deprecated tags 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 labels that are not recommended for use are:<font> , <center> , <strike>
Properties that are not recommended: color and bgcolor .