HTML CSS

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

HackerThink (hackerthink.com)

Look! Styles and colors

Manipulate Text
Colors Boxes
and more...

Try it-example

HTML usage style
This example demonstrates how to format HTML with style information added to the <head> section.

This example demonstrates how to use style attributes 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 HTML 4 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 CSS files 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 attribute (background-color) was defined using the bgcolor attribute.

Try it: old HTML to set the background method

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:

Define description content for web pages:

Example

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

Now usually use the font-family (font), color (color), and font-size (font size) attributes to define the text style, instead of using the <font> tag.

HTML style example-text alignment

Use the text-align (text alignment) attribute to specify the horizontal and vertical alignment of the text:

Example

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

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

try it

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.