Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML Style-CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
CSS can be added to HTML in the following ways:

  • Inline - using the style attribute in HTML elements
  • Internal - using the <style> element in the <head> section
  • External - using an external CSS file

The preferred way to add CSS to HTML, is to create CSS files.
However, in this HTML tutorial we will introduce you to inline styling. This is done in order to simplify the examples. It also makes it easier for you to edit the code and try it yourself.

Inline Styles

An inline style can be used if a unique style is to be applied on a particular page.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

HTML Style Example - Background Color

The background-color property defines the background color for an element:


<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Run


HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:


<!DOCTYPE html>
<html><!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

HTML Style Example - Text Alignment

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:


<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:


<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Run

External Style Sheet

An external style sheet is ideal when the style needs to be applied to multiple pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML Style Tags
Tag Description
<style> Defines style information for a document
<links> Defines the relationship between a document and an external resource


Related Videos