Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

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 to make it easier for you to edit the code and run the examples online.

You can learn more CSS knowledge through the CSS tutorial on this site.

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:


<meta charset="utf-8"> 
<title>Tutorials Byte</title> 
<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>

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:


<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:


<h1 style="text-align:center;">center-aligned title</h1>
<p>This is a paragraph。</p>

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

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:

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

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.

<link rel = "stylesheet" type = "text/css" href = "mystyle.css" >

HTML style tags

<style>define text style
<link>Define resource reference address

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.