{"id":1356,"date":"2026-01-21T00:45:48","date_gmt":"2026-01-21T00:45:48","guid":{"rendered":"https:\/\/gurututorku.com\/blog\/?p=1356"},"modified":"2026-01-21T01:17:50","modified_gmt":"2026-01-21T01:17:50","slug":"belajar-css-cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/","title":{"rendered":"Belajar CSS (Cascading Style Sheets)"},"content":{"rendered":"\n

CSS adalah bahasa yang digunakan untuk mendesain tampilan elemen HTML di halaman web. Dengan CSS, kita bisa mengatur warna, ukuran, tata letak, dan berbagai aspek visual lain dari halaman web agar terlihat lebih menarik dan terstruktur. CSS sangat membantu dalam memisahkan konten (HTML) dengan desain (CSS), sehingga memudahkan dalam pengembangan dan pemeliharaan halaman web.<\/p>\n\n\n\n

Cara Menyisipkan CSS<\/h3>\n\n\n\n

Ada tiga cara utama untuk menyisipkan CSS ke dalam HTML:<\/p>\n\n\n\n

    \n
  1. Inline CSS<\/strong>: CSS ditulis langsung di atribut elemen HTML dengan style<\/code>.html
    <p style=\"color: red; font-size: 16px;\">Ini adalah paragraf berwarna merah.<\/p><\/code><\/li>\n\n\n\n
  2. Internal CSS<\/strong>: CSS ditulis di dalam tag <style><\/code> di bagian <head><\/code> dari dokumen HTML.
    <head> <\/code>
    <style> p { color: blue; font-size: 18px; } <\/style> <\/code>
    <\/head><\/code><\/li>\n\n\n\n
  3. External CSS<\/strong>: CSS ditulis di file terpisah dengan ekstensi .css<\/code>, lalu dihubungkan ke halaman HTML menggunakan tag <link><\/code>.
    <head> <\/code>
    <link rel=\"stylesheet\" href=\"styles.css\"> <\/code>
    <\/head><\/code><\/li>\n<\/ol>\n\n\n\n

    Sekarang kita masuk ke TAHAP 2 \u2013 HTML + CSS<\/strong>
    Pada tahap ini kita belajar:<\/p>\n\n\n\n

    \n

    \u201cHTML itu seperti rangka rumah,
    CSS adalah cat, warna, dan dekorasinya.\u201d<\/p>\n<\/blockquote>\n\n\n\n

    Kita tidak mengubah struktur HTML yang sudah dibuat,
    kita hanya menambahkan file CSS<\/strong> untuk mempercantik tampilannya.<\/p>\n\n\n\n

    \n\n\n\n

    🟦 Langkah 1 \u2013 Membuat File CSS<\/h2>\n\n\n\n

    Di folder project, buat file baru:<\/p>\n\n\n\n

    style.css\n<\/code><\/pre>\n\n\n\n
    Lalu hubungkan ke index.html<\/code> pada bagian <head><\/code>:<\/p>\n\n\n\n
    <head>\n    <meta charset=\"UTF-8\">\n    <title>Toko Online SMK<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<\/code><\/pre>\n\n\n\n
    Penjelasan:<\/p>\n\n\n\n
    \n
    \u201cTag <link><\/code> digunakan untuk menghubungkan HTML dengan CSS.\u201d<\/p>\n<\/blockquote>\n\n\n\n
    \n\n\n\n
    🟦 Langkah 2 \u2013 Memberi Gaya Dasar Halaman<\/h2>\n\n\n\n
    Isi style.css<\/code>:<\/p>\n\n\n\n
    body {\n    font-family: Arial, sans-serif;\n    background-color: #f5f5f5;\n    margin: 0;\n    padding: 0;\n}\n\nheader, section, footer {\n    padding: 20px;\n    margin: 10px;\n    background-color: white;\n}\n<\/code><\/pre>\n\n\n\n
    Penjelasan sederhana:<\/p>\n\n\n\n
      \n
    • font-family<\/code> \u2192 mengatur jenis huruf<\/li>\n\n\n\n
    • background-color<\/code> \u2192 warna latar<\/li>\n\n\n\n
    • padding<\/code> \u2192 jarak ke dalam<\/li>\n\n\n\n
    • margin<\/code> \u2192 jarak ke luar<\/li>\n<\/ul>\n\n\n\n
      Sekarang halaman terlihat lebih rapi dan tidak polos.<\/p>\n\n\n\n
      \n\n\n\n
      🟦 Langkah 3 \u2013 Mempercantik Header & Menu<\/h2>\n\n\n\n
      Tambahkan di style.css<\/code>:<\/p>\n\n\n\n
      header {\n    background-color: #0d6efd;\n    color: white;\n}\n\nnav a {\n    color: white;\n    text-decoration: none;\n    margin-right: 10px;\n}\n\nnav a:hover {\n    text-decoration: underline;\n}\n<\/code><\/pre>\n\n\n\n
      Penjelasan:<\/p>\n\n\n\n
      \n
      \u201cCSS bisa mengubah warna, bahkan memberi efek saat mouse diarahkan.\u201d<\/p>\n<\/blockquote>\n\n\n\n
      \n\n\n\n
      🟦 Langkah 4 \u2013 Membuat Produk Lebih Rapi<\/h2>\n\n\n\n
      Tambahkan class pada HTML produk:<\/p>\n\n\n\n
      <div class=\"produk\">\n    <h3>Kaos Polos<\/h3>\n    <img src=\"...\" width=\"150\">\n    <p>Harga: Rp 50.000<\/p>\n    <button>Beli<\/button>\n<\/div>\n<\/code><\/pre>\n\n\n\n
      Lalu di style.css<\/code>:<\/p>\n\n\n\n
      .produk {\n    border: 1px solid #ddd;\n    padding: 10px;\n    margin: 10px;\n    width: 200px;\n    display: inline-block;\n    text-align: center;\n}\n\n.produk img {\n    border-radius: 8px;\n}\n\nbutton {\n    background-color: orange;\n    color: white;\n    border: none;\n    padding: 8px 12px;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background-color: darkorange;\n}\n<\/code><\/pre>\n\n\n\n
      Penjelasan:<\/p>\n\n\n\n
        \n
      • .produk<\/code> \u2192 mengatur tampilan tiap produk<\/li>\n\n\n\n
      • display: inline-block<\/code> \u2192 membuat produk sejajar<\/li>\n\n\n\n
      • :hover<\/code> \u2192 efek saat mouse diarahkan<\/li>\n<\/ul>\n\n\n\n
        Sekarang tampilannya mulai mirip toko online sungguhan<\/strong>.<\/p>\n\n\n\n
        \n\n\n\n
        🟦 Langkah 5 \u2013 Mempercantik Tabel<\/h2>\n\n\n\n
        table {\n    border-collapse: collapse;\n    width: 100%;\n}\n\nth {\n    background-color: #0d6efd;\n    color: white;\n}\n\nth, td {\n    padding: 10px;\n    text-align: left;\n}\n<\/code><\/pre>\n\n\n\n
        Penjelasan:<\/p>\n\n\n\n
        \n
        \u201cCSS membuat tabel lebih enak dibaca dan profesional.\u201d<\/p>\n<\/blockquote>\n\n\n\n
        \n\n\n\n
        🟦 Langkah 6 \u2013 Mempercantik Form<\/h2>\n\n\n\n
        input, textarea {\n    width: 100%;\n    padding: 8px;\n    margin-top: 5px;\n}\n\nform {\n    max-width: 400px;\n}\n<\/code><\/pre>\n\n\n\n
        Sekarang form terlihat rapi dan nyaman digunakan.<\/p>\n\n\n\n
        Pendalaman CSS<\/h2>\n\n\n\n
        \n
        \u201cCSS digunakan untuk mengatur tampilan halaman:
        warna, ukuran, jarak, posisi, dan bentuk.\u201d<\/p>\n<\/blockquote>\n\n\n\n
        Di CSS, kita mengenal selector<\/strong> untuk memilih elemen HTML yang ingin diubah tampilannya.<\/p>\n\n\n\n
        Ada dua selector yang paling penting:<\/p>\n\n\n\n
        🔹 Class (.<\/code>)<\/h3>\n\n\n\n
          \n
        • Digunakan untuk banyak elemen<\/strong><\/li>\n\n\n\n
        • Bisa dipakai berulang-ulang<\/li>\n<\/ul>\n\n\n\n
          Contoh di HTML:<\/p>\n\n\n\n
          <div class=\"produk\">...<\/div>\n<div class=\"produk\">...<\/div>\n<\/code><\/pre>\n\n\n\n
          Di CSS:<\/p>\n\n\n\n
          .produk {\n    border: 1px solid #ddd;\n}\n<\/code><\/pre>\n\n\n\n
          Artinya:<\/p>\n\n\n\n
          \n
          \u201cSemua elemen yang punya class produk<\/code> akan diberi gaya ini.\u201d<\/p>\n<\/blockquote>\n\n\n\n
          \n\n\n\n
          🔹 ID (#<\/code>)<\/h3>\n\n\n\n
            \n
          • Digunakan untuk satu elemen saja<\/strong><\/li>\n\n\n\n
          • Tidak boleh sama dengan elemen lain<\/li>\n<\/ul>\n\n\n\n
            Contoh di HTML:<\/p>\n\n\n\n
            <p id=\"cart\">0<\/p>\n<\/code><\/pre>\n\n\n\n
            Di CSS:<\/p>\n\n\n\n
            #cart {\n    font-weight: bold;\n    color: red;\n}\n<\/code><\/pre>\n\n\n\n
            Artinya:<\/p>\n\n\n\n
            \n
            \u201cHanya elemen dengan id cart<\/code> yang berubah.\u201d<\/p>\n<\/blockquote>\n\n\n\n
            Ringkasnya:<\/p>\n\n\n\n
            Selector<\/th>Digunakan Untuk<\/th>Contoh<\/th><\/tr><\/thead>
            .class<\/code><\/td>Banyak elemen<\/td>.produk<\/code><\/td><\/tr>
            #id<\/code><\/td>Satu elemen<\/td>#cart<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
            CSS adalah bahasa yang digunakan untuk mendesain tampilan elemen HTML di halaman web. Dengan CSS, kita bisa mengatur warna, ukuran, tata letak, dan berbagai aspek visual lain dari halaman web agar terlihat lebih menarik dan terstruktur. CSS sangat membantu dalam memisahkan konten (HTML) dengan desain (CSS), sehingga memudahkan dalam pengembangan dan pemeliharaan halaman web. Cara […]<\/p>\n","protected":false},"author":1,"featured_media":971,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82,38],"tags":[101,100,104,102,103,106,105],"class_list":["post-1356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css3","category-tutorial-programming","tag-cascading-style-sheets","tag-css","tag-external-css","tag-inline-css","tag-internal-css","tag-property-css","tag-selector-css"],"yoast_head":"\nBelajar CSS (Cascading Style Sheets) - Gurututorku<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar CSS (Cascading Style Sheets) - Gurututorku\" \/>\n<meta property=\"og:description\" content=\"CSS adalah bahasa yang digunakan untuk mendesain tampilan elemen HTML di halaman web. Dengan CSS, kita bisa mengatur warna, ukuran, tata letak, dan berbagai aspek visual lain dari halaman web agar terlihat lebih menarik dan terstruktur. CSS sangat membantu dalam memisahkan konten (HTML) dengan desain (CSS), sehingga memudahkan dalam pengembangan dan pemeliharaan halaman web. Cara […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/\" \/>\n<meta property=\"og:site_name\" content=\"Gurututorku\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-21T00:45:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-21T01:17:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"gtadmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"gtadmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/\"},\"author\":{\"name\":\"gtadmin\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"headline\":\"Belajar CSS (Cascading Style Sheets)\",\"datePublished\":\"2026-01-21T00:45:48+00:00\",\"dateModified\":\"2026-01-21T01:17:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/\"},\"wordCount\":382,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"image\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png\",\"keywords\":[\"Cascading Style Sheets\",\"css\",\"external css\",\"inline css\",\"internal css\",\"property css\",\"selector css\"],\"articleSection\":[\"CSS3\",\"Tutorial Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/\",\"url\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/\",\"name\":\"Belajar CSS (Cascading Style Sheets) - Gurututorku\",\"isPartOf\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png\",\"datePublished\":\"2026-01-21T00:45:48+00:00\",\"dateModified\":\"2026-01-21T01:17:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage\",\"url\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png\",\"contentUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png\",\"width\":1000,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/gurututorku.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar CSS (Cascading Style Sheets)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#website\",\"url\":\"https:\/\/gurututorku.com\/blog\/\",\"name\":\"Gurututorku - Learning today success tomorrow\",\"description\":\"Kelas dan Kursus Programming, Design, Multimedia dan Tutorial IT lainnya.\",\"publisher\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/gurututorku.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2\",\"name\":\"gtadmin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png\",\"contentUrl\":\"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png\",\"width\":512,\"height\":512,\"caption\":\"gtadmin\"},\"logo\":{\"@id\":\"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/gurututorku.com\/blog\"],\"url\":\"https:\/\/gurututorku.com\/blog\/author\/gtadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar CSS (Cascading Style Sheets) - Gurututorku","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/","og_locale":"en_US","og_type":"article","og_title":"Belajar CSS (Cascading Style Sheets) - Gurututorku","og_description":"CSS adalah bahasa yang digunakan untuk mendesain tampilan elemen HTML di halaman web. Dengan CSS, kita bisa mengatur warna, ukuran, tata letak, dan berbagai aspek visual lain dari halaman web agar terlihat lebih menarik dan terstruktur. CSS sangat membantu dalam memisahkan konten (HTML) dengan desain (CSS), sehingga memudahkan dalam pengembangan dan pemeliharaan halaman web. Cara […]","og_url":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/","og_site_name":"Gurututorku","article_published_time":"2026-01-21T00:45:48+00:00","article_modified_time":"2026-01-21T01:17:50+00:00","og_image":[{"width":1000,"height":750,"url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png","type":"image\/png"}],"author":"gtadmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"gtadmin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#article","isPartOf":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/"},"author":{"name":"gtadmin","@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"headline":"Belajar CSS (Cascading Style Sheets)","datePublished":"2026-01-21T00:45:48+00:00","dateModified":"2026-01-21T01:17:50+00:00","mainEntityOfPage":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/"},"wordCount":382,"commentCount":0,"publisher":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"image":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage"},"thumbnailUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png","keywords":["Cascading Style Sheets","css","external css","inline css","internal css","property css","selector css"],"articleSection":["CSS3","Tutorial Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/","url":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/","name":"Belajar CSS (Cascading Style Sheets) - Gurututorku","isPartOf":{"@id":"https:\/\/gurututorku.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage"},"image":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage"},"thumbnailUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png","datePublished":"2026-01-21T00:45:48+00:00","dateModified":"2026-01-21T01:17:50+00:00","breadcrumb":{"@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#primaryimage","url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png","contentUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/css.png","width":1000,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/gurututorku.com\/blog\/belajar-css-cascading-style-sheets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gurututorku.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar CSS (Cascading Style Sheets)"}]},{"@type":"WebSite","@id":"https:\/\/gurututorku.com\/blog\/#website","url":"https:\/\/gurututorku.com\/blog\/","name":"Gurututorku - Learning today success tomorrow","description":"Kelas dan Kursus Programming, Design, Multimedia dan Tutorial IT lainnya.","publisher":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gurututorku.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/6c85586545a9930343cd35e9bf4bd9a2","name":"gtadmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png","contentUrl":"https:\/\/gurututorku.com\/blog\/wp-content\/uploads\/2024\/11\/cropped-gurututorku-favicon.png","width":512,"height":512,"caption":"gtadmin"},"logo":{"@id":"https:\/\/gurututorku.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/gurututorku.com\/blog"],"url":"https:\/\/gurututorku.com\/blog\/author\/gtadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/comments?post=1356"}],"version-history":[{"count":4,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1356\/revisions"}],"predecessor-version":[{"id":1366,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/posts\/1356\/revisions\/1366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/media\/971"}],"wp:attachment":[{"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/media?parent=1356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/categories?post=1356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gurututorku.com\/blog\/wp-json\/wp\/v2\/tags?post=1356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}