HTML Styles Element

In this Tutiongo tutorial you will learn how to add style rules to HTML page.

HTML Styles

HTML is a quite limited when it comes to the presentation in a web page. It was originally designed as a simple way of presenting your information. CSS (Cascading Style Sheets) was introduced in December 1996 in the World Wide Web Consortium (W3C) to provide a better way to presentation using HTML elements.

With CSS, it becomes very easy to Design specify the things like, size and typeface for the fonts, colors for the text and backgrounds etc, alignment of the text , images also you can change amount of space between the elements, border, outlines and text decoration for the elements, and lots of other styling properties.

Adding Styles to HTML Elements

Style information can either be attached as a various ways such as separate document or embedded in the HTML Web page. These are the three methods for implementing styling information to an HTML Web pages.

  • Inline styles - If You using the style attribute in the HTML start tag.
  • Internal style - If You using the <style> element in the middle head section of the document.
  • External style sheet — If You using the <link> element, then you have pointing to an external CSS files.

Inline Styles

Inline styles are used to apply the unique style rules to particular element, by putting the CSS rules directly into the start tag like <p style="color:red;"> . It can be attached to an element using the style attribute as well.

The style attribute includes a bunch of CSS property and value pairs. Each property of css: value pair is separated by a semicolon just like (;), just as you would write into an Internal or external style sheet. But it needs to be all in one line i.e. note: no line break after the semicolon.

The following some sample example how to set the font-size and color  of the text:

Inline Styles Example:

<h1 style="color:red; font-size:30px;"> This is a tutiongo paragraph. </p>
<p style="color:green;font-size:18px;">This is a tutiongo paragraph. </p>
<div > This is tutiongo paragraph </div>

Try it Yourself

Using the inline styles considered as a bad practice and it can increase you page loading time. Because style rules are embedded directly inside the html tag in your web page, it causes the presentation to become mixed up with the content of the web page, which makes updating or maintaining a website very very difficult.

If you want to learn about the various CSS properties in depth, please check out our CSS  tutorial .

Internal style

Internal  or embedded style  sheets only affect the web page they are embedded in.

Internal style sheets are defined in the <head> section of an HTML web page or document using the <style> tag. You can add any number of <style> elements inside the <head> section.

The following some sample how style rules are embedded inside a web page.

Internal Styles Example:

        body { background-color: YellowGreen; }
h1 { color: blue; }
        p { color: red; }

Try it Yourself

External Style Sheets

An external style sheet is ideal it used when the style is applied to many pages with one style sheet.

An external style sheet holds many style rules in a separate document that can link from any HTML document on your Website. External style sheets are the most flexible and most use method because with an external style sheet, you can change the look and feel of an entire website by updating just only one file.

You can attach your external style sheets in two ways - importing and linking  :

Inline Styles Example:

    <link rel="stylesheet" href="css/style.css">

Try it Yourself