Belajar CSS : CSS Dasar

posted in: Tutorial Pemrograman | 0

CSS Color

CSS Color memiliki 16,777,216 warna untuk memenuhi kebutuhan Anda.  CSS Color dapat memiki beberapa bentuk: nama, RGB (red/green/blue) dan hex code.

 

Contoh berikut adalah cara CSS menyatakan warna merah dalam berbagai format:

 

red                                     format nama

rgb(255,0,0)                       format rgb

rgb(100%,0%,0%)             format rgb

#ff0000                               format hex code

#f00                                    format hex code

 

Nama warna yang tersedia adalah: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Nama transparent juga bisa dipakai.

Tiga nilai dari nilai RGB adalah dari 0 to 255, 0 menunjukan nilai paling rendah, 255 menjadi nilai paling tinggi. RGB adalah singkat dari REG-GREE-BLUE, dimana 3 nilai (255,0,0) menunjukan intensitas berturut-turut untuk RED, GREEN, dan BLUE. 0 menunjukan tidak ada warna merah, sedangkan 255 menunjukan warna merah penuh. Nilai-nilai tersebut dapat juga dinyatakan dalam bentuk persentase.

Hexadecimal adalah system penomoran angka dalam basis angka 16. Nilai angka hexadecimal memiliki 16 nomor, dari mulai 0 sampai dengan F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Menyatakan CSS Color dengan hexa code adalah menambahkan karakter hash (#) dan dapat berupa 6 digit atau 3 digit. Untuk menyatakan RGB(255,0,0) adalah #FF0000 untuk format 6 digit, atau #F00 untuk versi 3 digit.

 

CSS Background

CSS Background digunakan untuk mendefinisikan efek latar belakang suatu elemen.
Berikut adalah property CSS untuk background beserta contohnya.

Background Color
Properti background-color menentukan warna latar belakang dari elemen.

Contoh berikut adalah memberi warna latar belakang melalui selector body.


body {
background-color: #b0c4de;
}

Berikut adalah contoh untuk memberi latar belakang untuk elemen yang berbeda-beda, yaitu h1, p, dan div.


h1 {
background-color: #6495ed;
}

p {
background-color: #e0ffff;
}

div {
background-color: #b0c4de;
}

 

Background Image
Properti background-image dipakai untuk menentukan gambar yang digunakan sebagai latar belakang elemen.

Secara default, gambar background akan diulang sampai meliputi seluruh elemen.


body {
background-image: url("paper.gif");
}

Untuk menyetel pengulangan background, digunakan property background-repeat dengan nilai repeat-x atau repeat-y. Berikut adalah contoh diulang hanya secara horizontal (repeat-x)


body {
background-image: url("gradient.png");
background-repeat: repeat-x;
}

Jika tidak ingin diulang, gunakan property dengan nilai no-repeat seperti berikut.


body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

Posisi gambar background dapat ditentukan dengan properti background-position:


body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Background – Shorthand (memperpendek) property
Pernyataan deklarasi CSS dapat juga disingkat dengan menggunakan property background. Urutan nilai untuk property tersebut adalah sebagai berikut:

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

Berikut adalah contoh pemakain property background.


body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

Bila menggunakan properti singkatan urutan nilai properti adalah:

CSS Text

CSS teks dipakai untuk memformat teks halaman web. Daftar property yang dapat digunakan untuk memformat teks adalah adalah sebagai berikut:

Properti Deskripsi
color Mengatur warna teks
direction Menentukan arah teks / menulis direction
letter-spacing Meningkatkan atau mengurangi ruang antara karakter dalam teks
line-height Mengatur tinggi baris
text-align Menentukan penyelarasan horisontal teks
text-decoration Menentukan dekorasi ya ditambahkan kedalam teks
text-indent Menentukan indentasi dari baris pertama dalam teks-blok
text-shadow Menentukan efek bayangan yang ditambahkan  kedalam teks
text-transform Mengontrol kapitalisasi teks
unicode-bidi Digunakan bersama-sama dengan properti arah untuk men set atau me return apakah teks harus diganti untuk mendukung beberapa bahasa dalam dokumen yang sama
vertical-align Mengatur alignment vertikal elemen
white-space Menentukan ruang di dalam elemen yang di tangani
word-spacing Meningkatkan atau mengurangi ruang antara kata-kata dalam teks

Berikut adalah beberap contoh penggunaan property CSS untuk teks.

Color
Properti color digunakan untuk mengatur warna teks.

body {
color: blue;
}

h1 {
color: #00ff00;
}

h2 {
color: rgb(255,0,0);
}

Text-align
Properti text-align digunakan untuk mengatur text secara alignment horizontal. Teks dapat di atur di tengah (center), atau rata kiri  (left) atau rata kanan (right), atau rata kiri-kanan (justify).

h1 {
text-align: center;
}

p.date {
text-align: right;
}

p.main {
text-align: justify;
}

Text Decoration
Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks. Contoh berikut adalah untuk menambahkan garis bawah dan garis ditengah teks.

a {
text-decoration: none;
}

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

Text Transformation
properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

Contoh berikut adalah mengubah semua huruf menjadi huruf besar atau kecil, atau huruf pertama dari setiap kata.


p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

Text Indentation
Properti text-indent digunakan untuk membuat indentasi baris pertama dari teks.


p {
text-indent: 50px;
}

CSS Font

Properti untuk CSS Font adalah sebagai berikut:

Properti Deskripsi
font Mengatur semua properti font dalam satu deklarasi
font-family Menentukan keluarga font untuk teks
font-size Menentukan ukuran font teks
font-style Menentukan Style font untuk teks
font-variant Menentukan apakah teks harus ditampilkan dalam font small-cops
font-weight Menentukan tebal font

CSS font properties mendefinisikan font family, boldness, size, dan style dari text.

belajar css-css font

Font Family
Dalam CSS, ada dua jenis nama cara pemilihan font family  yaitu:

  • generic family – memilih memakai sekelompok font dengan tampilan yang mirip
  • font family – memilin font lebih spesifik dengan menentukan jenis font
Generic family Font family Deskripsi
Serif Times New Roman
Georgia
Font Serif memiliki garis kecil di ujung karakter
Sans-serif Arial
Verdana
Font ini tidak memiliki garis-garis pada ujung karakter (sans artinya tidak)
Monospace Courier New
Lucida Console
Semua karakter monospace memiliki lebar yang sama

Font Family
Font family teks yang dibuat dengan properti font-family.

Properti font-family harus mempunyai beberapa nama font untuk “fallback” sistem. Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.

Mulailah dengan font yang Anda inginkan, dan diakhiri dengan family generic, agar browser memilih font yang sama dalam generic family.

Jika nama suatu font family yang lebih dari satu kata, itu harus dalam tanda kutip, seperti: “Times New Roman”.

Jika ada lebih dari satu font family yang ditentukan, pisahkan dengan koma:


p {
font-family: "Times New Roman", Times, serif;
}

Font Style
Properti ini memiliki tiga nilai:

  • normal – Teks ditampilkan seperti biasanya
  • italic – Teks ditampilkan italic
  • oblique – Teks “bersandar” (miring sangat mirip dengan italic, tapi kurang italic)

p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

Font Size
Properti font-size digunakan untuk menentukan ukuran teks.

Sebaiknya selalu gunakan tag HTML yang tepat, seperti <h1> – <h6> untuk judul dan <p> untuk paragraf, agar lebih mudah setting di CSS.

Nilai font-size dapat berupa ukuran absolut, atau relatif.

Ukuran Absolute adalah mengatur teks ke ukuran tertentu. Teknik ini tidak begitu baik dilihat dari aksesibilitas, tapi cocok jika mengetahui dengan jelas ukuran fisik output.

Ukuran relative adalah menentukan ukuran relatif terhadap elemen

Font Size dalam Pixels
Mengatur ukuran teks dengan pixel memberi Anda kontrol penuh atas ukuran teks:


h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

Set Font Size dalam em
Untuk menghindari masalah Resize dengan versi Internet Explorer, banyak pengembang menggunakan em bukan pixel. 1-em sama dengan ukuran font saat ini. Ukuran teks default dalam browser adalah 16px. Jadi, ukuran default 1em sama dengan 16px.
Ukuran dapat dihitung dengan menkonversi pixel ke em menggunakan rumus berikut:

pixel / 16 = em


h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

CSS Links

Link dapat distyle dengan properti CSS. Misalnya warna, font-family, latar belakang, dan seterusnya. Link juga dapat diatur style-nya berdasarkan statusnya.

Berikut adalah 4 status link:

  • a:link – normal, link yang belum dikunjungi
  • a:visited – link yang telah di kunjungi
  • a:hover – ketika mouse berada pada link itu
  • a:active – ketika link di klik

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

Untuk menetapkan style terhadap status link, ada beberapa aturan yang harus diikuti :

  • a:hover harus ada setelah a:link an a:visited
  • a:active harus ada setelah a:hover

Link Styles Umum
Berikut adalah beberapa style link yang umum dipakai:

Text Decoration

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

Background Color

a:link {
background-color: #B2FF99;
}

a:visited {
background-color: #FFFF85;
}

a:hover {
background-color: #FF704D;
}

a:active {
background-color: #FF704D;
}

CSS List

CSS List adalah style yang diterapkan dalam teks model daftar (bullet). Dalam HTML, ada dua jenis list style, yaitu:

  • unordered lists -list item, ditandai dengan bullet
  • ordered lists – list item, ditandai dengan angka atau huruf

Berikut adalah table property yang bisa dipakai untuk list

Property Description
list-style Mengatur semua properti untuk list dalam satu deklarasi
list-style-image Menentukan gambar sebagai penanda list item
list-style-position Menentukan apakah penanda list item akan muncul di dalam atau di luar aliran konten
list-style-type Menentukan jenis  penanda list item

 

Penanda List Item
Jenis penanda list item ditetapkan dengan properti list-style-type. Berikut adalah contoh untuk membuat penanda list item berbeda-beda dengan property ini.


ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

Gambar sebagai Penanda List Item
Untuk menentukan gambar sebagai penanda list item, menggunakan properti list-style-image:


ul {
list-style-image: url('sqpurple.gif');
}

List – Shorthand Properti
Format shorthand ini adalah menyingkat kode penulisan property dengan memasukkanya dalam satu baris.

Bila menggunakan shorthand properti, urutan nilai-nilai nya adalah :

  1. list-style-type
  2. list-style-position
  3. list-style-image

Berikut adalah contoh CSS dengan shorthand property.


ul {
list-style: square url("sqpurple.gif") no-repeat top right;;
}

 

Leave a Reply