Apa saja jenis jenis dari css?

Question

Macam CSS dan Cara Menggunakan CSS - Kali ini saya akan membahas tentang bahasa pemrograman yaitu CSS. Apa itu css? Banyak orang yang awam tentang hal ini, dan untuk para programer web sudah tidak asing lagi dengan bahasa pemrograman web ini dalam pemrograman web selan terdapat CSS juga terdapat bahasa lain yang diantara yaitu PHP, Java script, dll.

Table of Contents Show

Inline style sheet
External style sheet
External style sheet
Apa Itu Fitur Bahasa CSS
Apa Saja Ciri- Ciri CSS
1. Memiliki Gaya Atau Style Yang Kaya
2. Mudah Digunakan Dan Dimodifikasi
3. Aplikasi Multi-Halaman
3. Cascade
4. Kompresi Halaman
Apa Itu Jenis Css Yang Ada?
1. Gaya Sebaris (Inline Style)
2. Gaya internal (Internal Style)
3. Gaya eksternal (external style)
Apa Itu Kode Css?
Apa yang dimaksud dengan CSS dan berikan contohnya?
Apa saja yang dikendalikan oleh CSS?
Apa itu CSS dan apa fungsinya?
Apa peran utama CSS?

CSS merupakan kepanjangan dari Cascading Style Sheet yaitu adalah bahasa pemrograman WEB yang berfungsi untuk memperindah tampilan pada sebuah website, seperti mengatur background, border, color, height, width, opacity, animasi, dll.

Aplikasi pengembang pemrograman web memiliki banyak pilihan yang sering saya gunakan yaitu atom anda juga dapat menggunkan notepad++, notepad, sublime, Vim, gEdit dan masih ada banyak lagi untuk software text editor.

Sebelum belajar lebih dalam lagi mengenai Code-Code CSS anda harus mengerti bagaimana code css tersebut dipanggil agar muncul pada tampilan web yang sedang dibuat. Dalam CSS terdapat 3 jenis dalam penggunaannya yaitu inline style sheet,external style sheet, embedded style sheet.

Inline style sheet

Yang pertama adalah Inline style sheet yaitu sebuah pemangilan code pemrograman yang terletak pada objek itu langsung. Maksudnya saat kita membuat sebuah elemen paragraf misalnya, dan anda ingin mengganti ukuran font dan warna pada elemen paragraf tersebut, anda cukup melakukan editing langsung pada elemen paragraf tersebut dengan menambahkan perintah Style=“” tanpa harus mengeditnya pada halaman / page yang lain.

Contoh penerapan :

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>uji coba inponow</title>
  </head>

  <body>

      <!-- ini merupakan contoh inline css -->

      <p style="font-size:45px;color:#3d63d5;padding:20px;">Gibran Aldi</p>

  </body>

</html>

External style sheet

Jenis CSS selanjutnya adalah External style sheet yaitu pemanggilan code css yang terletak pada luar css/luar dari laman coding yang akan dipanggil dengan code <link rel="stylesheet" href=“namahalamancss.css"> yang di dukung atau dapat di panggil melalui elemen id dan class. Cara ini sering digunakan oleh banyak programmer web design karena lebih praktis ( hanya dengan satu halaman yaitu bernama style.css anda dapat mendesain lebih dari 3 halaman web ).

Contoh penerapan :

External style sheet

Dan yang terakhir, Embedded style sheet yaitu pemanggilan code css yang biasanya terletak tepat dibawah <head></head> akan tetapi masih berada pada satu laman yang sama, yang dapat dipanggil dengan code id, class.

Contoh penerpan :

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">
    <title>uji coba CSS inponow</title>

  </head>

    <style media="screen">

      .paragraf {
        font-size:45px;
        color:#3d63d5;
        margin: 50px;
        font-family: Product Sans; 
      }

    </style>

  <body>

     <!-- ini merupakan contoh Embedded style sheet -->

      <p class="paragraf">Gibran Aldi</p> 

  </body>

</html>

Kode diatas kemudian akan di panggil memalui <link rel="stylesheet" href=“paragraf.css"> dimana paragraf.css merupakan nama file css yang saya buat dan dapat dirubah sesuai keinginan teman-teman. Gambar dibawah ini merupakan hasil dari koding di atas :

Jika kalian semua mulai tertarik untuk belajar lebih lanjut mengenai CSS dan bahasa pemrograman lainnya anda dapat belajar di w3scool.com, codepen.com, freecodecamp.org dan masih banyak lagi situs situs penyedia pembelajaran pemrograman web, atau request aja pada saya. Mungkin itu saja yang dapat saya sampaikan pada artikel Cara Memakai CSS dan Jenis - Jenis CSS (Cascading Style Sheet), semoga dapat bermanfaat.

Bagi pengembang web profesional tentu tidak asing dengan apa itu CSS. Namun bagi pemula tentunya masih asing mendengar nama CSS.

