DEV Community

Cover image for CSS INCLUSION.
stalin s
stalin s

Posted on

CSS INCLUSION.

In this blog, we will learn about a specific CSS , i.e., CSS INCLUSION. We will understand how to embed css on hmtl. So, let us start our learning.

HOW TO INSERT CSS INTO HTML?

There are three ways of inserting a style sheet:

#External style sheet๐Ÿ“Ž
#Internal style sheet๐Ÿ“Ž
#Inline style๐Ÿ“Ž

External Stylesheet:๐Ÿ“Ž

๐Ÿ“with an external style sheet,we can change the look of an entire website by chaning jush one file!
๐Ÿ“Each page must include a reference to the external style sheet file inside the element. The element goes inside the head
section.

syntax:โœ‹โœ‹โœ‹

Inline Styles๐Ÿ“Ž

๐Ÿ“An inline style may be used to apply a unique style for a single element.
๐Ÿ“An inline style loses many of the advantages of a style sheet (by mixing content with presentation ) . use this method sparingly!
๐Ÿ“To use inline style , add the style attribute to the relevant tag , the style attribute can contain any css proprety.

syntax:โœ‹โœ‹โœ‹

Cascading Order:

What style will be used when there is more than one style specified for an html.

Generally speaking we can say that all the styles will 'cascade' into a new "๐Ÿ“Žvirtual style" sheet by the following rules, where number three has the highest priority:

๐Ÿ“ŽBrowser default
๐Ÿ“ŽExternal and internal style sheets(head section)
๐Ÿ“ŽInline style (inside an html element)

๐Ÿ“’๐Ÿ“’๐Ÿ“’๐Ÿ“’๐Ÿ“’๐Ÿ“’๐Ÿ“’NOTED๐Ÿ“’๐Ÿ“’๐Ÿ“’๐Ÿ“’๐Ÿ“’

if the link to the external style sheet is placed below the internal style sheet in ๐Ÿ“’html

,the external sheet will override the internal style sheet!

happy learning:)

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bnt

Hello! Hmmm your post could be very better with markdown style :d

Collapse
 
stali1234 profile image
stalin s

sure well thanks for rectifying my mistake will remodify it.