Find us on Facebook & Twitter

Pages

 

Monday 8 April 2013

HTML Css

0 comments


CSS atau Cascading Style Sheets


  • CSS digunakan untuk memberikan berbagai macam style pada elemen HTML.
  • CSS bisa dideklarasikan dengan tiga cara :
    • Inline : Di deklarasikan ke dalam attribut elemen HTML.
    • Internal : Di deklarasikan menggunakan elemen <style> di dalam elemen <head>.
    • External : Di deklarasikan pada sebuah file terpisah. 

      Contoh CSS
      Pada paragraf ini terdapat inline CSS.
      Pada paragraf menggunakan font family 'cursive'.
      Pada paragraf menggunakan font family 'monospace'.
      Pada paragraf menggunakan font family 'sans-serif'.

      HTML Editori <p style="color:#FF33FF; text-decoration:underline; font-size:13px;">
      Pada paragraf ini terdapat inline CSS.
      </p>

      <p style="font-size:16px; font-family:cursive">
      Pada paragraf menggunakan font family 'cursive'.
      </p>

      <p style="font-size:19px; font-family:monospace">
      Pada paragraf menggunakan font family 'monospace'.
      </p>

      <p style="font-size:19px; color:#FF3333; font-family:sans-serif">
      Pada paragraf menggunakan font family 'sans-serif'.
      </p>

      Mengenai CSS


      CSS diperkenalkan bersamaan dengan HTML 4.0.

      Cara terbaik dari desain sebuah CSS adalah dengan menempatkan CSS pada file yang terpisah atau disebut dengan eksternal CSS.
    • Internal CSS

      • Internal CSS di deklarasikan di bagian elemen <head> pada suatu dokumen HTML.
      • Internal CSS akan mempengaruhi semua elemen dibawahnya yang sesuai dengan yang di deklarasikannya.
      misal :
      <style>
          p{color:green}
      </style>
      </head>
      Pada contoh di atas,p{color:green} akan mempengaruhi semua elemen <p>... </p> di dalam dokumen tersebut.

      Contoh internal CSS :

      HTML Editori
      <html>

      <head>

      <style>

      h2{color:#33FFFF; text-decoration:underline;}

      p{color:red; font-family:cursive; font-size:15px;}

      </style>

      </head>

      <body>

      <h2>Style heading ini dibuat dengan internal CSS. </h2>

      <p>Style paragraf ini dibuat dengan internal CSS. </p>

      </body>

      </html>

       

       
Comments

0 comments:

Post a Comment