HTML Style Elements

HTML Style Elements

HTML style applies to the HTML elements to make a better presentation layout. There are mainly three methods that exist that support HTML styles. These are namely Inline styles, Embedded style, and External stylesheet.

CSS Inline style

-Inline style can be done by inserting style attribute in the HTML start tag and then write style property and value within the style attribute. Each property of style is separated with a semicolon(;).

This is generally bad code practice since Each property: value pair is separated by a semicolon (;).All style property and value should be in one line and separated with semicolons. It does not have a line break and this is a big problem.

Statement


Try It Now

When any website contains more than one web page then it is very tedious work during code update after a long time. Because it takes more time due to having more than one embedded style exist on every web page. Hence not focus more on this method and use an external style sheet. An external style sheet is more flexible and takes less time to update any CSS code after the requirement.

Example

Source Code

Try it now

Note: In this example CSS inline style is used inside the HTML element style attribute.

Embedded style

Embedded style sheet can be applied within the HTML <head> section of the HTML document.

Statement


Try It Now

Source Code

Try it now

Note: In this example CSS embedded style is applied inside the HTML <head> section.

External style sheet

External style sheet can be applied using <link> element and this link placed within opening <head> and cloasing </head> section of the HTML web page.

Please note that href attribute refers to the address of the external style sheet. This external style sheet consists of various CSS properties and values.

Statement


Try It Now

Source Code

Try it now

Note: In this example CSS external style sheet is applied inside the HTML <head> section via <link> element.

Which one is the best HTML style and why?

External style sheet style is best among the mention HTML styles. Since it is a separate style file and contains all the CSS of the website. Working on a single file is much easier than more than one file because it takes less time while others take much time.

These external style sheets can also be imported within another style sheet.

Statement


Try It Now

Example

Source Code

Try it now

Note: In this example, the external style sheet has been imported from another style sheet.

Online Test / Quiz