Nama lengkap bahasa Inggris CSS adalah Cascading Style Sheets. Juga dikenal sebagai String Style Lists, Cascading Style Sheets, Concatenating Style Sheets dan Hierarchical Style Sheets. Ini adalah bahasa komputer yang digunakan untuk menambahkan gaya ke dokumen terstruktur.

Cascading Style Sheets (Bahasa Inggris) singkatan: CSS juga dikenal sebagai String Style List, Cascading Style Sheet, Cascading Style Sheet, Hierarchical Style Sheet adalah style sheet yang digunakan untuk dokumen terstruktur seperti dokumen HTML atau dokumen XML.

Ini merupakan bahasa komputer untuk menambahkan gaya seperti font, spasi dan warna, dan lain-lain. Seperti yang didefinisikan dan dikelola oleh W3C. CSS dibagi menjadi beberapa tingkatan: CSS1 sekarang tidak digunakan lagi, CSS2.1 adalah standar yang direkomendasikan dan CSS3 dibagi menjadi modul-modul kecil dan sedang distandarisasi.

CSS3 sekarang didukung oleh sebagian besar browser modern, sedangkan versi CSS4 berikutnya masih dalam pengembangan.

CSS terutama digunakan untuk mendesain gaya halaman web dan mempercantik halaman web. CSS tidak hanya dapat memodifikasi halaman web secara statis, tetapi juga secara dinamis memformat berbagai elemen halaman web dengan berbagai bahasa skrip.

CSS dapat melakukan kontrol presisi tingkat piksel atas tata letak posisi elemen di halaman web. Mendukung hampir semua gaya ukuran font dan memiliki kemampuan untuk mengedit objek halaman web dan gaya model.

Apa Itu Fitur Bahasa CSS

CSS menyediakan deskripsi gaya untuk bahasa markup HTML yang mendefinisikan bagaimana elemen di dalamnya ditampilkan. CSS merupakan terobosan dalam bidang desain web. Ini dapat digunakan untuk memodifikasi gaya kecil untuk memperbarui semua elemen halaman yang terkait dengannya.

Apa Saja Ciri- Ciri CSS

1. Memiliki Gaya Atau Style Yang Kaya

CSS menyediakan tampilan gaya dokumen yang kaya dan kemampuan untuk mengatur properti teks dan latar belakang. Memungkinkan pembuatan batas untuk elemen apa pun itu dalam CSS.

Serta jarak antara batas elemen dan elemen lainnya dan jarak antara batas elemen dan konten elemen. Memungkinkan teks akan diubah sesuka hati Kapitalisasi, pemangkasan, dan efek halaman lainnya.

2. Mudah Digunakan Dan Dimodifikasi

CSS dapat mendefinisikan gaya dalam atribut gaya elemen HTML atau di bagian header dokumen HTML. Atau mendeklarasikan gaya dalam file CSS khusus untuk referensi oleh halaman HTML. Singkatnya, lembar gaya CSS dapat menyimpan semua deklarasi gaya secara terpadu untuk pengelolaan terpadu.

Selain itu, elemen dengan gaya yang sama dapat diklasifikasikan dan ditentukan menggunakan gaya yang sama. Atau gaya dapat diterapkan ke semua tag HTML dengan nama yang sama atau gaya CSS dapat ditetapkan ke elemen halaman.

Jika kita ingin mengubah gaya, kita hanya perlu menemukan deklarasi gaya yang sesuai dalam daftar gaya untuk dimodifikasi.

3. Aplikasi Multi-Halaman

Halaman gaya CSS dapat disimpan dalam file CSS terpisah. Sehingga kita dapat menggunakan lembar gaya CSS yang sama di beberapa halaman. Secara teori, lembar gaya CSS bukan milik file halaman mana pun dan dapat direferensikan ke file halaman mana pun. Dengan cara ini, gaya beberapa halaman dapat disatukan.

3. Cascade

Sederhananya, cascading adalah menyetel gaya yang sama beberapa kali pada sebuah elemen yang akan menggunakan nilai atribut set terakhir. Misalnya, jika kumpulan lembar gaya CSS yang sama digunakan untuk beberapa halaman di sebuah situs dan beberapa elemen di beberapa halaman ingin menggunakan gaya lain.

Lembar gaya terpisah dapat ditentukan untuk gaya ini dan diterapkan ke halaman. Gaya yang ditentukan kemudian ini akan menggantikan pengaturan gaya sebelumnya. Dan apa itu yang Anda lihat di browser akan menjadi kumpulan gaya terakhir yang sebelumnya sudah di buat di CSS.

4. Kompresi Halaman

Di situs web yang menggunakan HTML untuk menentukan efek halaman, tabel dan elemen font dalam jumlah besar atau berulang sering diperlukan untuk membentuk gaya teks dengan berbagai spesifikasi.

Konsekuensinya adalah sejumlah besar tag HTML akan dihasilkan. Sehingga meningkatkan ukuran file halaman. Menempatkan deklarasi gaya dalam lembar gaya CSS saja dapat sangat mengurangi ukuran halaman.

