Belajar css Format Teks

Dengan style css, text pada halaman dapat diformat dan diatur sedemikian rupa sehingga tampilan bacaan/text pada halaman web menjadi menarik, enak dan nyaman untuk dibaca.


css: Format Font

Pengaturan text dengan style css menggunakan properti-properti yang meliputi :

• color
• text-align
• text-decoratin
• text-transform
• text-indent

Properti-properti diatas dapat dijelaskan sebagai berikut.

Warna teks.

Warna pada teks sebuah artikel dapat diatur sedemikian rupa sehingga tampilan teks menjadi semarak dan menarik, selain itu kita dapat membedakan mana teks untuk link,mana yang bukan link, atau kita dapat memberi warna yang berbeda pada kata atau kalimat yang dianggap penting dalam uraian sebuah paragraf misalnya.

Untuk menentukan warna teks digunakan properti color, dengan nilai/value dari warna dapat menggunakan:

• nilai HEX misalnya: "#FF0000"
• nilai rgb misalnya: "rgb(255,0,0)"
• nama warna misalnya: "red" (dalam bahasa Inggris).

/* warna default ditetapkan pada selector body */

body { color: rgb(25,100,100); }

h2 { color: white; }

p { color: #FFD700; }

Pada contoh diatas, elemen body ditaur dengan value/nilai: nama warna, h2 dengan nilai rgb dan p dengan nilai hexadecimal.

Tampilan pada halaman web.

ini judul

ini sebuah paragraf

dan ini paragraf yang lain.

Perataan/alignment.

Properti text-align digunakan untuk mengatur perataan teks secara garis horizontal (horizontal line). Kita dapat mengatur perataan teks (text alignment) dengan memilih value/nilai :

left ( rata kiri )
right ( rata kanan )
center (berpusat ditengah)
justify (rata kiri dan rata kanan)

Contoh :

body { text-align:left; )

h1 { text-align:center; }

p { text-align:justify; }

p { text-align: right; }

.

Tampilan pada halaman web.

teks pada paragraf ini diatur dengan properti text-align dan dengan value: left, teks menjadi rata kiri.

ini contoh judul

dan teks pada paragraf ini diatur dengan properti text-align dengan value/nilainya: justify, sehingga teks menjadi rata kiri dan rata kanan. Namun pada pengaturan ini akan bekerja apabila sesuai dengan jendela browser.

sedangkan teks pada paragraf ini diatur dengan properti text-align dengan value: right, dan teks menjadi rata kanan.

Dekorasi teks.

Untuk membuat dekorasi teks digunakan properti text-decoration, dengan value yang dapat dipilih adalah :

• underline: teks dengan garis bawah.
• overline: teks dengan garis atas.
• line-through: teks tercoret
• none: untuk me-remove gaya standar
• blink: teks berkelip.

h2 { text-decoration:underline; }

h3 { text-decoration:overline; }

p { text-decoration:line-through; }

a { text-decoration:none; }
.

Tampilan pada halaman web.

ini judul

ini sub judul

text tercoret

text berkelip

ini sebuah link tanpa dekorasi .
.

Indentasi teks.

Untuk membuat teks pada baris pertama dari elemen html menjorok lebih kedalam dari baris normal digunakan properti text-indent, dengan value yang digunakan adalah: px ( pixel ) atau % ( persen ). Ini digunakan biasanya untuk membuat paragraf baru pada sebuah artikel.
Contoh.

.
p { text-indent: 40px; }

p { text-indent: 10%; }
.

Tampilan pada halaman web.

paragraf ini diatur dengan properti text-indent, dengan value:40pixel.

sedang teks dalam paragraf ini diatur dengan indentasi value: 10%.

Selain formating teks seperti yang dijelaskan diatas, masih banyak lagi cara memformat teks, diantaranya:

• direction: mengatur arah dari teks (ltr, rtl)
• line-height: mengatur jarak diantara baris teks (normal, px, length, %).
• letter-spacing: mengatur jarak spasi antar karakter teks (normal, length).
• text-shadow: untuk memberi bayangan pada teks.
• vertical-align: mengatur posisi text secara garis vertikal dari suatu elemen.
• word-spacing: Untuk menambah atau mengurangi jarak spaci antar kata (normal, length).

Demikianlah bagaimana kita mengatur format teks dengan css. Semoga bermanfaat.

Sumber materi: W3Schools.

Baca juga materi sebelumnya:

• Belajar css Format Font.
• Belajar html Hyperlink.
• Belajar html Background Styling.
• Cara Mengubah Grid Menu Pada Symbian S60v3v5.
• Belajar HTML Cara Membuat Teks/Obyek Berjalan.

back to top.

Belajar css Format Font

css: font styling

CSS memberi gaya pada font/huruf. Dengan css style, huruf atau font diformat ke dalam berbagai bentuk, warna, ukuran dan lain-lain, seperti yang akan diuraikan bagaimana memformat font dengan css, yang meliputi:

• font-family.
• color
• font-size
• font-style
• font-variant
• font-weight

Jenis huruf.

Dalam memilih bentuk font css, ada dua jenis nama keluarga font:

- keluarga generik: kelompok keluarga font dengan tampilan yang sama (seperti : "serif" atau "monospace")

- fon: keluarga font tertentu (seperti: "times new roman" atau "arial")

keluarga generik	font family	penjelasan
serif	times new roman georgia	serif font memiliki garis kecil di ujung pada beberapa karakter.
sans-serif	arial verdana	"sans" berarti tidak : font ini tidak memiliki garis diujung karakter
monospace	courier new lucida console	semua karakter monospace memiliki lebar yang sama

Untuk memilih keluarga font dalam memformat font/teks digunakan properti Font-family. Properti font-family harus diikuti dengan beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia akan memilih font berikutnya yang didukung.

Mulailah dengan nama font yang anda inginkan, dan diakhiri dengan keluarga generik agar browser memilih font yang sama dalam keluarga generik jika tidak ada font lain yang tersedia.

Jika nama font yang dipilih lebih dari satu kata maka dalam menulis nama font harus berada dalam tanda kutif, Seperti "Times New Roman". Dan jika memilih lebih dari satu nama harus dipisahkan dengan tanda koma.

body { font-family: "Times New Roman", Times, Serif; }

p { font-family: "Trebuchet MS", Arial; }

Warna huruf.

Untuk menentukan warna huruf digunakan properti color dengan nilai/value yang dapat dipilih dengan: nama warna, kode hexadecimal, atau nilai rgb.

Contoh.

body { color: aquamarine; }

h1 { color: #0000FF; }

Ukuran huruf.

Untuk menentukan ukuran huruf digunakan properti font-size. Sedangkan nilai/value dari properti tersebut adalah: small, medium, large, px; % dan lainnya.

Contoh

body { font-size: 12px ; }

h1 { font-size: larger; }

p { font-size: medium; }

Tampilan pada halaman web.

Judul ukuran larger

paragraf ini berukuran 12px

sedangkan paragraf ini berukuran medium

Gaya huruf/style.

Untuk menentukan gaya/style huruf digunakan properti: font-style, dengan memilih nilai: normal, italic, oblique.

Contoh.

p { font-style: italic; }

Tampilan pada halaman web.

tulisan pada paragraf ini bergaya miring (italic).

sedangkan tulisan ini bergaris bawah.

Font variant.

Properti font-variant digunakan untuk mengatur teks agar bergaya small caps atau tidak. Atribut ini dengan memilih value: small-caps maka teks yang tadinya berhuruf kecil berubah menjadi huruf capital semua.

Contoh

p { font-variant: small-caps; }

Tampilan pada halaman web.

paragraf ini bergaya small-caps, asalnya semua berhuruf kecil.

Huruf tebal.

Untuk membuat huruf tebal, digunakan properti font-weight dengan nilai/value yaitu: normal, bold, bolder atau lighter.

Contoh.

h1 { font-weight: bolder; }

p { font-weight: lighter; }

Tampilan pada halaman web.

ini heading

teks pada paragraf ini bergaya lighter.

Itulah, bagaimana css mengatur variasi gaya pada huruf atau teks.

Sumber materi: W3Schools.

Baca juga:

• Belajar html Background Styling.
• Cara Membuat Gambar Transparan.
• Cara Mengubah Grid Menu Pada Symbian S60v3v5.
• Belajar HTML Cara Membuat Teks/Obyek Berjalan.
• Belajar html Hyperlink.

back to top

Belajar css Background styling.

Setelah sebelumnya kita mempelajari Belajar css cara menyisipkan script css pada html. yang mudah-mudahan bisa difahami, kali ini dilanjutkan belajar css kita pada Css Background.

Dengan css background membuat halaman web kita semakin menarik. Kita dapat memasang backgroud pada halaman web berupa warna maupun gambar yang sesuai keinginan dan selera.
Bakground dapat dipasang untuk seluruh halaman yaitu tag body, pada tag heading maupun pada paragraf.

Css memungkinkan kita untuk mengatur background, pengaturan itu meliputi :

• background-color.


• background-image.


• background-repeat.


• background-attachment.


• background-position.

Background color.

Untuk memasang warrna sebagai background, digunakan properti background-color.

Properti background-color mendefinisikan latar belakang warna untuk elemen html yang ditetapkan ( body, heading, paragraf maupun div ). Untuk mengatur background warna pada seluruh halaman web, maka kita menempatkan properti background-color pada selector body

body
{
background-color:#FF00FF;
}

Selain diterapkan pada selector body, properti background juga dapat diterapkan pada selector elemen html lainnya, misalnya pada selector heading (h1....h6), selector paragraf, selector div dan lainnya.

h2
{

backgroun-color:blue;
}

p
{

background-color:#FFD700;

}
div
{

background-color:rgb(255,0,0);

}

Dalam menuliskan nilai/value dari sebuah warna dapat mengunakan : nama warna ( dalam bahasa inggris ), kode hexadecimal (misalnya: #FFD700 ) atau nilai rgb misalnya: rgb( 255,0,0).

Background image.

Untuk memasang gambar sebagai background digunakan properti background-image. Gambar yang ditetapkan sebagai background sebaiknya berada pada satu folder yang sama dengan folder tempat menyimpan dokumen css/html hal ini memudahkan dalam penulisannya. Akan tetapi kita bisa juga mengambil gambar dari tempat lain di internet, yang dalam menuliskannya harus mencantumkan alamat/url gambar tersebut dengan lengkap.

Berikut ini contoh penggunaan properti background-image :

<html>

<head>

<style type="text/css">


body { background-image:url(gambar.png); }


#header { background-image: url(http://alamat/nama.png); }


</style>

</head>

<body>

</body>

</html>

Background repeat.

Untuk memenuhi halaman yang menggunakan gambar sebagai background, secara default penempatan gambar akan melakukan pengulangan (repeat) baik secara vertikal maupun horizontal. Namun kita dapat mengubahnya dengan menggunakan properti background-repeat, dengan memilih value:
" repeat-x " (untuk pengulangan horizontal),
" repeat-y " (untuk pengulangan vertikal) dan
" no-repeat " (jika tidak menginginkan pengulangan).

/* pengulangan horizontal */

body {

background-image: url(gambar.png);

background-repeat:repeat-x; }



/* pengulangan vertikal */

body {

background-image: url(gambar.png);

background-repeat:repeat-y; }



/* tidak ada pengulangan */

body {

background-image: url(gambar.png);

background-repeat:no-repeat; }

Background attachment.

Properti background-attachment mengatur pergeseran terhadap gambar background. Ketika kita membuka halaman web dengan background gambar yang tidak diatur, maka saat menggeser mose maka gambar background ikut bergerak, untuk agar gambar tidak ikut bergerak maka digunakan pengaturan menggunakan properti background-attachment.
Nilai dari backround-attachment adalah: scroll (untuk bergerak) dan pixed (untuk diam).

body { backgraund-image: url(gambar.jpg); background-attachment: pixed; }


.header { backgraund-image: url(gambar.jpg); background-attachment:scroll; }

Background position.

Properti background-position mendefinisikan posisi awal gambar saat digunakan sebagai background.



Nilai dari properti background-position dapat dipilih:

top-left, top-center, top-right,
center-left; center-center, center-right,
bottom-left, bottom-center, bottom-right,
x%, y%
xpos, ypos.


Contoh penggunaanya :

body {

background-image: url("gambar.jpg");
background-position: top left; }

Jika kita akan menggunakan semua properti diatas, maka urutan dalam penulisannnya adalah :

• background-color


• background-image


• background-repeat


• background-attachment


• background-position

body {

background-color:green;

background-image: url("gambar.jpg");

background-repeat:no-repeat;

background-attachment:fixed;

background-position:top left;
}

Kita dapat menyingkatkan tulisan menjadi :

body
{

background: green
url("gambar.jpg")
no-repeat pixed
top left;
}

Begitulah uraian tentang cara css memberi gaya pada background.



Sumber materi: W3Schools.

Baca juga:
¤Belajar css cara menyisipkan script css pada html.

¤Cara praktis membuat akun email google.

¤Cara membuat gambar transparan dengan IDesigner.

¤Belajar html bagi peemula.

¤Cara membuat dokumen html/css dengan X-plore.

back to top

Belajar css Cara Menyisipkan css

Materi :

• External style
• Internal style
• Inline style

Dalam membangun sebuah halaman web, css tidak dapat berdiri sendiri, css fungsinya adalah membantu mempermudah memberi gaya pada dokumen html dalam membangun sebuah halaman web. Akan tetapi, hanya dengan satu file css dapat mengubah seluruh halaman web. Seperti yang telah diutarakan pada materi sebelumnya tentang Belajar css Selector Id dan Class. serta dalam dalam Belajar css Pendahuluan.

Belajar css Selector Id dan Class.

Sebelumnya telah dibahas tentang belajar css sebagai pendahuluan yaitu dengan judul Belajar css Pendahuluan. Di sana diuraikan mengenai latar belakang css, sintaks css dan komentar css yang mudah-mudahan sudah difahami dengan baik. Kali ini dilanjutkan pembahasan berikutnya yaitu Belajar css Selector Id dan Class. Berikut pembahasannya.

Ketika kita memberi gaya/style css pada dokumen html secara external style ( dokumen css terpisah dengan html ), maka gaya seluruh halaman web akan mengikuti gaya/style yang telah diatur dalam file css tadi. Nah, bagaimana kalau kita menghendaki tampilan yang lain pada point tertentu?. Untuk menjawab pertanyaan itulah pembahasan kali ini ditampilkan.

Dalam css, selain kita dapat mengatur satu gaya pada satu elemen html untuk seluruh halaman web, kita juga bisa mengatur gaya pada elemen yang sama dengan gaya yang berbeda dan spesifik dari gaya yang telah ditetapkan.

Misalnya kita telah menetapkan elemen h3 yang berposisi tengah dengan properti : { warna:merah } , lalu kita menginginkan elemen h3 yang lain yang berposisi kiri dengan properti: { warna:biru } . Nah, untuk solusinya dapat diatasi dengan menambahkan selector id dan selector class, dengan pengaturan yang lebih spesifik lagi. Berikut, uraian tentang selector id dan class.

Selector id

Selector id digunakan untuk mengatur gaya pada elemen tunggal yang unik, yang biasanya seperti : header, footer, sidebar ataupun logo.

Selector id menggunakan atribut id dari elemen html, yang didefinisikan dengan tanda " # ".

Sintaks selector id :

#nama-id { properti: value; }

Contoh :

.
#gaya-1
{
color:red;
text-align:center;
font-size:20px;
}

#gaya-2
{
color:blue;
text-align:left;
font-size: 14px;
}
.

Ingat:
 jangan memulai selector id dengan menggunakan angka.
 pada satu dokumen, tidak boleh memiliki elemen html dengan selector id yang sama.

Dan contoh menerapkan pada elemen html :

<h3 id="gaya-1">
ini heading
</h3>

Heading h3 diatas akan mengikuti gaya yang ditentukan pada gaya-1, sedangkan heading h3 yang dibawah ini akan mengikuti gaya yang ditentukan pada gaya-2.

<h3 id="gaya-2">
ini heading
</h3>

Hasilnya :

ini heading

ini heading

Selector class.

Jika dalam selector id memberikan gaya pada elemen tunggal, pada selector class dapat memberikan gaya pada kelompok elemen. Artinya dapat mengatur pada beberapa elemen, misalnya dalam pengaturan properti: seperti color, size, text-align dan yang lainnya.

Selector class dalam penulisannya harus didahului dengan tanda titik ( "." ).

Sintaksnya :

.nama-class { properti:value; }

Contoh :

.bold { font-weight:bold; }

.center { text-align:center; }

Misalnya kita terapkan pada elemen html berikut:

<h3 class="center"> ini heading </h3>

<p class="bold"> ini sebuah paragraf yang memiliki class=bold </p>.

<a href="http://url_link.com" class="bold"> ini sebuah link blog </a>

Pada contoh diatas, setiap elemen html yang memiliki class=bold akan mengikuti pengaturan yang ditetapkan pada selector ".bold", dan setiap elemen yang memilki class=center akan mengikuti aturan gaya yang ditetapkan pada selector ".center".

Contoh diatas hasilnya seperti ini.

ini heading

ini sebuah paragraf yang memiliki class=bold

ini sebuah link

Contoh penerapan dalam dokumen html

Contoh di bawah ini adalah bagaimana menempatkan selector class dan selector id pada dokumen html secara internal style, yaitu ditempatkan diantara tag header.

<head>
<style>
#ruang
{
width:240px;
background-color:#ffa500;
padding:5px;
margin-top:20px;
border:1px blue solid;
}
.kelas1
{
color:white; font-size:18px;
text-align:center;
}
.kelas2
{
color:#800080; font-size:14px;
text-align:left;
}

</style>
</head>
.

Untuk memanggil selector class dan id yang akan diterapkan pada dokumen html kita dapat menggunakan tag <div> seperti ini :

<div id="ruang">

<h2 class="kelas1"> ini heading
</h2>

/*heading diatas mengikuti gaya yang diatur dengan class=kelas1*/

<p class="kelas1">
ini paragraf yang diatur mengikuti aturan class=kelas1
</p>

<p class="kelas2">
sedangkan paragraf ini mengikuti aturan pada class=kelas2.
</p>

</div>

Yang tampil di browser adalah seperti berikut ini :

ini heading heading diatas mengikuti gaya yang diatur dengan class=kelas1. ini paragraf yang diatur mengikuti aturan class=kelas1 sedangkan paragraf ini mengikuti aturan pada class=kelas2

Demikianlah pembahasan materi tentang Belajar css selector id dan class.
back to top

Belajar css Pendahuluan.

Memahami tentang script css memudahkan dalam memformat dokumen htm.

Assalaamu'alaikuum wr.wb.

Setelah sebelumnya saya membuat posting tentang Belajar html , dalam kesempatan ini kita lanjutkan dengan Belajar CSS.

Latar belakang.

CSS merupakan kependekan dari Cascading Steel Sheet yang diciptakan oleh W3C (World Wide Consorcium ) sebuah consorcium yang dibentuk untuk menangani masalah-masalah yang timbul pada saat html berada pada versi 3.2.

Pada html versi 3.2 ini dalam penggunaannya menjadi masalah besar bagi para pengembang web, karena untuk memberi gaya/style pada rancangan dokumen html, para pengembang harus menuliskan tag-tag , properti maupun atribut secara berulang-ulang untuk setiap style yang sama, hal ini menimbulkan kerepotaan pada saat membangun dokumen html dalam skala besar, karena akan menjadi sangat kompleks,rumit dan menjadi sangat mahal.

CSS mulai dikembangkan ketika html berada pada versi 4.0, tag-tag yang ada pada versi sebelumnya mulai ditinggalkan pemakaiannya dan diganti dengan cara yang lebih baik dan simple. CSS memudahkan dalam mendefinisikan penulisan dalam membuat dokumen html.
Dengan css pekerjaan html menjadi ramping, sehingga sangat membantu bagi para pengembang web.
Secara terpisah file css disimpan dalam format *.css .
Sebelum mempelajari CSS, seharusnya kita sudah mahir dan memahami cara-menulis html, karena css bukanlah materi yang berdiri sendiri, dan css tidak dapat membangun web sendiri, tetapi css membantu mempermudah dalam memberi gaya pada dokumen html. Jadi yang membangun halaman web adalah html, itulah sebabnya kita harus memahami cara-cara menulis html sebelum mempelajari css. Untuk belajar menulis html, silakan kunjungi Belajar html disini.

Contoh CSS

Source code:

<html>
<head>
<style>
body {background-color: yellow;}
h1 {font-size: 24px;}
h2 {color: blue;}
p {margin-left: 50px;}
</ style>
</ head >
<body>
<h1> Header ini adalah 24px </h1>
<h2> Header ini berwarna biru</h2>
<p> ayat ini memiliki margin kiri 50 pixel </ p>
</ body>
</html>

Sintaks css.

Susunan sintaks css biasanya terdiri dari selector, properti dan value. Untuk jelasnya, cara penulisan css sintaks dapat digambarkan sebagai berikut:

selector { declaration; }

selector { properti:value; }

• selector (pemilih): adalah nama elemen html yang dipilih untuk diatur atau diberi gaya. Misalnya elemen: body, heading, paragraf dan lainnya.
• declaration (deklarasi) merupakan rincian gaya/style yang akan diberikan untuk selector.
  • Declaration terdiri dari pasangan properti dan value/nilai
  • setiap declaration harus diakhiri dengan tanda titik-koma ( ; ). Dan kelompok declaration harus berada diantara dua tanda kurung-kurawa ( { dan } )
• properti adalah atribut style atau gaya yang ingin anda ubah. Dan setiap properti memiliki nilai atau value.

Contoh css :

body { background-color:lime; }

h1 { font-familly:verdana; }

p { color:blue; font-size:16px; }

Dari 3 contoh sintaks css di atas dapat dijelaskan bahwa body, h1 dan p adalah selector yang dipilih untuk diberi gaya, "background-color:", "font-family:", "color:", "font-size:" adalah properti, sedangkan yang merupakan nilai/value dari properti tadi adalah "lime", "verdana","blue" ,dan "16px".

Satu hal yang harus diingat, jangan menyimpan spasi diantara pasangan value dengan satuannya, misalnya :

p { font-size:12 px }

Contoh diatas dapat kita lihat diantara teks value "12" dan teks satuan "px" terdapat satu spasi, ini tidak dibenarkan. Dan cara penulisan yang benar adalah :

p { font-size:12px; }

Komentar css.

Seperti halnya pada html, pada dokumen css juga kita bisa menyelipkan komentar pada dokument. Komentar memudahkan kita dalam mengedit kode-kode css dikemudian hari apabila serasa ingin mengeditnya.

Komentar dalam css, cara penulisannya dimulai dengan tanda " /* ", dan diakhiri dengan tanda " */ ". Kita dapat menyimpan komentar atau keterangan diantara kedua tanda itu. Kita dapat menempatkan komentar dimanapun yang kita perlukan, bahkan kita bisa menempatkannya diantara properti dalam deklarasi.
Contoh :

/* ini sebuah komentar */
p { text-align:center;
/* ini komentar yang lain */
color:blue; font-family:arial; }

Demikianlah sekedar pendahuluan tentang belajar css. Dan untuk melanjutkan ke materi berikutnya, silakan buka tentang Belajar css Id dan Class.
Semoga berhasil.

back to top
kembali ke atas