Pengertian dan penjelasan Lengkap tentang Css


CSS adalah kependekan menurut Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan buat menghias dan mengatur gaya tampilan/layout halaman web agar lebih elegan dan menarik. CSS adalah sebuah teknologi internet yg direkomendasikan sang World Wide Web Consortium atau W3C dalam tahun 1996. Awalnya, CSS dikembangkan di SGML dalam tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung poly bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) & Mozilla XUL (XML User Interface Language)

Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau jua dikenal CSS1 yang mendukung format, rona font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang pada dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan menaikkan Kemampuan CSS2 ke  CSS3.

CSS dipakai oleh web programmer & juga blogger buat menentukan warna, tata letak font, dan seluruh aspek lain dari presentasi dokumen pada situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

Sebagai seorang blogger, Anda juga wajib  tahu apa itu CSS dan bagaimana menggunakannya agar mudah buat merancang blog anda. Kode CSS bertujuan untuk pembaca blog kita agar nyaman dan betah berlama-usang pada blog kita sehingga pageviews situs kitapun meningkat. Namun, itu seluruhnya tergantung bagaimana kita menggunakannya sebagai untuk bisa memikat pengunjung.

PENGENALAN DASAR

Cascading Style Sheet terdiri berdasarkan Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP & bahasa pemrograman lainnya, CSS juga memiliki sebuah aturan yg menulis itu sendiri.

Untuk pengertian bebasnya, CSS merupakan deretan kode program yg digunakan buat mendesain atau mempercantik tampilan laman HTML. Dengan CSS kita sanggup mengganti desain menurut text, rona, gambar dan latar belakang menurut (hampir) seluruh kode tag HTML.

CSS umumnya selalu dikaitkan dengan HTML, lantaran keduanya memang saling melengkapi. HTML ditujukan buat menciptakan struktur, atau konten dari page web. Sedangkan CSS dipakai buat tampilan berdasarkan page web tadi. Istilahnya, “HTML for content, CSS for Presentation”.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yg bisa mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya buat dapat digunakan bersama-sama pada beberapa berkas (arsip). Pada umumnya CSS digunakan buat memformat tampilan laman web yang dibentuk menggunakan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, rona tabel, berukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, & parameter lainnya. CSS merupakan bahasa style sheet yg digunakan buat mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita buat menampilkan laman yang sama menggunakan format yang tidak sama.

Nama CSS didapat menurut fakta bahwa setiap deklarasi style yg berbeda dapat diletakkan secara berurutan, yang lalu membangun hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri adalah sebuah teknologi internet yang direkomendasikan sang World Wide Web Consortium atau W3C pada tahun 1996.Setelah CSS distandardisasikan, Internet Explorer & Netscape melepas browser terbaru mereka yang telah sesuai atau paling nir hampir mendekati menggunakan standar CSS.

Fungsi & Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan page web yang semakin kompleks. Pada awal kemunculan HTML, kita mampu menciptakan suatu paragraf bewarna merah menggunakan menulis langsung kode tadi didalam tag HTML, atau menciptakan latar belakang sebuah laman dengan rona biru.

Versi Css

Untuk saat ini masih ada tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan buat memenuhi kebutuhan terhadap format dokumen supaya bisa ditampilkan pada printer, sedangkan CSS3 merupakan versi terkini berdasarkan CSS yang sanggup melakukan poly hal pada desain website. CSS3 mendukung penentuan posisi konten, downloadable, huruf font, tampilan dalam tabel /table layout dan media tipe buat printer. Kehadiran versi CSS yg ketiga diperlukan lebih baik berdasarkan versi pertama & ke 2.

CSS3 pula bisa melakukan animasi pada page website, di antaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan pada hal kompatibilitas websitenya dalam smartphone menggunakan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru dalam CSS3 misalnya: multiple background, border-radius, drop-shadow, border-image, CSS Math, & CSS Object Model.

Penulisan CSS

Pada saat masuk CSS biasanya keluar kode berikut:

h1 {
color: #0789de;
}

Bagian pertama sebelum tanda '' dinamakan selector, sedangkan yang diapit oleh '' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan pada atas merupakan h1, sedangkan color adalah property, & #0789de merupakan value.

Selain itu ada 3 metode penulisan CSS atribut, yaitu :

Inline Style Sheet


