{"id":35085,"date":"2025-06-20T13:30:01","date_gmt":"2025-06-20T06:30:01","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=35085"},"modified":"2025-06-25T14:33:47","modified_gmt":"2025-06-25T07:33:47","slug":"pengantar-css-mendesain-tampilan-website-sederhana","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/pengantar-css-mendesain-tampilan-website-sederhana\/","title":{"rendered":"Pengantar CSS: Mendesain Tampilan Website Sederhana"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"132\" data-end=\"426\">Di dunia digital saat ini, tampilan visual sebuah website memiliki peran yang sangat penting. Tidak cukup hanya membuat struktur website dengan <strong data-start=\"276\" data-end=\"284\">HTML<\/strong>, kita juga perlu membuatnya menarik, nyaman dilihat, dan mudah digunakan oleh pengunjung. Inilah peran dari <strong data-start=\"393\" data-end=\"425\">CSS (Cascading Style Sheets)<\/strong>.<\/p>\n<p data-start=\"428\" data-end=\"841\">CSS memungkinkan kita untuk mengatur segala hal yang berkaitan dengan <strong data-start=\"498\" data-end=\"517\">desain tampilan<\/strong>: mulai dari warna, jenis font, ukuran elemen, penempatan posisi, hingga efek transisi dan animasi. Bagi mahasiswa Telkom University Jakarta, khususnya yang menekuni bidang teknologi informasi, desain komunikasi visual, atau rekayasa perangkat lunak, kemampuan menggunakan CSS adalah bekal penting dalam dunia kerja digital.<\/p>\n<p data-start=\"843\" data-end=\"1062\">Artikel ini akan mengupas secara menyeluruh dan mudah dipahami tentang pengenalan CSS, cara penggunaannya, selektor-selektor penting, properti umum, contoh desain sederhana, dan tips membangun tampilan web yang menarik.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Apa Itu CSS?<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"1094\" data-end=\"1314\">CSS atau <em data-start=\"1103\" data-end=\"1127\">Cascading Style Sheets<\/em> adalah bahasa yang digunakan untuk mengatur tampilan dan gaya elemen-elemen HTML. Jika HTML adalah struktur atau kerangka bangunan, maka CSS adalah cat, dekorasi, dan desain interiornya.<\/p>\n<h4 data-start=\"1316\" data-end=\"1348\"><strong data-start=\"1321\" data-end=\"1348\">Fungsi CSS Secara Umum:<\/strong><\/h4>\n<ul data-start=\"1349\" data-end=\"1588\">\n<li data-start=\"1349\" data-end=\"1388\">\n<p data-start=\"1351\" data-end=\"1388\">Mengatur warna, ukuran, dan font teks<\/p>\n<\/li>\n<li data-start=\"1389\" data-end=\"1435\">\n<p data-start=\"1391\" data-end=\"1435\">Mengelola layout halaman (penempatan elemen)<\/p>\n<\/li>\n<li data-start=\"1436\" data-end=\"1481\">\n<p data-start=\"1438\" data-end=\"1481\">Mengatur spacing seperti margin dan padding<\/p>\n<\/li>\n<li data-start=\"1482\" data-end=\"1525\">\n<p data-start=\"1484\" data-end=\"1525\">Membuat efek hover, transisi, dan animasi<\/p>\n<\/li>\n<li data-start=\"1526\" data-end=\"1588\">\n<p data-start=\"1528\" data-end=\"1588\">Mengelompokkan gaya yang bisa dipakai ulang di banyak elemen<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Cara Menyisipkan CSS dalam HTML<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 data-start=\"1639\" data-end=\"1661\"><strong data-start=\"1644\" data-end=\"1661\">a. Inline CSS<\/strong><\/h4>\n<p data-start=\"1662\" data-end=\"1722\">CSS langsung ditulis dalam tag HTML melalui atribut <code data-start=\"1714\" data-end=\"1721\">style<\/code>.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"599\" height=\"81\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.05.20.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Inline CSS\" title=\"Inline CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.05.20.webp 599w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.05.20-300x41.webp 300w\" sizes=\"(max-width: 599px) 100vw, 599px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>\u2705 Cocok untuk uji coba cepat<br data-start=\"1839\" data-end=\"1842\" \/>\u274c Tidak disarankan untuk proyek besar (tidak terstruktur)<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 data-start=\"1906\" data-end=\"1930\"><strong data-start=\"1911\" data-end=\"1930\">b. Internal CSS<\/strong><\/h4>\n<p data-start=\"1931\" data-end=\"1987\">CSS ditulis dalam tag <code data-start=\"1953\" data-end=\"1962\">&lt;style&gt;<\/code> di bagian <code data-start=\"1973\" data-end=\"1981\">&lt;head&gt;<\/code> HTML.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"562\" height=\"463\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.31.41.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Internal CSS\" title=\"Internal CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.31.41.webp 562w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.31.41-300x247.webp 300w\" sizes=\"(max-width: 562px) 100vw, 562px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>\u2705 Cocok untuk halaman kecil<br data-start=\"2263\" data-end=\"2266\" \/>\u274c Kurang efisien jika digunakan di banyak halaman<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 data-start=\"2322\" data-end=\"2346\"><strong data-start=\"2327\" data-end=\"2346\">c. External CSS<\/strong><\/h4>\n<p data-start=\"2347\" data-end=\"2418\">File CSS ditulis terpisah dan dihubungkan ke HTML menggunakan <code data-start=\"2409\" data-end=\"2417\">&lt;link&gt;<\/code>.<\/p>\n<p data-start=\"2420\" data-end=\"2434\"><strong data-start=\"2420\" data-end=\"2434\">File HTML:<\/strong><\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"386\" height=\"125\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.00.webp\" class=\"vc_single_image-img attachment-full\" alt=\"External CSS\" title=\"External CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.00.webp 386w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.00-300x97.webp 300w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"2506\" data-end=\"2525\"><strong data-start=\"2506\" data-end=\"2525\">File style.css:<\/strong><\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"360\" height=\"160\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.26.webp\" class=\"vc_single_image-img attachment-full\" alt=\"File style.css:\" title=\"File style.css:\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.26.webp 360w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.26-300x133.webp 300w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>\u2705 <em data-start=\"2612\" data-end=\"2627\">Best practice<\/em> untuk proyek nyata<br data-start=\"2646\" data-end=\"2649\" \/>\u2705 Mudah dirawat dan diatur dalam tim<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3 data-start=\"2692\" data-end=\"2721\"><strong data-start=\"2696\" data-end=\"2721\">4. Struktur Dasar CSS<\/strong><\/h3>\n<p data-start=\"2723\" data-end=\"2830\">CSS memiliki <strong data-start=\"2736\" data-end=\"2748\">selektor<\/strong> (target elemen HTML) dan <strong data-start=\"2774\" data-end=\"2786\">properti<\/strong> (gaya yang akan diterapkan), dengan format:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"216\" height=\"124\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.45.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Struktur Dasar CSS\" title=\"Struktur Dasar CSS\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"2876\" data-end=\"2883\">Contoh:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"277\" height=\"143\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.32.58.webp\" class=\"vc_single_image-img attachment-full\" alt=\"contoh Struktur Dasar CSS\" title=\"contoh Struktur Dasar CSS\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3 data-start=\"2942\" data-end=\"2977\"><strong data-start=\"2946\" data-end=\"2977\">5. Jenis Selektor dalam CSS<\/strong><\/h3>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"779\" height=\"261\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.24.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Jenis Selektor dalam CSS\" title=\"Jenis Selektor dalam CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.24.webp 779w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.24-300x101.webp 300w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.24-768x257.webp 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"435\" height=\"80\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.46.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Jenis Selektor dalam CSS\" title=\"Jenis Selektor dalam CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.46.webp 435w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.46-300x55.webp 300w\" sizes=\"(max-width: 435px) 100vw, 435px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"291\" height=\"159\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.33.58.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Jenis Selektor dalam CSS\" title=\"Jenis Selektor dalam CSS\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3 data-start=\"3559\" data-end=\"3604\"><strong data-start=\"3563\" data-end=\"3604\">6. Properti CSS yang Sering Digunakan<\/strong><\/h3>\n<h4 data-start=\"3606\" data-end=\"3622\"><strong data-start=\"3611\" data-end=\"3622\">a. Teks<\/strong><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"329\" height=\"176\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.34.19.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Teks CSS\" title=\"Teks CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.34.19.webp 329w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.34.19-300x160.webp 300w\" sizes=\"(max-width: 329px) 100vw, 329px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 data-start=\"3737\" data-end=\"3759\"><strong data-start=\"3742\" data-end=\"3759\">b. Background<\/strong><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"332\" height=\"138\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.34.33.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Background CSS\" title=\"Background CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.34.33.webp 332w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.34.33-300x125.webp 300w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 data-start=\"3860\" data-end=\"3888\"><strong data-start=\"3865\" data-end=\"3888\">c. Spasi dan Ukuran<\/strong><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"264\" height=\"156\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.34.49.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Spasi dan Ukuran CSS\" title=\"Spasi dan Ukuran CSS\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 data-start=\"3958\" data-end=\"3976\"><strong data-start=\"3963\" data-end=\"3976\">d. Border<\/strong><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"236\" height=\"114\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.35.03.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Border CSS\" title=\"Border CSS\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 data-start=\"4033\" data-end=\"4063\"><strong data-start=\"4038\" data-end=\"4063\">e. Layout dan Display<\/strong><\/h4>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"236\" height=\"126\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.35.20.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Layout dan Display CSS\" title=\"Layout dan Display CSS\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3 data-start=\"4142\" data-end=\"4195\"><strong data-start=\"4146\" data-end=\"4195\">7. Contoh Desain Website Sederhana dengan CSS<\/strong><\/h3>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"562\" height=\"463\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.31.41-1.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Contoh Desain Website Sederhana dengan CSS\" title=\"Contoh Desain Website Sederhana dengan CSS\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.31.41-1.webp 562w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.31.41-1-300x247.webp 300w\" sizes=\"(max-width: 562px) 100vw, 562px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"466\" height=\"667\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.36.44.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Contoh Desain Website Sederhana dengan CSS 2\" title=\"Contoh Desain Website Sederhana dengan CSS 2\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.36.44.webp 466w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.36.44-210x300.webp 210w\" sizes=\"(max-width: 466px) 100vw, 466px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"1023\" height=\"606\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.40.50.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Contoh Desain Website Sederhana dengan CSS 3\" title=\"Contoh Desain Website Sederhana dengan CSS 3\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.40.50.webp 1023w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.40.50-300x178.webp 300w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-24-at-15.40.50-768x455.webp 768w\" sizes=\"(max-width: 1023px) 100vw, 1023px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h3 data-start=\"5891\" data-end=\"5934\"><strong data-start=\"5895\" data-end=\"5934\">8. Tips Mendesain Website Sederhana<\/strong><\/h3>\n<ul data-start=\"5936\" data-end=\"6662\">\n<li data-start=\"5936\" data-end=\"6041\">\n<p data-start=\"5939\" data-end=\"6041\"><strong data-start=\"5939\" data-end=\"5977\">Gunakan Palet Warna yang Konsisten<\/strong><br data-start=\"5977\" data-end=\"5980\" \/>Pilih maksimal 3\u20134 warna utama agar desain tetap harmonis.<\/p>\n<\/li>\n<li data-start=\"6043\" data-end=\"6164\">\n<p data-start=\"6046\" data-end=\"6164\"><strong data-start=\"6046\" data-end=\"6092\">Gunakan Grid atau Flexbox untuk Tata Letak<\/strong><br data-start=\"6092\" data-end=\"6095\" \/>Flexbox dan CSS Grid sangat membantu dalam mengatur posisi elemen.<\/p>\n<\/li>\n<li data-start=\"6166\" data-end=\"6342\">\n<p data-start=\"6169\" data-end=\"6242\"><strong data-start=\"6169\" data-end=\"6208\">Responsive Design (Mobile Friendly)<\/strong><br data-start=\"6208\" data-end=\"6211\" \/>Gunakan media query seperti:<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_center wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"322\" height=\"168\" src=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-25-at-10.09.34.webp\" class=\"vc_single_image-img attachment-full\" alt=\"Responsive Design (Mobile Friendly)\" title=\"Responsive Design (Mobile Friendly)\" srcset=\"https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-25-at-10.09.34.webp 322w, https:\/\/jakarta.telkomuniversity.ac.id\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-25-at-10.09.34-300x157.webp 300w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<ul>\n<li data-start=\"6347\" data-end=\"6441\"><strong data-start=\"6347\" data-end=\"6373\">Font yang Mudah Dibaca<\/strong><br data-start=\"6373\" data-end=\"6376\" \/>Gunakan font sans-serif seperti Arial, Roboto, atau Helvetica.<\/li>\n<li data-start=\"6446\" data-end=\"6479\"><strong data-start=\"6446\" data-end=\"6477\">Gunakan Tools Desain Modern<\/strong><\/li>\n<li style=\"list-style-type: none;\">\n<ul data-start=\"6483\" data-end=\"6662\">\n<li data-start=\"6483\" data-end=\"6534\">\n<p data-start=\"6485\" data-end=\"6534\">Warna: <a class=\"\" href=\"https:\/\/coolors.co\" target=\"_new\" rel=\"noopener\" data-start=\"6492\" data-end=\"6532\">https:\/\/coolors.co<\/a><\/p>\n<\/li>\n<li data-start=\"6538\" data-end=\"6600\">\n<p data-start=\"6540\" data-end=\"6600\">Font: <a class=\"\" href=\"https:\/\/fonts.google.com\" target=\"_new\" rel=\"noopener\" data-start=\"6546\" data-end=\"6598\">https:\/\/fonts.google.com<\/a><\/p>\n<\/li>\n<li data-start=\"6604\" data-end=\"6662\">\n<p data-start=\"6606\" data-end=\"6662\">Ikon: <a class=\"\" href=\"https:\/\/fontawesome.com\" target=\"_new\" rel=\"noopener\" data-start=\"6612\" data-end=\"6662\">https:\/\/fontawesome.com<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-start=\"6689\" data-end=\"7015\">Menguasai CSS adalah kunci utama dalam menciptakan tampilan website yang estetis, ramah pengguna, dan profesional. Dengan memahami struktur dasar CSS, cara menyisipkan gaya, serta properti umum, mahasiswa Telkom University Jakarta dapat mulai merancang halaman web pribadi atau proyek tugas akhir dengan tampilan yang menarik.<\/p>\n<p data-start=\"7017\" data-end=\"7183\">Setelah memahami HTML dan CSS, kamu siap melangkah lebih jauh ke teknologi front-end seperti <strong data-start=\"7110\" data-end=\"7124\">JavaScript<\/strong>, <strong data-start=\"7126\" data-end=\"7139\">Bootstrap<\/strong>, dan framework modern seperti <strong data-start=\"7170\" data-end=\"7182\">React.js<\/strong>.<\/p>\n<p data-start=\"7185\" data-end=\"7243\">Jangan berhenti belajar dan bereksperimen dengan desainmu!<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Di dunia digital saat ini, tampilan visual sebuah website memiliki peran yang sangat penting. Tidak cukup hanya membuat struktur website dengan HTML, kita juga perlu membuatnya menarik, nyaman dilihat, dan mudah digunakan oleh pengunjung. Inilah peran dari CSS (Cascading Style Sheets). CSS memungkinkan kita untuk mengatur segala hal yang berkaitan dengan desain tampilan: mulai dari [...]","protected":false},"author":37,"featured_media":35127,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wds_title":"Pengantar CSS: Mendesain Tampilan Website Sederhana","_wds_metadesc":"CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mengatur tampilan dan gaya elemen-elemen HTML, maka CSS adalah cat, dekorasi, dan desain","_wds_focus-keywords":"Pengantar CSS","_wds_meta-robots-adv":"","_wds_meta-robots-noindex":false,"_wds_meta-robots-nofollow":false,"_wds_meta-robots-index":false,"_wds_meta-robots-follow":false,"_wds_autolinks-exclude":false,"_wds_canonical":"","_wds_opengraph":[],"_wds_twitter":[],"wds_primary_category":0,"footnotes":""},"categories":[300],"tags":[1493,1541,1540],"class_list":["post-35085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-css","tag-mendesain-tampilan-website-sederhana","tag-pengantar-css"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=35085"}],"version-history":[{"count":2,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35085\/revisions"}],"predecessor-version":[{"id":35123,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/35085\/revisions\/35123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/35127"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=35085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=35085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=35085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}