Scribd Logo
Unggah

Selamat datang di Scribd!

  • Belajar Dasar Dasar CSS

    Diunggah oleh

    Andri Vista Medina
    15 tayangan7 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    15 tayangan7 halaman

    Belajar Dasar Dasar CSS

    Diunggah oleh

    Andri Vista Medina

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 7

    CSS

    Selamat datang di codingku CSS tutorial disini anda akan belajar Cascading Style Sheets / CSS dari dasar hingga mahir.

    Sebelum anda memasuki dunia CSS kami sarankan anda mengetahui dasar-dasar HTML

    CSS
    Anda bisa menghemat pekerjaan anda dengan CSS. CSS adalah singkatan dari Cascading Style Sheets. Disini anda akan belajar bagaimana mengatur gaya/style dari elemen-elemen HTML.

    Keuntungan dengan CSS


    Menghemat waktu : Anda bisa membuat CSS kemudian anda bisa menggunakannya lagi untuk halaman-halaman web yang lain. Halaman di akses lebih cepat : Ketika anda membuat CSS artinya anda bisa membuatnya untuk mengatur style/gaya tag-tag di dalam dokumen seluruhnya, hal ini berarti hanya sedikit kode yang dibutuhkan. Sedikit kode = lebih cepat aksesnya. Mudah dimodifikasi : Untuk membuat perubahan global anda cukup mengganti di satu tempat maka akan mempengaruhi semua dokumen HTML. Superior di banding HTML : CSS memiliki pilihan yang lebih luas dibandingkan dengan atribut HTML. Standard Global : Saat ini atribut-atribut dalam HTML telah diperkecil fungsinya dan penggunaan CSS sangat di anjurkan.

    CSS Syntax
    selector { property : value ; } Sebuah CSS dibagi menjadi 3 bagian :

    Selector : Selector adalah tag HTML yang akan kita atur style-nya. Property : Property adalah atribut dari tag HTML. Value : Value adalah nilai dari property, misal property dari color bisa memiliki value red,green atau #FF33FF. Bila disederhanakan maka bisa dibilang semua atribut dari sebuah tag HTML diubah menjadi property CSS, mulai dari warna, font, border dan lain sebagainya.

    Contoh CSS
    h2{color:red; text-align:right;}

    Sebuah CSS di awali dengan 1. 2. 3. 4. 5. tag : h2,h1,table,dll kurung kurawal pembuka : { deklarasi : property : value titik-koma : ; kurung kurawal penutup : }

    Contoh :
    <!DOCTYPE html> <html> <head> <style> h2{ color:red; text-align:right; } </style> </head> <body> <h2>Style pada heading ini dibuat dengan CSS</h2> </body> </html>

    CSS Komentar
    Penulisan komentar/comment pada CSS berbeda dengan dokumen HTML.

    HTML comments :
    <!> komentar HTML anda >>

    CSS comments :
    /* komentar CSS anda */

    CSS Id Dan Class


    Dalam CSS anda bisa membuat selector sendiri yang disebut dengan id dan class.

    ID Selector
    Semua elemen HTML yang memiliki id sama dengan nama style id yang anda deklarasikan akan memiliki style yang sama sesuai dengan id tersebut. Id selector didefinisikan dengan tanda "#". Misalkan pada contoh kode CSS berikut
    #idku{color:red;}

    Cara Menulis CSS


    Ketika browser membaca 'style sheet' maka browser akan memformat sesuai dengan style tersebut.

    Ada 3 cara memasukkan CSS


    Inline Style Sheet Internal Style Sheet, dan External Style Sheet

    Inline Style Sheet


    Inline Style Sheet merupakan metode yang paling tidak menguntungkan krn memasukkan CSS dalam attribut elemen HTML secara langsung. Kami anjurkan anda jangan terlalu sering menggunakan metode ini!. Inline Style Sheet dilakukan dengan memasukkan CSS-nya ke dalam attribut CSS, dengan menambahkan attribut 'style'. 3

    contoh : Codingku HTML Editori


    <!DOCTYPE html> <html> <body> <h2 style="color:red; text-align:center;" >Style pada heading ini dibuat dengan Inline CSS</h2> </body> </html>

    Coba sendiri

    Internal Style Sheet


    Internal Style Sheet sebaiknya digunakan apabila anda memiliki satu dokumen yang memiliki style yang unik. Internal Style Sheet di deklarasikan pada bagian <head> sebuah dokumen HTML. Internal Style Sheet akan mempengaruhi semua elemen dibawahnya sesuai dengan isi dari deklarasi style-nya. contoh :
    <!DOCTYPE html> <html> <head> <style type="text/css"> /* ini adalah deklarasi internal CSS */ h2{ color:red; text-align:right; } </style> </head> <body> <h2>Style pada heading ini dibuat dengan Internal CSS</h2> <h3>Ini adalah h3, CSS tidak mempengaruhi elemen ini karena blm di deklarasikan.</h3> <h2>Ini adalah h2</h2> </body> </html>

    CSS Background
    CSS background digunakan untuk mengubah background dari elemen HTML. 4

    Properties dari CSS Background :


    background-color background-image background-repeat background-attachment background-position

    background-color background-color merincikan warna background dari sebuah elemen HTML.


    h2{background-color:red;}

    Dalam CSS, sebuah warna/color dirincikan dengan :


    Nilai HEX, seperti : "#33FF00". Nilai RGB, seperti : "rgb(0,0.255)". Nama warna, seperti : "blue".

    Pada contoh dibawah ini elemen-elemen berikut memiliki style background-color yang berbeda-beda :
    <!DOCTYPE html> <html> <head> <style type="text/css"> h2{background-color:red;} p{background-color:#FFFF33;} div{background-color:rgb(255,0,255);} </style> </head> <body> <h2>Ini adalah h2</h2> <p>Ini adalah paragraf</p> <div>Ini adalah div</div> </body> </html>

    background-image
    background-image merincikan gambar sebagai background sebuah elemen HTML. Secara default gambar/image akan diulang-ulang menutupi seluruh bagian elemen.
    body{background-image:url("pattern.gif");}

    contoh :
    <!DOCTYPE html> <html> <head>

    <style type="text/css"> body{background-image:url("pattern.gif");} </style> </head> <body> <h1>background diulang-ulang secara otomatis </h1> </body> </html>

    Ketika anda menggunakan background image sebaiknya anda menggunakan kombinasi background dan text yang kontras satu sama lain sebab seringkali penggunaan kombinasi background malah mengakibatkan tulisan/konten dari dokumen tidak jelas.

    background-image : diulang secara horizontal / vertical


    Anda bisa menentukan apa sebuah background diulang hanya secara horizontal atau vertical. Ada kalanya anda hanya memerlukan background secara vertical atau horizontal, pada navigation bar situs codingku ini, background-nya di repeat/ulang secara horizontal. Cara penulisan horizontal dan vertical : Horizontal : menambahkan attribut : background-repeat, dan value-nya : repeat-x Vertical : menambahkan attribut : background-repeat, dan value-nya : repeat-y Contoh secara horizontal :
    body{background-image:url("pattern.gif"); background-repeat:repeat-x;}

    <!DOCTYPE html> <html> <head> <style type="text/css"> body{background-image:url("pattern.gif"); background-repeat:repeatx;} </style> </head> <body> <h1>background diulang-ulang secara horizontal saja</h1> </body> </html>

    Contoh secara vertical : 6

    body{background-image:url("pattern.gif"); background-repeat:repeat-y;}

    <!DOCTYPE html> <html> <head> <style type="text/css"> body{background-image:url("pattern.gif"); background-repeat:repeaty;} </style> </head> <body> <h1>background diulang-ulang secara vertical saja</h1> </body> </html>

    background-image : no-repeat dan set-position


    Anda bisa mengatur CSS agar gambar background tidak diulang-ulang. Anda juga bisa mengatur CSS agar gambar background tampil pada posisi yang anda inginkan.
    body { background-image:url("pattern.gif"); background-repeat:no-repeat; background-position:right bottom; }

    <!DOCTYPE html> <html> <head> <style type="text/css"> body { background-image:url("pattern.gif"); background-repeat:no-repeat; background-position:right top; } </style> </head> <body> <h1>background tidak diulang dan diposisikan pada bagian kanan atas</h1> </body> </html>

    Anda mungkin juga menyukai