CSS didefinisikan pribadi dalam tag HTML yang bersangkutan. Cara penulisannya cukup menggunakan menambahkan atribut style="..." pada tag HTML tadi. Style hanya akan berlaku pada tag yang bersangkutan, & tidak akan memengaruhi tag HTML yg lain.

Berikut contohnya:

<html>
<head>
<title>Contoh Dari Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpa diformat dengan CSS </p>

<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan ukuran besar font 20 point </p>

<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan ukuran 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 yg akan dipakai buat tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contohnya

<html>
<head>
<title>Contoh Bentuk dari 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 ukuran besar font 12 point dengan tipe font Arial dan memiliki identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan menggunakan warna background biru</p>
</body>
</html>

Shorthand CSS


Teknik shorthand merupakan cara mempersingkat penulisan kode CSS yang memungkinkan untuk tetapkan nilai beberapa property secara bersamaan. Teknik ini bisa berhemat karakter, berhemat energi, dan tentu saja berhemat waktu. Kode jadi terlihat lebih rapi, efisien, dan seringkali lebih mudah dibaca.
Dalam CSS, adalah masuk akal jika satu property memiliki poly elemen. Misalnya dalam CSS margin memiliki 4 property buat setiap sisi elemen:

1. Margin-top
2. Margin-right
3. Margin-bottom
4. Margin-left.

Jika memakai teknik shorthand CSS, maka penulisan semua property bisa disatukan demi terciptanya kode yang lebih ringkas. Urutan penulisan syntax dalam teknik shorthand harus benar agar sinkron menggunakan style yg diinginkan.
Untuk ketika ini metode penulisan shorthand CSS tersedia buat beberapa property berikut:

1. Margin.
2. Padding.
3. Font.
4. Background.
5. Border.
6. List.

Margin

margin: 3px 5px 7px 10px;

Maksudnya :

margin-top: 3px;
margin-right: 5px;
margin-bottom: 7px;
margin-left: 10px;

Padding

padding: 3px 5px 7px 10px;

Maksudnya:

padding-top: 3px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 10px;

Font


font: italic bold 14px/30px Arial;

Maksudnya:

font-style: italic;
font-weight: bold;
font-size: 14px;
line-height: 30px;
font-family: Arial;

Background

background: #cc0000 url('igniel.jpg') no-repeat top center;

Maksudnya:

background-color: #cc0000;
background-image: url('igniel.jpg');
background-repeat: no-repeat;
background-position: top center;

Border

border: 3px solid #0000cc;

Maksudnya:

border-width: 5px;
border-style: solid;
border-color: #0000cc;

List


list-style: disc inside url('dot.gif');

Maksudnya:

list-style-type: disc;
list-style-position: inside;
list-style-image: url('dot.gif');

Contoh CSS

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>Ini sebuah paragraf.</p>

</body>
</html>


Sifat CSS

Ada 2 sifat CSS yaitu internal & eksternal:

1. Jika internal dipilih, maka script itu dimasukkan secara pribadi ke halaman website yang akan sobat desain. Kalau page web yang lainnya akan dibuat menggunakan model atau tipe yang sama, maka script CSS itu wajib dimasukkan lagi kedalam halaman web yang lain itu.

2. Sifat yang kedua adalah eksternal dimana script CSS dipisahkan dan di letakkan dalam berkas khusus. Nanti, relatif dipakai semacam tautan untuk menuju berkas CSS itu.

Fakta css

Fakta Menggunakan CSS pada antaranya :

1. Telah didukung oleh kebanyakan browser versi terbaru, namun tidak didukung oleh browser-browser lama  .

2. Lebih fleksibel pada penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.

3. Menjaga HTML pada penggunaan tag yg minimal, hal ini berpengaruh terhadap berukuran berkas dan kecepatan pengunduhan.

4. Dapat menampilkan konten primer terlebih dahulu, ad interim gambar bisa ditampilkan sesudahnya.

5. Penerjemahan CSS setiap browser tidak sama, tata letak akan berubah jika dilihat pada banyak sekali browser

6. CSS merupakan layouting "Masa Depan" dengan penggabungan bersama XHTML.

DONASI Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://www.siti-code.net/. Terima kasih.
Newer Posts Newer Posts Older Posts Older Posts

More posts

Comments

Post a Comment

covid-19 indonesia :

Positif
Sembuh
Meninggal