CSS types and there uses


There are three ways  of using  CSS classes :

1.)    INTERNAL STYLES :   Internal styles are defined in the <head > of current web page

  • Internal style are placedinside the <head> tag of a particular web page via style tag.
  • These styles can be used only for the page in which they are embedded.
  • You would need to create these styles again over again.
  •        For example :  <style type =”text/css”></style>

2.)    INLINE STYLES :    Inline styles are defined within the HTML markup of particular web page.(Avoid)

  • Inline styles are placed directly inside an HTML in the code.
  • We can’t use style builder to create inline styles.
  • One major use of inline css to over-ride a style that are using external style sheet.
  • For example :    < p style=”font -size : 14px; color:purple;”></p>
  • It will only target the changes over this paragraph.

3.)    EXTERNAL STYLES :   External styles are defined on the external style sheet, which linked to the web pages.(Best )

  • This is best way of using css styles.
  • This will allow us of reusing styles  as many times as we would like simply by linking external css web page to other web pages.
  • It provides us reusability on greater way.
  • It decreases the complexity of code.
  • For example :

<style type=”text/css”>

.modal-dailog

{

background-color: Black;

filter: alpha(opacity=90);

opacity: 0.8;

}

.modalPopup

{

background-color: #FFFFFF;

border-width: 3px;

border-style: solid;

border-color: black;

padding-top: 10px;

padding-left: 10px;

width: 300px;

height: 140px;

}

</style>

USES: 

<div class=”modal fade” id=”PopUpPrint” role=”dialog”>

<div class=”modal-dialog”>

<div class=”modal-content”>

<div class=”modal-header”>

<button type=”button” class=”close” data-dismiss=”modal”>&times;</button>

Leave a comment

Your email address will not be published. Required fields are marked *