Insert CSS on HTML

Insert CSS on HTML is the section 3 of Beginner’s Guide to CSS.

When a browser reads a style sheet defined on your HTML document, it will format the document according to the information in the style rules.  There are three ways to define styles on your HTML document

  • External style sheet
  • Internal style sheet
  • Inline style

Let’s go one by one, to see what it really means.

External Style Sheet

An external style sheet is ideal when the style is applied to many pages of your whole web site. With an external style sheet, you can change the apperance of an entire Web site by changing just one of its external style sheet file.

To provide an external style sheet into your HTML document, each page must include a link to the style sheet with the tag. The tag goes inside the head element .

[code language=”html”]

Like as you write the HTML code in a text editor, this CSS code in the external style sheet file can be written and created on any text editor. This file should not contain any other languages. Just only CSS and need to be saved with the .css extension. For example MyStyleFile.css file which was referenced in the link tag above can contain the following code.

[code language=”css”] hr {color: blue;}
p {margin-left: 20px;}

Internal Style Sheet

An internal style sheet should be used when a single HTML document has a unique style. When the style is not shared with other pages. You define internal styles in the head element of an HTML page, inside the


Inline Styles

This is the laziest way to adding styles. If you are lazy and untidy worker, then this is the easiest way to add styles. But later on you will get into more trouble writing more codes.

To use inline styles, add the style attribute to the relevant HTML element. The style attribute value can contain any CSS property.

[code language="html"]

Welcome to the world of CSS with DnD.


Welcome to the world of CSS with DnD.

The above example shows how to change the color and the left margin of a paragraph writing the style inline to the element.

Multiple Styles

Sometimes there may be styles for the same selector in all of the above three ways. For example heading

element may have a style from external style sheet, also in internal style sheet as well as a inline style. So which one would effect really to the

element. Look at the following example.

In external style sheet

[code language="css"] h3 {
text-align: left;
color: red;

In internal style sheet

[code language="css"] [/code]

So this means a style can override another style according to the above guidelines.

In this section we learned about several ways to insert CSS into a HTML document. Choose which way you prefer the most. The selection should be depend on the situation. But remember not to be lazy by using always the inline styles. In the next section we're going to look at ways to adding a beautiful background to our web content.


Let’s look at how to Add CSS Background.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

One Comment

Leave a Reply

Comment Below