Sehingga waktu yang digunakan saat memuat halaman juga akan sangat berkurang. Selain itu, penggunaan kembali lembar gaya CSS sangat mengurangi ukuran halaman dan mengurangi waktu pengunduhan.

Apa Itu Jenis Css Yang Ada?

Gaya CSS terutama mencakup tiga jenis berikut:

1. Gaya Sebaris (Inline Style)

Bagian dalam struktur, yaitu gaya yang ditulis dalam tag ditulis di awal tag, dalam atribut style.

contoh:

<tag style="style attribute name 1: style attribute value 1; attribute name 2: attribute value 2;...">

2. Gaya internal (Internal Style)

Itu ditulis di dalam halaman HTML, disimpan di tag Head dan gaya ditulis di tag style.

contoh:

<style>
style attribute name 1: 
style attribute value 1; 
attribute name 2: 
attribute value 2
</style>

3. Gaya eksternal (external style)

Ditulis dalam file css.

contoh:

.demo{
    background: linear-gradient(to right,#009688,#d3d3d3);
}
.post-slide{
    margin: 0 15px;
}
.post-slide .post-img{
    overflow: hidden;
}
.post-slide .post-img img{
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: all 1s ease-in-out 0s;
}
.post-slide:hover .post-img img{
    transform: scale(1.08);
}
.post-slide .post-content{
    background: #fff;
    padding: 20px;
}
.post-slide .post-title{
    font-size: 17px;
    font-weight: 600;
    margin-top: 0;
    text-transform: capitalize;
}
.post-slide .post-title a{
    display: inline-block;
    color: #808080;
    transition: all 0.3s ease 0s;
}
.post-slide .post-title a:hover{
    color: #3d3030;
    text-decoration: none;
}

Itu dapat digunakan dengan memanggil ke halaman HTML menggunakan tag berikut ini.

<link type="text/css" rel="stylesheet" href="css/main.css" />

Contoh penggunaan CSS bisa di baca di:

Efek Transisi Menggunakan Properti CSS
Membuat Animasi Gelombang (Wave Animation) Dengan CSS3
Membuat Efek Timeline Vertikal Keren Dengan CSS3 Cocok Untuk Lending Page
Animasi Menu Navigasi Keren Dengan CSS3 Keren Dan Responsive
Membuat Carousel jQuery Dan CSS3 Dengan Layout List Card

Apa Itu Kode Css?

Seperti yang sudah dicontohkan diatas, Kode adalah file sumber yang ditulis oleh programmer dalam bahasa yang didukung oleh alat pengembangan. Dan merupakan seperangkat sistem aturan eksplisit yang mewakili informasi dalam bentuk diskrit dengan karakter, simbol atau simbol sinyal.

Kode css adalah beberapa komposisi bahasa Inggris yang bermakna. Termasuk atribut css bahasa Inggris dan komposisi nilai. kode Css adalah untuk mengontrol gaya tampilan halaman web.

Kode css terdiri dari nama css plus, “{“, plus atribut css, plus nilai atribut dan terakhir diakhiri dengan “}” untuk membentuk pemilih atribut css.

Kesimpulan

Dalam membuat sebuah web tentu harus memahami apa itu CSS. CSS sendiri memiliki banyak fungsi untuk membuat desain web yang indah.

Ada beberapa jenis CSS yang bisa kita gunakan. Dengan fungsi dan kegunaanya, kita dapat menggunakan sesuai dengan apa yang kita rencanakan.

Kode CSS mengacu pada kode dengan sintaks aturan kode CSS biasa, kode ini memiliki fungsi tata letak gaya HTML yang perlu kita pelajari adalah hubungan antara kode CSS dan kode HTML. Kode CSS dan kode HTML dikembangkan menjadi web HTML yang lengkap halaman

Akhirnya menggunakan HTML termasuk setidaknya file kode CSS dan file kode HTML menyematkan program untuk membuat situs web yang lengkap.

Apa yang dimaksud dengan CSS dan berikan contohnya?

CSS adalah teknologi yang berfungsi untuk memperindah tampilan website. CSS adalah singkatan dari Cascading Style Sheets yang sudah digunakan selama bertahun-tahun. Pada sebuah website , selalu terdapat dokumen, gambar, dan teks.

Apa saja yang dikendalikan oleh CSS?

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.

Apa itu CSS dan apa fungsinya?

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

Apa peran utama CSS?

CSS berfungsi untuk menjelaskan dan menata tampilan elemen yang tertulis pada bahasa markup, salah satunya adalah HTML. Dalam arti lain, CSS-lah yang menjelaskan bagaimana elemen HTML di balik layar ditampilkan sedemikian rupa di layar website-mu nanti. Baik HTML maupun CSS, keduanya saling melengkapi.

kode css Contoh CSS CSS adalah Inline CSS