Menulis CSS Di HTML

Menulis CSS di HTML
1. Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS juga dikenal
dengan sebutan Embeded CSS. Tag <style> bisa ditulis di dalam tag <head>, bisa juga
ditulis di dalam tag <body>. Namun kebanyakan orang menulisnya di dalam <head>.
Ex: <head>
<style type=”text/css”>
selector {properti: value;}
</style> </head>
2. Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS
ditulis di dalam file khusus yang berekstensi .css. Ex File CSS: asw.css
Menghubungkan File CSS ke HTML :
(1) Menggunakan tag link: <link rel=”stylesheet” type=”text/css” href=”asw.css”> dan Bila file
html di folder di dalam folder bsa gunakan ../ di href untuk menaikan 1 level
(2) Menggunakan @import: <style type=””text/css”> @import “asw.css”; </style>
(3) Selain menggunakan eksternal CSS yang ada di satu folder dengan project, kita juga bisa
gunakan CSS yang sudah ada di internet atau domain lain.
Ex: <link rel="stylesheet" href="https://google.com/css/style.css" />
Inline CSS adalah kode CSS yang ditulis langsung pada atribut style di elemen HTML. Kode
CSS ditulis langsung tanpa menggunakan kurung kurawal{ ... }. Kemudian properti tetap
dipisah dengan titik koma.
Ex: <h2 style="color:red; font-family: sans;">Ini judul artikel</h2>
Inline CSS biasanya digunakan untuk memberikan style pada satu elemen saja. CSS pada
inline akan lebih diprioritaskan dibandingkan dengan internal dan eksternal.
Sintaks Dasar di CSS

CSS punya sintaks atau tata cara penulisan kode yang harus diikuti. Jika kita salah tulis, bisa
jadi CSS yang kita buat tidak akan menghasilkan apa-apa di tampilan web.
Struktur Dasar CSS

Struktur kode CSS terdiri dari tiga bagian:
1. Selektor
2. Blok Deklarasi.
3. Properti dan nilanya.
Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita beri style, Selektor
dapat berupa nama tag, class, id, dan atribut.
h2 { Selektor dengan nama tag
color: blue
}
.bg-yellow { Selektor dengan class
backgound-color: yellow;
}
#header { selektor dengan ID elemen
background: grey;
}
input[type=text]{ Selektor dengan Atribut
background: yellow;
}
Blok Deklarasi
Blok deklarasi adalah tempat kita menuliskan atribut atau properti CSS yang akan diberikan
ke pada elemen yang telah diseleksi.
p{ Artinya, kita akan mengatur ukuran font

font-size: 18px; dari tag <p> sebesar 18px. Blok
} deklarasi dimulai atau dibuka dengan
tanda kurung { lalu ditutup dengan }.
h1, h2, h3, h4, h5, h6 { Satu blok deklarasi, bisa dipakai oleh
color: teal; lebih dari satu selektor. (Ini artinya kita
} memberikan warna sama untuk semua
tag <h1> sampai <h6>.)
Properti dan Nilainya

Properti adalah sekumpulan aturan yang akan diberikan kepada elemen yang dipilih.
properti: "nilai"; Setiap properti harus diakhiri dengan titik

koma (;). Apabila hanya terdapat satu properti,
boleh tidak menggunakan titik koma.
font-family: "Times new roman"; Nilai untuk properti kadang diapit tanda petik,
kadang juga tidak. Biasanya yang diapit
dengan tanda petik adalah nilai yang berupa
teks dan memiliki spasi.
font-family: "Times new roman", Nilai properti juga bisa kita berikan lebih dari
Georgia, Roboto; satu. Ini bisanya kita pakai untuk memberikan
nilai opsional. Misalnya font Times new roman
tidak ada maka yang akan dipakai adalah
Georgia, begitu juga seterusnya.
Selektor di CSS
Selektor adalah katakunci dan simbol yang digunakan pada CSS untuk menyeleksi
atau memilih elemen HTML.
Ada 6 macam selektor di CSS:

