Langsung ke konten utama

Belajar CSS chapter 1


Assalamualaikum sob. Postingan ini merupakan postingan dari blog saya sebelumnya yang dapat dilihat di sopyan.blog.upi.edu . Karena lupa passwordnya saya pindahkan kesini he he he :). Selamat membaca.
Untuk mempelajari tentang css kita diharuskan menguasai pemahaman dasar tentang HTML / XHTML

PENGENALAN CSS

            CSS merupakan singkatan dari Cascading Style Sheet , CSS digunakan untuk memperindah tampilan halaman web, dengan menggabungkannya dengan HTML.
Contoh sintak CSS :
Selektor umumnya adalah sebuah elemen html yang ingin diubah tampilannya.Misalnya h1, p, a, dan lain sebagainya.

Komentar Dalam CSS
komentar digunakan untuk menjelaskan kode yang dibuat, dan komentar akan diabaikan oleh browser sehinnga tidak akan ditampilkan oleh browser.komentar diawali dengan tanda /* dan diakhiri dengan tanda */ ,seperti ini :
/*Ini  sebuah komentar*/
p
{
text-align:center;
}

Selector class Dan Selectror id

Selector id : Digunakan untuk menspesifikasi tampilan yang hanya satu, elemen yang unik. Selektor id didefinisikan dengan atribut id dari sebuah elemen html, dan didefinisikan dengan tanda “#”. (crash)
Selector class : digunakan untuk sekumpulan elemen. menggunakan atribut class dalam html, dan didefinisikan dengan tanda “.  (titik) 

CARA UNTUK MEMASUKKAN CSS :

  • External style sheet
  • Internal style sheet
  • Inline style sheet
External Style Sheet
External style sheet : sangat ideal digunakan untuk halaman web yang banyak. Tiap halaman harus diberi link ke file css dengan menggunakan tag <link> didalam bagian head, dan kita harus membuat file dengan eksistensi .css memakai notepad atau teks editor lainnya.
Contoh :
dalam file .html :
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dalam file .css :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
Internal Style Sheet
Internal style sheet sering digunakan untuk sebuah halaman agar menjadi unik daripada halaman lain. Ditulis dalam halaman html di bagian head dengan menggunakan tag <style>.misal :
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
Inline Style
Cara menggunakan inline style adalah dengan cara menggunakan atribut style dalam kode html. Contoh :
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

CSS BACKGROUND
background-color
Contoh:
body {background-color:#b0c4de;}
nilainya bisa menggunakan :
  • nilai HEX : “#b0c4de
  • nilai RGB : “rgb(255,0,0)
  • nama warna : “red
background-image
contoh :
body
{
background-image:url(‘paper.gif’);
background-repeat:no-repeat;
background-position:right top;
}
untuk lebih mempersingkat source kode background ini kita dapat menyatukannya, contoh:
body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}
untuk menggunakan cara singkat ini posisinya adalah :
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
CSS TEXT
memberi warna teks , contoh :
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
memberi perataan teks , contoh:
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
memberi dekorasi pada teks, contoh :
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
untuk mentransformasi teks,contoh :
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Mengubah besar kecilnya teks, contoh :
p {text-indent:50px;}

Sekian postingan ini semoga bermanfaat, jangan lupa komen ya :). Thank's


Komentar

Postingan populer dari blog ini

Soal Pilihan Ganda Variabel, Konstanta, Operator dan Ekspresi Pemrograman C++

1.double angka; . kode program disamping merupakan tipe data… [C3] a.Bilangan bulat b.Bilangan riil c.Logika d.Karakter e.Struktur      2.Dibawah merupakan tipe data bilangan bulat adalah… [C1] a.char b.double c.float d.int e.boolean      3.Tipe data bahasa C++ untuk true false adalah… [C1] a.String b.Char c.Boolean d.Byte

Penilaian (Definisi, Prinsip dan Tujuan)

Definisi Penilaian Penilaian adalah proses pengumpulan dan pengolahan informasi untuk menentukan pencapaian hasil belajar peserta didik (Saputra, Salikun, & Nugroho, 2014, hlm.31).
Penilaian adalah proses pengumpulan berbagai informasi tentang siswa dan ruang kelas untuk tujuan membuat keputusan instruksional (Sapa’at, 2012. hlm.221).
Dengan dilakukannya penilaian di dalam kelas dapat menjawab pertanyaan tentang sebaik apa hasil atau prestasi belajar peserta didik. Hasil penilaian dapat berupa nilai kualitatif (berupa kata-kata) dan nilai kuantitatif (berupa angka).
Proses pengumpulan dan pengolahan informasi tersebut dilakukan untuk mengukur pencapaian hasil belajar peserta didik. Proses penilaian tersebut mencakup: penilaian otentik, penilaian diri, penilaian berbasis portofolio, ulangan, ulangan harian, ulangan tengah semester, ulangan akhir semester, ujian tingkat kompetensi, ujian mutu tingkat kompetensi, ujian nasional, dan ujian sekolah/ madrasah. (Permendikbud No.66 Tahun …

Bagaimana Cara Kerja Kapasitor

Sebuah kapasitor bentuknya kecil seperti sebuah baterai. Walaupun kapasitor bekerja dengan cara yang sangat berbeda, kapasitor dan baterai keduanya menyimpan energi listrik. Jika kamu pernah membaca bagaimana cara kerja baterai, maka kamu tahu bahwa sebuah baterai memiliki dua buah terminal. Di dalam sebuah baterai, reaksi kimia menghasilkan elektron-elektron pada ujung satu terminal and menyerap elektron-elektron pada terminal lainnya. Sebuah kapasitor jauh lebih sederhana di bandingkan sebuah baterai, kapasitor tidak dapat menghasilkan elektron-elektron baru -- kapasitor hanya menyimpan elektron-elektron.

Di dalam kapasitor, terminal-terminalnya tersambung ke dua plat logam yang dipisahkan oleh sebuah bahan bukan penghantar listrik, atau dielektrik. Kamu dapat dengan mudah membuat sebuah kapasitor dari dua buah aluminum foil dan satu buah kertas. Itu tidak akan menjadi sebuah kapasitor pada umumnya dalam hal kapasitas penyimpanan, tapi itu akan bekerja.

Secara teori, dielektrik ada…