Beranda / Cpp / Pemrograman / Web

Belajar CSS chapter 1

Oleh Sopyan Posting Komentar

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


Posting Komentar untuk "Belajar CSS chapter 1"