Cara menggunakan apa itu script css?

Oke sekarang kita belajar Cara Memasang Script CSS ke HTML, untuk pemasangan script CSS ke html ada 3 cara yaitu Inline CSS, Internal CSS dan External CSS. Tulisan ane yang sekarang bakalan ngebahas 3 cara tersebut sesuai yang ane pelajarin.

Table of Contents Show

1. Inline CSS.
Menggunakan CSS Dengan HTML
2. Internal CSS.
Menggunakan CSS Dengan HTML
3. External CSS.
Menggunakan CSS Dengan HTML
Apa itu script CSS?
Bagaimana cara kerja CSS?
Bagaimana cara menulis CSS?
CSS menggunakan bahasa apa?

Inline CSS

Inline CSS merupakan cara penulisan kode CSS ke dalam tag HTML secara langsung. Untuk penulisan kode tersebut diawali dengan atribut "style" di dalam tag HTML yang bersangkutan dan kemudian diikuti dengan property dan value. Berikut contoh penggunaanya:

<html>
<head>
<title>Belajar Inline CSS</title>
</head>
<body>
<h1 style="text-align:center; color:blue;">Heading Inline CSS </h1>
<p style="text-align:center; color:blue;">Paragraph pertama Inline CSS.</p>
</body>
</html>

Internal CSS/Embedded CSS

Internal CSS merupakan metode penulisan script/kode CSS diantara tag <head>...</head>. Untuk penulisan kode CSS tersebut diawali dengan tag <style> dan diakhiri tag </style>. Contoh penggunaan seperti yang udah ane bikin di tulisan sebelumnya "Class dan Id CSS".

External CSS

External CSS merupakan cara penulisan script CSS yang terpisah dengan file HTML. Cara penulisan ini yang paling ane suka, soalnya pake cara ini cukup punya satu file CSS bisa digunakan untuk semua halaman website, tapi setiap halaman website tersebut harus nge-link ke file CSS yang kita buat. Untuk contoh pembuatan external CSS ada 2 langkah, yaitu:

1. Membuat file CSS
Langkah pertama yaitu membuat file CSS. Untuk cara pembuatan sama seperti membuat file HTML, bisa memakai notepad di sistem operasi microsoft windows atau gedit di sistem operasi ubuntu, namun untuk nama ekstensi/akhiran filenya bukan ".html" melainkan ".css". Berikut contoh script CSS:

{

text-align:center;

color:blue;

}

{

text-align:center;

color:red;

}

Simpan script yang telah dibuat tadi dengan nama "style.css" tanpa tanda kutip atau beri nama bebas namun harus berakhiran ".CSS".

2. Membuat file HTML
Langkah selanjutnya membuat file HTML. Untuk pembuatan file HTML sama seperti tulisan sebelumnya tentang Mengenal HTML dan Cara Menggunakan HTML, namun kita tambahkan baris script berikut <link rel="stylesheet" type="text/css" href="mystyle.css"> diantara tag dan . Berikut contoh penulisan dan hasilnya pada gambar di bawah:

Ketika berselancar di internet, Anda sesungguhnya mengakses atau membuka laman-laman web (web pages). Laman web sendiri adalah dokumen yang diakses melalui internet menggunakan web browser dengan mengetikkan URL atau mengklik link untuk laman web tersebut. Ada dua teknologi utama untuk membuat laman web yaitu HTML dan CSS. Keduanya mempunyai peran berbeda namun tidak terpisahkan dalam pembuatan laman web modern.

Untuk sebuah laman web, HTML ini berperan untuk menentukan struktur dan tipe konten seperti paragraf, heading, list dan image, sedangkan CSS lebih ke penyajian struktur dan konten agar lebih menarik seperti layout, color, margin, padding, font-family dan alignment. Tanpa CSS, Anda tetap bisa menyajikan konten di laman web namun dengan tampilan yang tidak menarik.

Baca artikel Tata Cara Penulisan Atau Sintaksis CSS

CSS didesain untuk digunakan dengan HTML. Ada tiga cara berbeda di dalam menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS. Tergantung keperluan, bisa saja ketiga cara menggunakan CSS tersebut dipakai semua dalam membuat laman web. Berikut ini adalah penjelasan singkat untuk masing-masing cara menggunakan CSS dengan HTML:

Baca artikel:

1. Inline CSS.

Inline CSS digunakan untuk memberi style (gaya) pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi style pada tag HTML. Style hanya berlaku untuk tag HTML tersebut. Style di inline CSS memiliki prioritas utama dan yang akan digunakan (rendering) meskipun tag HTML tersebut juga sudah diberi style melalui internal CSS atau external CSS.

Pengunaan inline CSS sebenarnya tidak direkomendasikan karena setiap tag HTML perlu diberi style sendiri. Ketika Anda mengubah style di salah satu tag, untuk mendapatkan style yang konsisten, Anda juga perlu mengubah style pada tag-tag lainnya. Misalnya, semua h1 berwarna merah, ketika Anda ingin mengubah h1 menjadi berwarna hijau, Anda perlu mengubah style di semua h1 satu persatu agar berwana hijau.

Berikut ini adalah contoh kode sederhana:

Menggunakan CSS Dengan HTML

Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.

2. Internal CSS.

Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman web. Style yang diberikan diapit oleh tag

dan diletakkan di bagian elemen head atau tag dari laman web. Anda dapat menggunakan internal CSS bila pemberian style dimaksudkan hanya untuk satu laman web saja dan tidak untuk digunakan di laman web yang lain. Anda dapat menggunakan internal CSS bila kode untuk style tidak terlalu besar atau kompleks.

Berikut ini adalah contoh kode sederhana:

Menggunakan CSS Dengan HTML

3. External CSS.

External CSS adalah file berekstensi .css yang hanya berisi kode-kode style. Tujuan menggunakan external CSS adalah untuk memisahkan kode style dengan struktur dan tipe konten laman web. External CSS dapat diaplikasikan pada lebih dari satu laman web sehingga semua laman web akan memiliki tampilan atau desain yang seragam.

Sebagai contoh, buat file CSS bernama csseksternal.css menggunakan plain text editor seperti Notepad atau Notepad++. Tuliskan kode CSS di bawah ini sebagai style yang akan diberlakukan di laman web. Simpan file CSS di folder yang sama tempat menyimpan file HTML.

body {background-color:yellow;}
h2 {color:red;}
p {color:blue;}

Buat file HTML dan di bagian tag tambahkan elemen link atau tag. Tagini akan digunakan untuk mengacu ke file CSS yang dibuat sebelumnya. Perhatikan penulisanbeserta atributnya untuk mengacu ke file CSS.

Berikut ini adalah contoh kode sederhana:

Menggunakan CSS Dengan HTML

Tiga cara menggunakan CSS dengan HTML di atas menghasilkan tampilan laman web yang sama persis seperti gambar di bawah ini.

Apa itu script CSS?

Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu: External Style Sheet. Internal Style Sheet.

Bagaimana cara kerja CSS?

Cara kerja CSS CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs.

Bagaimana cara menulis CSS?

Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal..

Inline – menuliskan perintah CSS langsung pada elemen HTML..

Internal – menuliskan perintah CSS di bagian <head> HTML..

Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal).

CSS menggunakan bahasa apa?

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja.