HTML CSS


HTML Style-CSS


CSS (Cascading Style Sheets) is used to render the styles of HTML element tags.

image.png



Instance

Try It - Examples

HTML usage styles

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>

 Try It! 

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>

 Try It! 

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>

Try It! 

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

LabelDescription
<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.