Skip to main content

HTML Styles - CSS

HTML Styles - CSS

Styling HTML dengan CSS

CSS singkatan C ascading S tyle S heets.

CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media lainnya .

CSS menghemat banyak pekerjaan dan juga dapat mengontrol tata letak beberapa  halaman web sekaligus.

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
Inline - dengan menggunakan atribut style dalam elemen HTML
Internal - dengan menggunakan <style> elemen di bagian <head>bagian
Eksternal - dengan menggunakan file CSS eksternal
Cara yang paling umum digunakan untuk menambahkan CSS, adalah menggunakan data file CSS yang terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk menunjukkan penggunaan CSS, dan lebih mudah bagi kamu untuk mencobanya sendiri.
Tip: kamu dapat mempelajari lebih banyak tentang CSS di Materi CSS .

CSS Inline 

CSS inline digunakan untuk menerapkan gaya yang unik untuk elemen HTML tunggal.

CSS inline menggunakan atribut gaya elemen HTML.

Contoh ini menetapkan warna teks dengan <h1> dengan elemen biru:

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Ini adalah Judul Berwarna Biru</h1>

</body>
</html>
Kalian bisa mencobanya disini, Hasil :
CSS Inline
klik gambar untuk memperbesar

CSS internal

CSS internal digunakan untuk menentukan style untuk sebuah halaman HTML.

CSS internal didefinisikan dalam bagian <head> dari halaman HTML, dengan <style> elemen:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Hasil :
CSS internal
klik gambar untuk memperbesar

CSS eksternal

Sebuah style sheet eksternal digunakan untuk mendefinisikan style untuk banyak halaman HTML.

Dengan style sheet eksternal, kamu dapat mengubah tampilan situs web secara keseluruhan, dengan hanya mengubah satu file!

Untuk menggunakan style sheet eksternal, dengan cara menambahkan link ke dalam <head> pada bagian dari halaman HTML:

Contoh :
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Ini tajuk</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>
Style sheet eksternal dapat ditulis dalam editor teks apapun. file tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.

Berikut adalah code "styles.css" yang ada untuk contoh diatas:
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
Hasil :
HTML Styles - CSS
klik gambar untuk memperbesar


CSS Fonts

CSS colorproperti digunakan untuk mendefinisikan warna teks yang akan digunakan.

CSS font-familyproperti digunakan untuk mendefinisikan font yang akan digunakan.

CSS font-size properti digunakan untuk mendefinisikan ukuran teks yang akan digunakan.

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Ini adalah Tajuk</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>
Hasil :
CSS Fonts
klik gambar untuk memperbesar

CSS Border

CSS borderproperti digunakan untuk mendefinisikan perbatasan sekitar elemen HTML:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Border
klik gambar untuk memperbesar

CSS Padding

CSS paddingproperti digunakan untuk mendefinisikan padding (spasi) antara teks dan perbatasan:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Padding
klik gambar untuk memperbesar

CSS Margin

CSS marginproperti digunakan untuk mendefinisikan margin (ruang) di luar perbatasan:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Margin
klik gambar untuk memperbesar

Id Atribut

Digunakan untuk menentukan gaya tertentu untuk satu elemen khusus, menambahkan idatribut elemen seperti berikut :
<p id="p01">Saya berbeda</p>
kemudian menentukan gaya untuk elemen dengan id tertentu:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
  color: blue;
}
</style>
</head>
<body>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p id="p01">Ini Paragraf style berbeda dengan id p01</p>

</body>
</html>
Hasil :
Id Atribut
klik gambar untuk memperbesar

Catatan: Id dari elemen harus unik dalam suatu halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!

Kelas Atribut

Digunakan untuk menentukan gaya untuk jenis khusus dari elemen, menambahkan classatribut untuk elemen:
<p class="error">Saya berbeda</p>
kemudian menentukan gaya untuk elemen dengan kelas khusus:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
  color: red;
}
</style>
</head>
<body>

<p>Ini Paragraf.</p>
<p>Ini Paragraf.</p>
<p class="error">Ini Paragraf style berbeda dengan class error.</p>
<p>Ini Paragraf.</p>
<p class="error">Ini Paragraf style berbeda dengan class error juga.</p>

</body>
</html>
Hasil :
Kelas Atribut
klik gambar untuk memperbesar

Referensi eksternal

style sheet eksternal dapat dirujuk dengan URL penuh atau dengan path relatif ke halaman web saat ini.

Contoh yang menggunakan URL lengkap untuk link ke sebuah style sheet:

