CSS Part 11: CSS Text

TEXT CSS



ASSALAMUALAIKUM wr wb.

    Apa kabar teman teman kali ini saya akan membahas tentang tag di css  apa teman teman mengerti jenis jenis tag text di css tidak usah lama lama berikut penjelasannya.




1.Pengertian CSS Text.
  text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit.


2.MAKSUD dan TUJUAN.
  untuk memahami penggunaan sintaks yang mengatur text.

3.BAHAN dan ALAT.
 - laptop/pc
 -web browser contohnya seperti mozilla fire fox atau yang lain
 -memiliki aplikasi seperti sublime text/notepad

 4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur text pada tag HTML.

terdapat beberapa properti yang digunakan untuk mengedit text berikut tag yang digunakan untuk mengatur text.

   1.Text Align
   2.Text Decoration
   3.Text Transform
   4.Text Indent
   5.Letter Spacing
   6.Line height
   7.Direction
   8.Word spacing
   9.Text shadow

berikut penjelasan yang ada diatas:

1.text align.
    digunakan untuk mengatur text horisontal.
sebuah text dapat kekiri atau kekanan sejajar.

berikut contoh text align.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        text-align: center;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit.
</p>

</body>
</html>

dibawah ini hasil dari script diatas:



2.text decoration.
    digunakan untuk mengatur atau menghapus dekorasi dari text.
    text decoration biasanya digunakan untuk menghilangkan garis bawah pada link.

berikut contoh penggunaan dari text decoration:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        text-align: center;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

ini hasil dari script diatas:

sebelum diberi text decoration.



setelah diberi text decoration.



3.text transform.
    digunakan untuk menentukan huruf besar dan kecil dalam text.text transform mempunyai beberapa tag dalam css,seperti uppercase,lowercase,capitalize.
berikut contoh penggunaan text transform:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        text-align: center;
        text-transform: uppercase;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

berikut hasilnya:




4.text indent.
    digunakan untuk menentukan indentasi dari baris pertama dari text.

contoh dari text indent:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        text-align: center;
        text-transform: uppercase;
        text-indent: 80px;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

berikut hasilnya:



5.letter spacing.
    untuk menentukan ruang antara karakter dalam text.

contoh penggunaan letter spacing:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        text-align: center;
        text-transform: uppercase;
        text-indent: 80px;
        letter-spacing: 6px;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

berikut hasilnya:




6.line height.
    digunakan untuk menentukan ruang antara garis.

dibawah ini penggunaan dari line height.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        text-align: center;
        text-transform: uppercase;
        text-indent: 80px;
        letter-spacing: 6px;
        line-height: 24px;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

berikut hasilnya:




7.direction
 untuk mengubah arah text dari unsur.

berikut script yang digunakan untuk direction.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        direction: rtl;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

berikut hasilnya:




8.word spacing.
    digunakan untuk menentukan ruang antara kata kata dalam sebuah text.

contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        word-spacing: 30px;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

dibawah ini hasilnya:




9.text shadow.
    digunakan untuk menambah bayangan untuk text.

contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    p{
        text-shadow: 9px 5px #68ab62;
        font-size: 40px;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
<p>
     text adalah tulisan yang ada di website yang biasanya dibaca oleh penggunjung.kita dapat mengatur gaya text yang ingin diedit. <a href="http://www.w3schools.com">W3Schools.com</a>
</p>

</body>
</html>

ini hasil dari script diatas




          Sekian artikel dari saya terima kasih dan semoga bermanfaat.

REFERENSI:

            WASSLAMUALAIKUM wr wb.

Komentar

Posting Komentar

Postingan populer dari blog ini

how to upgrade php5.6 ke php 7.0

Gambar
UPGRADE PHP5.6 KE PHP7.0 ASSALAMUALAIKUM wr wb.     pada artikel kali ini saya akan membahas tentang bagaimana mengupgrade php5.6 ke php7.0 1.PENGERTIAN.     php yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.  2.MAKSUD DAN TUJUAN.    untuk mengetahui fitur apa saja yang baru dari php7 dibandingan dengan php sebelumya. 3.ALAT DAN BAHAN. - laptop/komputer yang terinstall os linux. -koneksi internet.; -web browser. 4.WAKTU PELAKSANAAN.    sekitar kurang lebih 15 menit tergantung koneksi internet. 5.PEMBAHASAN.     kelebihan dan kekurangan php 1.kelebihan.             -Bisa membuat Web menjadi Dinamis.     -PHP bersifat Open Source yang berarti dapat digunakan oleh siapa saja secara gratis.     -Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem Operasi karena PHP berjalan secara Web Base yag artinya semua Sistem Oper
Terus membaca

CSS Part 12: FONT CSS

Gambar
FONT CSS ASSALAMUALAIKUM wr wb.     apa kabar teman teman kali ini saya akan membahas tentang macam macam font teman teman yang pernah menggunakan ms word pasti pernah menggunakan jenis font apa tapi saya tidak membahas tentang ms word tapi font yang ada di css berikut artikel yang membahas tentang font. 1.Pengertian CSS Font.     metode untuk mengatur huruf pada elemen tag html. 2.MAKSUD dan TUJUAN.   untuk mengetahui cara penggunaan font. 3.BAHAN dan ALAT.  - laptop/pc  -web browser contohnya seperti mozilla fire fox atau yang lain  -memiliki aplikasi seperti sublime text/notepad  4.Materi CSS memberikan kita kemampuan penuh untuk mengatur jenis huruf elemen pada tag HTML. properti CSS yang berhubungan dengan yang digunakan dalam CSS font antara lain :         1.font family     2.font style     3.font size     4.font weight     5.font variant berikut contoh penerapan pada tag font diatas: 1.font family.     adalah tag yang digunakan untuk mengatur jenis pada h
Terus membaca

MENGANTI TAMPILAN THEME PADA WORDPRESS

Gambar
WORDPRESS ASSALAMUALAIKUM wr wb.    pada kesempatan kali ini saya akan menjelaskan bagaimana menganti tampilan theme pada wordpress. 1.PENGERTIAN.         adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). 2.MAKSUD DAN TUJUAN.        untuk bisa menganti tampilan wordpress sesuka kita. 3.ALAT DAN BAHAN.  -laptop/komputer.  -wordpress.  -web browser. 4.LAMA PELAKSANAAN.    sekitar 5 menit. 5.PELAKSANAAN.     1.buka web browser dan masuk ke wordpress. 2.pilih tampilan dan kilk tambahkan tema baru. 3.setelah pilih tema yang anda sukai dan klik install jika sudah klik aftifkan. 4.berikut hasil tampilan setelah diganti tampilan.     sekian dari artikel kali ini terima kasih telah berkunjung. WASSALAMUALAIKUM wr wb.
Terus membaca