HTML Styles | HTML CSS | Learn HTML

HTML Styles

HTML is limited when it comes to the viewing of document. It was originally designed as a simple way of presenting information. CSS (Cascading Style Sheets) was introduced in December 1996 by the W3C, to provide a better way to HTML styles in HTML elements.

With the help of CSS, it becomes easy to specify the colors used for the text and the backgrounds, the size and the style for the fonts, the amount of space between elements, adding an images, adding border and outlines to the elements and a host of other styling.

Adding Styles with HTML Elements

Style can be either attached as a separate document or embedded in the HTML file. These are the three methods of implementing styling into the HTML document (from highest to lowest priority).

  • Inline styles — Using the style attribute in the HTML start tag.
  • Embedded style — Using the <style> element in the head section of the file or dicument.
  • External style sheet — Using the <link> element, pointing to an external CSS files.
Adding Style to an HTML Tag | HTML Styles | Tech-Mirror
Adding Style to an HTML Tag | Tech-Mirror

Inline Styles

It is used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute in a particular tag.

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

The following example will show you how to change the font-size and color of the text:

Using the above html styles are generally considered as a bad practice. As style rules are embedded directly inside the html tag, it causes the presentation to become mixed with the content of the file; which negates the purpose of using CSS. When you have so many tags in a file than it can’t valid.

Embedded Style Sheets

Embedded or internal style sheets only affect the document that they are embedded in. These are defined in the <head> section of an HTML document using the <style> tag. You can define any number of <style> elements inside the <head> section of an HTML document like..

External Style Sheets

An external style sheet is ideal when the style is applied to many pages or you can use third party CSS.

It holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible and most frequently used because with an external style sheet, you can change the look of an entire website by changing just one file or one place.

An external style sheet can be linked to an HTML file or document using the <link> tag. The <link> tag goes inside the <head> section.

For More HTML Tables

Leave a Reply

Your email address will not be published. Required fields are marked *