Mengenal dan Belajar CSS - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Mengenal dan Belajar CSS , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel css,
Artikel css3,
Artikel design website,
Artikel html, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Mengenal dan Belajar CSS
link : Mengenal dan Belajar CSS
Assalamualaikum wr. wb. Hai kawan-kawan :) Pada artikel kali ini saya akan menulis artikel mengenai CSS pada pos sebelumnya pernah membahas tentang pengenalan html nah CSS ini erat kaitannya dengan html karna pada umumnya dokumen html itu di percantik tampilannya dengan CSS ya membuat dokumen HTML so beautifull hehe :) tanpa basa-basi lagi yuk simak artikel berikut dibawah:
Apa itu CSS ?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
Selektor { deklarator }
selektor merupakan tag yang html yang akan di definisikan di css semisal tag heading, tag p, b, div,dan lainnya.
Selektor juga terdapat 2 bagian yaitu selektor ID, dan CLASS . Selektor ID bisa ditulis dengan simbol hastag "#" dan untuk selektor CLASS bisa ditulis dengan tanda titik "." . Untuk mendefinisikannya kita tinggal memberi atribut ID atau CLASS nya pada tag html yang akan kita definisikan di css, misal tag <p class="contoh_class">Hello Word</p> dan untuk ID <p id="contoh_id">Hello Word:</p>
Deklarator terbagi menjadi dua yaitu properties dan value.
jadi CSS detail rumusnya yaitu :
Selektor { property : value ; }
Sebagai Contoh yaitu seperti kode berikut:
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<link rel="stylesheet" href="nama_dokumen_cssnya.css">
atau jika css nya berbeda folder dengan dokumen html nya bisa ditulis seperti berikut :
<link rel="stylesheet" href="nama_folder/nama_dokumen_cssnya.css">
Selanjutnya yaitu pengenalan properti-properti pada css :
Anda sekarang membaca artikel Mengenal dan Belajar CSS dengan alamat link https://dev-create.blogspot.com/2019/08/mengenal-dan-belajar-css.html
Judul : Mengenal dan Belajar CSS
link : Mengenal dan Belajar CSS
Mengenal dan Belajar CSS
Mengenal dan Belajar CSS
Assalamualaikum wr. wb. Hai kawan-kawan :) Pada artikel kali ini saya akan menulis artikel mengenai CSS pada pos sebelumnya pernah membahas tentang pengenalan html nah CSS ini erat kaitannya dengan html karna pada umumnya dokumen html itu di percantik tampilannya dengan CSS ya membuat dokumen HTML so beautifull hehe :) tanpa basa-basi lagi yuk simak artikel berikut dibawah:
Apa itu CSS ?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.
Versi-versi Dalam css :
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada halaman website, di antaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.
Versi-versi Dalam css :
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada halaman website, di antaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.
Cara penulisan CSS :
Aturan Penulisan CSS adalah :Selektor { deklarator }
selektor merupakan tag yang html yang akan di definisikan di css semisal tag heading, tag p, b, div,dan lainnya.
Selektor juga terdapat 2 bagian yaitu selektor ID, dan CLASS . Selektor ID bisa ditulis dengan simbol hastag "#" dan untuk selektor CLASS bisa ditulis dengan tanda titik "." . Untuk mendefinisikannya kita tinggal memberi atribut ID atau CLASS nya pada tag html yang akan kita definisikan di css, misal tag <p class="contoh_class">Hello Word</p> dan untuk ID <p id="contoh_id">Hello Word:</p>
Deklarator terbagi menjadi dua yaitu properties dan value.
jadi CSS detail rumusnya yaitu :
Selektor { property : value ; }
Sebagai Contoh yaitu seperti kode berikut:
h1 {
color: #0789de;
}
untuk cara penulisan nya sendiri ada beberapa cara yang sering digunakan programer , yaitu :
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain. Contoh penulisan CSS dengan metode
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain. Contoh penulisan CSS dengan metode
Inline Style Sheet :
<html> <head> <title>Contoh Bentuk Inline </title> </head> <body bgcolor="#FFFFFF"> <p id="cth1"> Ini adalah contoh tag P tanpadiformat menggunakan CSS </p> <p id="cth2" style="font-size:20pt"> Tag P ini diformat dengan besar font 20 point </p> <p id="cth3" style="font-size:14pt; color:red"> Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p> </body> </html>
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {
background:#0000FF;
color:#FFFF00;
margin-left:0.5in;
}
h1 {
font-size:18pt;
color:#FF0000 ;
}
p {
font-size:12pt;
font-family:arial;
text-indent:0.5in;
}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
Link Style
untuk cara ini kawan semua bisa menuliskan script nya di bagian <head>...</head> yaitub dengan menuliskan script sebagai berikut :<link rel="stylesheet" href="nama_dokumen_cssnya.css">
atau jika css nya berbeda folder dengan dokumen html nya bisa ditulis seperti berikut :
<link rel="stylesheet" href="nama_folder/nama_dokumen_cssnya.css">
Selanjutnya yaitu pengenalan properti-properti pada css :
Contoh property dan values pada background
| Property | Values | Keterangan |
| Background-image | Url | Alamat gambar yang sudah di aploud |
| Background-repeat | ||
| Repeat | Gambar diulang dalam halaman | |
| Repeat-y | Gambar diulang dalam sumbu y | |
| Repeat-x | Gambar diulang dalam sumbu x | |
| no-Repeat | Gambar tidak diulang hanya muncul 1 gambar |
Contoh property dan values pada font
| Property | Values | Keterangan |
| font-family | Arial; | Jenis font adalah arial |
| Font-size | ||
| small; | kecil | |
| medium; | menengah | |
| large; | besar | |
| 12px; | besar 12 pixel (Bisa diganti 12pt) | |
| Font-style | ||
| Normal; | Font normal | |
| Italic; | Font miring | |
| Font-weight | ||
| Normal; | Ketebalan font normal | |
| Bold; | Font Tebal | |
| 100-900 | Ketebalan font dengan nilai dari 100-900 |
Contoh Property Dan Value pada Text
| Property | Values | Keterangan |
| Text-decoration | ||
| none; | Menampilkan text asli | |
| Underline; | Menampilkan Text bergaris bawah | |
| Overline; | Menampilkan text bergaris atas | |
| line-through; | Menampilkan text tercoret | |
| blink; | Menampilkan text berkedip | |
| Text-transform | uppercase; | Menampilkan text huruf besar |
| Text-align | ||
| left; | Text rata kiri | |
| right; | Text rata kanan | |
| center; | Text rata tengah | |
| justify; | Text rata kanan kiri |
Contoh Selector Pada Link
| Selector | Keterangan |
| a:link | Keadaan awal link |
| a:hover | Keadaan link saat dikenai mouse |
| a:active | Keadaan link saat di klik |
| a:visited | Keadaan link setelah dikunjungi |
Contoh property dan value pada position
| Property | Values | Keterangan |
| Position | ||
| Static; | Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen | |
| Absolute; | Unsur diposisikan relatif terhadap posisi pertama (tidak statis) | |
| Fixed; | Unsur diposisikan relatif terhadap jendela browser | |
| Relative; | elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke posisi KIRI elemen | |
| Inherit; | Nilai dari properti posisi diwariskan dari elemen induk |
Contoh Property dan Value pada Border
| Property | Values | Keterangan |
| Border | ||
| ukuran border bisa diubah dalam ukuran pixel. Border-style (contoh solid;dotted) merupakan style pada border setiap style tampilan berbeda. Border-color bisa menggunakan warna RGB juga Desimal. Property border bisa diganti dengan border-left; border-right; border-top; border-bottom; | ||
| 1px solid #000; | ||
| 2px dotted #ff0000; | ||
| 3px double blue; | ||
| 5px groove #3300ff; | ||
| 5px ridge #3300ff; | ||
| 5px inset #3300ff; | ||
| 5px outset #3300ff; |
Contoh property dan value pada border-radius
| Property | Values | Keterangan |
| Border-radius | 10px; | Garis melemgkung disemua sisi dengan ukuran 10px |
| border-top-left-radius | 2em 0.5em; | Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda |
| border-top-right-radius | 3em 2.5em; | Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda |
| border-bottom-right-radius | 1em 2em; | Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda |
| border-bottom-left-radius | 2em 1em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda |
| border-bottom-left-radius | 2em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran sama |
Margin dan Padding
Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.
Padding adalah kode yang mengatur seleksi batas jarak dalam seperti memberi jarak pada header dengan batas tepi header misalnya padding:5px; jadi jarak header dengan batas tepinya 5px ke dalam.
Nah sampai disini dulu ya kawan-kawan hehe :) untuk artikel lainnya bisa nunggu admin pos lagi ya
mohon maaf bila kurang lengkap. Wasslamaualaikum wr. wb.
Contoh property dan value pada margin dan padding
| Property | Values | Keterangan |
| margin | 10px 5px 0px 5px; | atas 5, kanan 5, bawah 0, kiri 10 |
| margin-top | 10px; | karak atas 10px |
| margin-right | 5px; | jarak kanan 5px |
| margin-bottom | 2em; | jarak bawah 2em |
| margin-left | 3em; | jarak kiri 3en |
| padding | 2em; | atas, kanan, kiri dan bawah 2em |
Contoh property dan value pada display
| Property | Values | Keterangan |
| DISPLAY | ||
| None; | Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut | |
| Block; | Berfungsi untuk memberi blok baru atau baris baru seperti kode <br> dan <p> | |
| Inline; | Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada elemen tersebut | |
| Inline-block; | jika layar tidak muat maka secara otomatis membuat baris baru. |
Nah sampai disini dulu ya kawan-kawan hehe :) untuk artikel lainnya bisa nunggu admin pos lagi ya
mohon maaf bila kurang lengkap. Wasslamaualaikum wr. wb.
Demikianlah Artikel Mengenal dan Belajar CSS
Sekianlah artikel Mengenal dan Belajar CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Mengenal dan Belajar CSS dengan alamat link https://dev-create.blogspot.com/2019/08/mengenal-dan-belajar-css.html
