Contoh HTML Styling dan Cara Memasukkan CSS ke dalam HTML

WritingSkills.web.id - Ayo kita buat situs web yang memiliki tampilan keren dengan bantuan styling language yang disebut dengan CSS , atau...

Contoh HTML Styling dan Cara Memasukkan CSS ke dalam HTML

WritingSkills.web.id - Ayo kita buat situs web yang memiliki tampilan keren dengan bantuan styling language yang disebut dengan CSS, atau Cascading Style Sheets

Contoh halaman web yang menggunakan CSS adalah seperti gambar berikut:
Contoh HTML Styling dengan CSS

Untuk membuat halaman-halaman web yang lebih rumit menjadi lebih mudah diatur, kita bisa memindahkan kode CSS kita ke dalam sebuah style sheet, atau sebuah file khusus untuk membuat tampilan halaman web lebih keren. 

Berikut adalah kode HTML dan CSS yang sudah jadi:
<!doctype html>
<html>
 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Water Puns</h1>
  <p> Why does water never laugh at jokes? It's not a fan of dry
   humor. </p>
 </body>
</html>

h1 {
 color: red;
}

p {
 color: blue;
}

Tampilan output kode HTML di atas pada web browser seperti gambar berikut:
Contoh HTML Styling dengan CSS

Cara Memasukkan File CSS ke dalam HTML

Untuk memasukkan sebuah style sheet ke dalam file HTML, kita menggunakan elemen link. <link> adalah sebuah self-closing empty element dan diletakkan di dalam elemen head
<head>
  <link>
</head>

Untuk mengetahui tipe file apa yang akan dimasukkan, opening tag link memerlukan atribut rel="stylesheet".
<link rel="stylesheet">

Untuk menentukan lokasi dari style sheet, kita menggunakan atribut href yang menunjukkan file "style.css".
<link rel="stylesheet" href="style.css">

Cara Mengubah Style Elemen HTML dengan CSS (HTML Styling)

Di dalam file CSS yang kita buat, kita akan memilih elemen yang akan diberi style dengan sebuah tag selector. Sebagai contoh kita akan mengubah style dari paragraf, dengan menggunakan tag p.
p

Kemudian kita menambahkan kurung kurawal buka { , yang diikuti dengan kurung kurawal tutup } .
p  {
}

Sekarang, deklarasi apapun yang kita tambahkan akan diaplikasikan ke semua elemen p atau paragraf di halaman web. Sebagai contoh, kita akan menambahkan deklarasi color: blue; yang akan memberi paragraf berwarna biru. 
p {
  color: blue; 
}
Contoh HTML Styling dengan CSS

Saat kita menambahkan p { yang diikuti dengan color: blue; dan kemudian } , ini berarti kita telah membuat sebuah CSS rule

Kita bisa membuat deklarasi lainnya, seperti background-color: pink asalkan diletakkan di baris lainnya. 
p {
  color: blue; 
  background-color: pink;
}
Contoh HTML Styling dengan CSS

Itulah contoh HTML Styling dengan CSS dan juga cara memasukkan file CSS ke dalam kode HTML kita. Selamat mencoba!

COMMENTS

Nama

American British English Differences,3,Belajar C#,6,Belajar Coding,47,Belajar HTML,11,Belajar JavaScript,6,Belajar PHP,1,Belajar Python,30,Business Letter,21,Business Letter Style,8,Business Letter Style Organization,3,Business Letter Style Outlook,2,Business Letter Style Tone,3,Business Memo,3,Chord Gitar,2,Dasar-Dasar C#,6,Dasar-Dasar HTML,11,Dasar-Dasar JavaScript,6,Dasar-Dasar PHP,1,Download,1,English Grammar,13,French Tutorial,3,Info Unik,12,Internet,2,Layout Formats,2,Letter Examples,6,List of Expressions,13,Main Gitar,9,Memo Examples,3,MS. Word Tutorial,4,Operator Perbandingan Python,4,Proyek Python,9,Psikotes,1,Redundancy,2,Sample of Letters,1,Statement if Python,6,While Loops Python,3,Writing Tutorial,25,
ltr
item
Writing Skills: Contoh HTML Styling dan Cara Memasukkan CSS ke dalam HTML
Contoh HTML Styling dan Cara Memasukkan CSS ke dalam HTML
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVeKkti4YiGNiaSfN7t87WmZKJClKMLgEk4iqdG7IP5NxNZPo4yp4m9mf91IsWe-IgCz7JSNjadfDavc-J0ZLp2YIpO_uY22tPlot6lkJejAX5CV8yeCxDhVi74Op6kJside8KI6r74NzEzLMuyv06dn9ynW4MNQXV34coYNLdNHvRZ_ideV98gvOu0Xz5/w640-h320/Contoh-HTML-Styling-dan-Cara-Memasukkan-CSS.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVeKkti4YiGNiaSfN7t87WmZKJClKMLgEk4iqdG7IP5NxNZPo4yp4m9mf91IsWe-IgCz7JSNjadfDavc-J0ZLp2YIpO_uY22tPlot6lkJejAX5CV8yeCxDhVi74Op6kJside8KI6r74NzEzLMuyv06dn9ynW4MNQXV34coYNLdNHvRZ_ideV98gvOu0Xz5/s72-w640-c-h320/Contoh-HTML-Styling-dan-Cara-Memasukkan-CSS.jpg
Writing Skills
https://www.writingskills.web.id/2024/03/contoh-html-styling-cara-masukan-css.html
https://www.writingskills.web.id/
https://www.writingskills.web.id/
https://www.writingskills.web.id/2024/03/contoh-html-styling-cara-masukan-css.html
true
3599370990183318253
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content