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.