leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML Styles – CSS

Estimated reading: 3 minutes 27 views

CSS (Cascading Style Sheets) are used to render styles for HTML element tags.

How to use CSS

CSS was introduced in HTML 4 for better rendering of HTML elements.

CSS can be added to HTML in the following ways:

  • Inline styles – use the “style” attribute on HTML elements
  • Internal style sheets – 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 the examples, this is to simplify the examples and make it easier for you to edit the code online and run the examples online.


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 style attributes in the relevant 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 Example – Background Color

The background-color property 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.


HTML style example – font, font color, font size

We can use the font-family, color, and font-size properties to define the style of the font:

example

<h1 style="font-family:verdana;">A title</h1>
<p style="font-family:arial; color:red; font-size:20px;">A paragraph. </p>

It is now common to use the font-family, color, and font-size attributes to define text styles instead of using the <font> tag.


HTML Style Example – Text Alignment

Use the text-align property to specify the horizontal and vertical alignment of text:

example

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

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

try it


Internal style sheet

Internal style sheets can be used when individual files require specific styles. You can define internal style sheets in the <head> section via the <style> tag:

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

        p {
            color: blue;
        }
    </style>
</head>

external style sheet

External style sheets are ideal when styles need to be applied to many pages. 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>

HTML style tags

标签描述
<style>定义文本样式
<link>定义资源引用地址

Deprecated tags and attributes

In HTML 4, the tags and attributes that originally supported styling HTML elements have been deprecated. These tags will not support the new version of HTML tags.

Deprecated tags are: <font>, <center>, <strike>

Deprecated properties: color and bgcolor.

Leave a Comment

CONTENTS