Our social:

Wednesday, February 8, 2017

Tiga Cara Penulisan Kode CSS




1. Internal CSS




Internal CSS adalah istilah untuk kode CSS yang ditulis langsung dalam berkas HTML. Kode CSS ini dituliskan pada tag <style>. Tag ini bisa ditulis di dalam blok head atapun body, kedua-duanya sah. Nah, berikut ini contoh internal CSS.
<style>

.banner {width:600px; text-align:center; margin:0 auto; position: relative; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; padding:50px 20px;}

.banner:before {content: ""; position: absolute; top: 0; right: 0;border-width: 0 24px 24px 0; border-style: solid; border-color:#F0F0F0 #fff; -webkit-border-radius: 0px 0 0px 5px; -moz-border-radius: 0px 0 0px 5px; border-radius: 0px 0 0px 5px;}

#screen {width:100%;color: #555;"Century Gothic",CenturyGothic,AppleGothic,sans-serif;line-height:45px;}

.txt-title {font-size:2em;}

.txt-subtitle {font-size:1.2em;}

</style>
 

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah berkas khusus yang berekstensi .css. Sebagai contoh, saya akan membuat sebuah berkas bernama main.css. Berikut ini cuplikan isi berkas main.css

p{
      font-family: serif;
      line-height: 1.75em;
}

i { 
      font-family: sans;
      color: orange;
}

h2 { 
      font-family: sans;
      color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal:
<link rel="stylesheet" type="text/css" href="main.css">

Atau bisa juga seperti ini: 
<style type="text/css">
@import "main.css";
</style>

Penulisan pada HTML versi lengkapnya seperti ini:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Eksternal CSS</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <h2>Ini judul artikel</h2>
  <p>internal css</p>
</body>
</html>

Hasilnya pun akan sama seperti contoh inline CSS, karena kode CSS-nya sama. Hanya saja berbeda tempat penulisannya.

3. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis. Contohnya seperti ini:
<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

SOURCE : http://www.petanikode.com/2015/07/berbagai-cara-menulis-kode-css-dalam.html

6 comments:

  1. Putra MuhammadFebruary 8, 2017 at 5:32 PM

    pusing saya pahaminnya, nyerah deh sob kalau soal css :D

    ReplyDelete
  2. rizkiauliaFebruary 8, 2017 at 6:38 PM

    Nyusah ya dalam memahami percodingan.
    Jadi tak sumpek ni kpala.

    ReplyDelete
  3. Muhammad RiduanFebruary 9, 2017 at 8:53 AM

    Di antara 3 tipe tersebut, yang mana yang paling disarankan dalam hal SEO mas? Terimakasih :)

    ReplyDelete
    Replies
    1. Fauzan FalahFebruary 9, 2017 at 8:33 PM

      kalo menurutku dalam 3 penulisan tersebut tidak terlalu ngaruh untuk dalam hal SEO, karena CSS hanya menunjang untuk mendesain halaman web kamu

      Delete

Copyright 2017 CODEBARENG All Rights Reserved