CSS- It brings the site to life
Types of CSS Style Applying
• Inline Styles – High Priority
• Embedded Styles – Normal Priority
• External Styles – Low Pr...
Applying more than one class to the
same element
• <a class=“hyperlink”>Hyper Link 1</a>
• <a class=“hyperlink mystyle”>My...
HTML
<div class=“blue grey orange”>One</div>
<div class=“grey orange blue”>Two</div>
<div class=“orange blue grey”>Three</...
One Two
Styles applied like this…
Three
So, the last style will overwrite the existing style. Here
orange class defined at...
Importing a CSS file from within CSS (file)
• @import url("blogstyles.css“);
• Apply different styles for print
Printed Co...
Thank you!
Upcoming SlideShare
Loading in …5
×

Css few small tips and information

389 views

Published on

In this video you can how CSS multiple classes and style orders works on HTML elements

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
389
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Css few small tips and information

  1. 1. CSS- It brings the site to life
  2. 2. Types of CSS Style Applying • Inline Styles – High Priority • Embedded Styles – Normal Priority • External Styles – Low Priority
  3. 3. 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:-
  4. 4. HTML <div class=“blue grey orange”>One</div> <div class=“grey orange blue”>Two</div> <div class=“orange blue grey”>Three</div> CSS div{width:100px;height:100px;float:left;col or:#fff; margin:5px;} .blue{background-color:#1270bb;} .grey{background-color:#5c5d60;} .orange{background-color:#ee481d;} One Two Three Guess output style?
  5. 5. 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.
  6. 6. 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" />
  7. 7. Thank you!

×