Page 171 - DCAP202_Fundamentals of Web Programming
P. 171

Fundamentals of Web Programming




                    Notes             Embedded style sheet, which you use when you want to define styles for the current page.




                                      Task  Compare and contrast External style sheet and Embedded style sheet.
                                   Self Assessment


                                   Fill in the blanks:
                                   4.  CSS was first developed in ................................., as a way for Web developers to define the
                                       look and feel of their Web pages.

                                   5.  External style sheet is also known as ...................................
                                   6.  .......................... style sheet is used when you want to define styles for the current page.

                                   14.3 Class

                                   You may be wondering if it is possible to give an HTML element multiple looks with CSS.


                                          Example: Sometimes you want the font to be large and white, while other times you
                                   would prefer the font to be small and black. CSS would not be very useful if it did not allow you
                                   to have many different types of formats for a single HTML tag. Well, you are in luck! CSS allows
                                   you to do just that with the use of classes.
                                   Using classes is simple. You just need to add an extension to the typical CSS code and make sure
                                   you specify this extension in your HTML.


                                          Example: Making two paragraphs that behave differently. First, we begin with the CSS
                                   code, note the red text.
                                   CSS Code:
                                   p.first{  color:  blue;  }
                                   p.second{  color:  red;  }
                                   HTML Code:
                                   <html>
                                   <body>
                                   <p>This  is  a  normal  paragraph.</p>
                                   <p  class=”first”>This  is  a  paragraph  that  uses  the  p.first  CSS  code!</p>
                                   <p  class=”second”>This  is  a  paragraph  that  uses  the  p.second  CSS  code!</p>
                                   ...

                                   Self Assessment


                                   State true or false:
                                   7.  CSS would not be very useful if  it did not allow you to have many different types  of
                                       formats for a single HTML tag.

                                   8.  For using classes, you are not required to add an extension to the typical CSS code.






          164                               LOVELY PROFESSIONAL UNIVERSITY
   166   167   168   169   170   171   172   173   174   175   176