SlideShare a Scribd company logo

Css few small tips and information

•
•
Naga Harish M
Naga Harish M

This document discusses different ways of applying CSS styles, including inline styles, embedded styles, and external styles. It also covers applying multiple classes to an element, with the last class overwriting any previous styles. The document demonstrates how the order of class declarations can impact the final displayed styles. It also shows how to import one CSS file into another and how to link different style sheets for screen and print media.

Related slideshows

Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
Pertemuan 7
Pertemuan 7Pertemuan 7
Pertemuan 7
 
Css with example
Css with exampleCss with example
Css with example
 
1 of 7
Download to read offline
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> 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?
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!

More Related Content

Css few small tips and information

  • 1. CSS- It brings the site to life
  • 2. Types of CSS Style Applying • Inline Styles – High Priority • Embedded Styles – Normal Priority • External Styles – Low Priority
  • 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. 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. 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. 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" />