HTML CSS
HTML Style-CSS
CSS (Cascading Style Sheets) is used to render the styles of HTML element tags.
Try It - Examples
This example demonstrates how to format HTML with style information added to the <head> section.
This example demonstrates how to use style attribute to make a link without underline
How to use the style attribute to make a link without underline.
A link to an external style sheet
This example demonstrates how to tag a link to an external style sheet.
How to Use CSS
CSS was used in HTML4 and was introduced for better rendering of HTML elements.
CSS can be added to HTML in the following ways:
Inline style-use the "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 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 on this site .
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 related 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>
To learn more styles, please visit the CSS tutorial .
HTML Style Example - Background Color
The background-color attribute defines the background color of an element:
Example
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a title</h2>
<p style="background-color:green;">This is a paragraph</p>
</body>
The early background-color property (background-color) was defined using the bgcolor property.
Try it: Previous version of bgcolor to set the background color in HTML .
HTML Style Example - 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:
Example
<h1 style="font-family:verdana;">This is a title</h1>
<p style="font-family:arial;color:red;font-size:20px;">This is a paragraph</p>
Now usually use font-family, color, and font-size properties to define the text style, 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:
Example
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph</p>
The text-align attribute text-align replaces the old <center> tag.
Internal Style Sheet
When a single file requires a special style, the 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, an external style sheet will be the ideal choice. Using an external style sheet, you can change the appearance of the entire site by changing one file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML Style Tags
| Label | Description |
|---|---|
| <style> | Define text style |
| <link> | Define resource reference address |
Deprecated Tags and Attributes
In HTML 4, the tags and attributes that originally supported the definition of 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.