Contoh :
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Contoh yang menggunakan link ke style sheet yang terletak di folder html di situs web saat ini:

Contoh :
<link rel="stylesheet" href="/html/styles.css">

Contoh ini link ke style sheet yang terletak di folder yang sama dengan halaman saat:

Contoh :
<link rel="stylesheet" href="styles.css">

Ringkasan


  • Gunakan HTML styleatribut untuk styling inline
  • Gunakan HTML <style>elemen untuk mendefinisikan CSS internal yang
  • Gunakan HTML <link>elemen untuk merujuk ke file CSS eksternal
  • Gunakan HTML <head>elemen untuk menyimpan <style> dan <link> elemen
  • Gunakan CSS colorproperti untuk warna teks
  • Gunakan CSS font-familyproperti untuk font teks
  • Gunakan CSS font-sizeproperti untuk ukuran teks
  • Gunakan CSS borderproperti untuk perbatasan
  • Gunakan CSS paddingproperti untuk ruang di dalam perbatasan
  • Gunakan CSS marginproperti untuk ruang luar perbatasan
Labels:

Comments

Post a Comment

Popular posts from this blog

Menambahkan Peraturan Komentar Pada Blog

Menambahkan Peraturan Komentar Pada Blog : Ngblog Menulis sebuah artikel dan dikomentari dengan link aktif/promosi produk dan kata kata spam lainnya memang tidak mengenakan anda mungkin akan sangat merasa kecewa sekali, anda mungkin seperti menulis sebuah artikel namun tidak dihargai karyanya oleh orang lain. Mungkin membuat aturan berkomentar di blog adalah salah 1 cara menetralisirnya, mungkin jika ada aturan tersebut orang berpikir 2 kali untuk meninggalkan komentar Spam, lalu bagaimana cara membuat aturan komentar tersebut? langsung saja kita praktekan Ikuti langkah berikut : Login ke bloger,masuk ke blog yang anda inginkan, Klik Setelan -> POS-KOMENTAR   Scroll kebawah dan cari menu "pesan formulir komentar" klik tambahkan , dan isi kolom sesuai keinginan kalian atau peraturan yang kalian inginkan.  Setelah selesai silakan klik simpan setelan dipojok kanan atas. Lihat hasilnya di blog kalian ,akan seperti ini : Jika ada pertanyaan...
21 comments
Baca Lebih »

Traha Infinity a lancé une campagne événementielle de pré-inscription

Moai Games a officiellement annoncé la sortie d’ un  nouveau  MMORPG  intitulé  Traha Infinity , dans la première moitié de 2022. Ce jeu mobile devrait se dérouler 200 ans avant les événements des précédents jeux  Traha , il a  des  graphismes  Full 3D  et optimisés performances haut de gamme pour smartphones. Traha a  été un énorme succès en Corée avec 4,2 millions de précommandes avant sa sortie officielle en 2019, le jeu mobile n’a jamais eu de sortie mondiale. Ce jeu a été développé par Moai Games et publié par  Nexon , et est devenu l’un des jeux les plus vendus de l’époque. Et maintenant,  Traha Infinity  continuera le même monde comme une suite, plutôt une préquelle. Le nouveau jeu présentera la même vision du monde et la même topographie que le jeu précédent, mais présentera un nouveau scénario. Ils se vantent d’ une qualité graphique  Full 3D haut  de gamme ainsi que d’un système optimisé pour les smartphones. Les joueurs pourront explorer l...
Post a Comment
Baca Lebih »

Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner.

Hai Pembaca FajarYusuf.Com yang pintar dan berwawasan tinggi, kali ini FajarYusuf.Com akan post Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner . Mari kita membuat program konversi bilangan yang sangat mudah di buat dengan menggunakan bahasa pemrograman C++. Yaitu dengan menggunakan type data long, untuk Hexadesimal dengan rumus : <<hex<<desimal (merubah dari bilangan Desimal ke Hexadesimal) , untuk Oktal dengan rumus : <<oct<<desimal (merubah dari bilangan Desimal ke Oktal). Dan untuk biner dilakukan pembagian 2. Contoh Coding Program C++ Konversi Bilangan: #include<iostream> using namespace std; int main() { long desimal, pembagi=1073741824, bit; cout<<"Nilai Desimal : "; cin>>desimal; cout<<"Hexadesimal = "<<hex<<desimal<<endl; cout<<"Oktal = "<<oct<<desimal<<endl; ...
Post a Comment
Baca Lebih »