CSS- It brings the site to life

Types of CSS Style Applying

• Inline Styles – High Priority• Embedded Styles – Normal Priority• External Styles – Low Priority

Applying more than one class to the same element

• <a class=“hyperlink”>Hyper Link 1</a>• <a class=“hyperlink mystyle”>Mystyle Link</a>• <a class=“hyperlink”> Hyper Link 2 </a>CSS:

a{}.hyperlink{color:#1270bb;font-size:18px;font-weight:bold; text-decoration: none;}.mystyle{color:#ee481d;border:1px solid #ee481d;}

Hyper Link1 Mystyle Link Hyper Link2

HTML:-

HTML<div class=“blue grey orange”>One</div><div class=“grey orange blue”>Two</div><div class=“orange blue grey”>Three</div>

CSSdiv{width:100px;height:100px;float:left;color:#fff; margin:5px;}.blue{background-color:#1270bb;}.grey{background-color:#5c5d60;}.orange{background-color:#ee481d;}

One Two Three

Guess output style?

One Two

Styles applied like this…

Three

So, the last style will overwrite the existing style. Here orange class defined at last so, it overwrites blue and grey.

Importing a CSS file from within CSS (file)

• @import url("blogstyles.css“);• Apply different styles for print

Printed Content

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" /><link rel="stylesheet" type="text/css" href="myprintstyles.css" media=" print" />

Thank you!