Selektor Tag
Selektor Class
Selektor ID
Selektor Atribut
Selektor Universal
Selektor Pseudo
1. Selektor Tag disbut juga Type Selector. Selektor ini akan memilih elemen
berdasarkan nama tag.
p{ Pilih semua elemen <p> lalu atur warna teksnya
color: blue; menjadi biru.
}
2. Selektor class adalah selektor yang memilih elemen berdasarkan nama class
yang diberikan. Selektor class dibuat dengan tanda titik di depannya.
.pink { Kita memiliki selektor class beranam .pink. Nah cara
color: white; menggunakan selektor ini di HTML adalah dengan
background: pink; menambahkan atribut class di dalamnya:
padding: 5px; <p>Hello <b class="pink">CSS</b>Wrold</p>
}
.text-white { Selektor class dapat kita gunakan pada elemen yang
color: white; kita inginkan. Sebuah elemen HTML dapat
} menggunakan satu atau lebih class:
<h2 class="text-white bg-teal">Hello World</h2>
.bg-teal {
background: teal;
}
3. Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh
digunakan oleh satu elemen saja. Selektor ID ditandai dengan tanda pagar (#) di
depannya.
#header { Code pada HTML:
background: teal;
color: white; <header id="header">
height: 100px; <h1>Selamat Datang di Website Saya</h1>
padding: 50px; </header>
}
4. Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut.

Selektor ini hampir sama seperti selektor Tag.
input[type=text] { Artinya kita akan memilih semua elemen <input> yang
background: none; memiliki atribut type='text'.
color: cyan; Code pada HTML:
padding: 10px;
border: 1px solid <input type="text" placeholder="ketik sesuatu..." />
cyan;
}
5. Selektor universal adalah selektor yang digunakan untuk menyeleksi semua
elemen pada jangkaua (scope) tertentu.
*{ Artinya semua elemen akan memiliki garis solid
border: 1px solid dengan ukuran 1px dan berwarna grey.
grey;
}
*{ Selektor universal bisanya digunakan untuk me-reset
padding: 0; CSS. Kenapa harus di-reset?
margin: 0; Pada halaman HTML, ada beberapa CSS bawaan
} browser seperti padding dan margin pada elemen
tertentu. Reset bertujuan untuk menghilangkan
padding dan margin tersebut.
6. Pseudo selektor adalah selektor untuk memilih elemen semu seperti state pada elemen,
elemen before dan after, elemen ganjil, dan sebagainya. Ada dua macam pseudo selektor.
1. Pseudo-class adalah selektor untuk memilih state pada elemen. Contohnya seperti
elemen saat diklik, saat fokus, saat disentuh, dan lain sebagainya. Dengan selektor ini kita
bisa menentukan tampilan dari elemen pada state tersebut.
a:hover { Kita akan memberikan warna hijau pada elemen <a>
color: green; saat dia di-hover atau disentuh pointer:
} <a href="#">Hello World</a>
:link Untuk memlih link yang belum dikunjungi.

:visited Untuk memlih link yang sudah dikunjungi.
:active Untuk memilih elemen yang sedang aktif, seperti saat
diklik.
:focus Untuk memlih elemen yang sedang dalam keadaan
fokus, misal teks lagi diinput.
:checked Untuk memilih elemen yang dicentang pada
checkbox.
More: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
2. Pseudo-element adalah selektor untuk memilih elemen semu. Elemen semu yang saya
maksud di sini adalah elemen yang seolah-olah kita tambahkan di HTML.
p::first-line { Untuk memberikan style hanya pada baris pertama
color: magenta; saja. Cth: <p>Hello World 1 // ini tereksekusi
} Hello World 2</p>
::before Untuk memilh elemen semu sebelum elemen.

::after Untuk memilh elemen semu setelah elemen.
::marker Untuk memilh marker pada list.
::placeholder Untuk memilih teks placeholder pada elemen input
teks.
More: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Menulis CSS Di HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Menulis CSS Di HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Menulis CSS di HTML

(2) Menggunakan @import: <style type=””text/css”> @import “asw.css”; </style>

Sintaks Dasar di CSS

Struktur Dasar CSS

p{ Artinya, kita akan mengatur ukuran font

Properti dan Nilainya

properti: "nilai"; Setiap properti harus diakhiri dengan titik

Ada 6 macam selektor di CSS:

4. Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut.

:link Untuk memlih link yang belum dikunjungi.

::before Untuk memilh elemen semu sebelum elemen.

Anda mungkin juga menyukai