Thursday, March 31, 2016

HTML CSS

6:55:00 PM    No 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'.
Codingku 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 :

Codingku 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>


Bila anda sudah menguasai dasar dari CSS, maka sebaiknya hindarilah penggunaan elemen <strike>, <font>  maupun <center>.

0 komentar:

Post a Comment