Different Ways to InsertDifferent Ways to Insert
in CSSin CSS
www.navdeepkumar.comwww.navdeepkumar.com
What is CSS?What is CSS?
CSS (Cascading Style Sheets)CSS (Cascading Style Sheets)
Cascading Style Sheets is a presentation...
Types of CSS
There are following three ways in which style
sheets can be called or inserted in any HTML
document:
• Extern...
External style sheet
In this case a separate file is created in which all the styles
for every web page element is declare...
Internal style sheet
• You can also put all the styles inside the tag of your
html page. You must be very careful while us...
Inline styles
In this case the styles can be placed inside the
individual tag. In the above two cases the styles can be
ap...
Advantages of CSS
 1.  Pages load faster
                 Less code means faster download times. 
 2.  Easy maintenance 
 ...
Disadvantages of CSS
Browser compatibilityBrowser compatibility 
Browsers have varying levels of compliance with Style She...
www.navdeepkumar.comwww.navdeepkumar.com
Contact At: email@navdeepkumar.comContact At: email@navdeepkumar.com
www.navdeepkumar.comwww.navdeepkumar.com
Contact At: email@navdeepkumar.comContact At: email@navdeepkumar.com
Upcoming SlideShare
Loading in …5
×

Different Ways to Insert CSS

540 views

Published on

Different Ways to Insert CSS
Different Ways to Insert CSS

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Different Ways to Insert CSS

  1. 1. Different Ways to InsertDifferent Ways to Insert in CSSin CSS www.navdeepkumar.comwww.navdeepkumar.com
  2. 2. What is CSS?What is CSS? CSS (Cascading Style Sheets)CSS (Cascading Style Sheets) Cascading Style Sheets is a presentation definition language that is used to control the layout of HTML document by attaching styles. With CSS you can apply styles such as color of text set margins of fonts, background, images, spacing between paragraph and words and much more. www.navdeepkumar.comwww.navdeepkumar.com
  3. 3. Types of CSS There are following three ways in which style sheets can be called or inserted in any HTML document: • External style sheet • Internal style sheet • Inline style www.navdeepkumar.comwww.navdeepkumar.com
  4. 4. External style sheet In this case a separate file is created in which all the styles for every web page element is declared and defined. This file is a CSS file and has an extension of .css. Then you have to attach the style sheet with your html page. <link href=”style.css” rel=”stylesheet” type=”text/css”> In the value of href=”style.css” you will write the path where you have placed your cascading style sheet. www.navdeepkumar.comwww.navdeepkumar.com
  5. 5. Internal style sheet • You can also put all the styles inside the tag of your html page. You must be very careful while using this method of CSS insertion as all the style sheet tags must be declared before the closing tag. This is done in the following way: • <style> • all the styles will go here • </style> www.navdeepkumar.comwww.navdeepkumar.com
  6. 6. Inline styles In this case the styles can be placed inside the individual tag. In the above two cases the styles can be applied to the whole HTML page but then in this case it will affect any one particular tag only. One example of this type of styles insertion follows: •<style=”color: red; font-size:12px; “ > www.navdeepkumar.comwww.navdeepkumar.com
  7. 7. Advantages of CSS  1.  Pages load faster                  Less code means faster download times.   2.  Easy maintenance                   To change the style of an element, you only have to make an edit in one place.    3. Superior styles to HTML              CSS has a much wider array of attributes than HTML.  www.navdeepkumar.comwww.navdeepkumar.com
  8. 8. Disadvantages of CSS Browser compatibilityBrowser compatibility  Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.  www.navdeepkumar.comwww.navdeepkumar.com
  9. 9. www.navdeepkumar.comwww.navdeepkumar.com Contact At: email@navdeepkumar.comContact At: email@navdeepkumar.com
  10. 10. www.navdeepkumar.comwww.navdeepkumar.com Contact At: email@navdeepkumar.comContact At: email@navdeepkumar.com

×