Tutorial CSS: 3 Cara Memanggil atau Menginput Kode CSS di HTML

Tutorial CSS: 3 Cara Memanggil atau Menginput Kode CSS di HTML - Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya  adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini.

Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

1. Metode Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
<body>
<h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS yang ingin diterapkan.

Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.

2. Metode Internal Style Sheets

Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.

Contoh penggunaan motode internal style sheets CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:black;
        color:white;
        }
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style, karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head dari HTML.

Namun kekurangan menggunakan  internal style sheets, jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode external style sheets.

3. Metode External Style Sheets

Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.

Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.

Masih menggunakan contoh yang sama dengan internal style sheets, tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css

Isi dari file belajar.css :

h2 {
background-color:black;
color:white;
}

Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali ini, savelah pada folder yang sama dengan halaman HTML kita.

Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang pertama adalah menggunakan @import

Contoh penggunaan @import CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        @import url(belajar.css);
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Untuk metode @import external style sheets ini, kita menyisipkan @import url(belajar.css); pada tag <style>. Alamat pada bagian url bisa berupa alaman relatif (seperti: folderku/belajar.css) maupun absolut.

Cara input kedua external style sheets, adalah menggunakan tag <link>. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <link rel="stylesheet" type="text/css" href="belajar.css">
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link>, yang akan berisi alamat dari halaman CSS, dalam hal ini belajar.css

Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah metode external style sheets, baik menggunakan @import maupun dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.

Learning CSS Tutorial Part 1 : Understanding CSS, What Is Mean By CSS

Site Komputer - CSS or Cascading Style Sheets is the language web designer. But actually what is CSS? We will discuss the understanding of CCS in this article.

Understanding CSS

In a raw language, as in the quotation from wikipedia, CSS is a "set of codes used to define the design of the markup language", where this markup language markup is HTML

For the sense of free will, the CSS code is a collection of programs used to design or enhance the look of the HTML page. With CSS we can change the design of text, color, images and the background of (almost) all of the code the HTML tag.

CSS is usually always associated with HTML, since both are indeed complementary. HTML is intended to make the structure, or the content of web pages. While CSS is used for the display of web pages. The term, "HTML for content, CSS for Presentation".

Functions and uses of CSS

The beginning of the required CSS because the needs of an increasingly complex web pages. At the beginning of the emergence of HTML, we can create a paragraph of Red Lake by writing the code directly in the HTML tags, or make the background of a page with a blue color. Sample HTML code for it is as follows :

<!DOCTYPE html>
<html>
<head>
      <title>Test Tag Font HTML</title>
</head>
<body>
  <p>
    CSS is the language <font color="red">Web Designers</font>.
    But actually, what is CSS?
  <br />
    <font color="red">CSS </font>is a collection of code that is used to define the design of the markup language,
    <font color="red">One of them is HTML</font>.
  <br />
    With CSS we can change the design of the
    <font color="red">text, color, images and backgrounds </font>
    of (almost) all of the code the HTML tag.
  </p>
</body>
</html>

I use the tag <font> to make some words in the paragraph red. This is not wrong, and everything goes as you wish. For an article that has 5 paragraphs, we just copy-paste the tag < font color = "red" > on certain words.

But after the website has say 50 articles like the above, and because it is something you want to change the entire text of the earlier red to blue, then will it take a long time to change them one by one, and page.

It is this condition in CSS try ' separating ' the display of the content. To the same paragraph, the following HTML code when added CSS code:

<!DOCTYPE html>

<html>

<head>

      <title>Test Tag Font HTML</title>

</head>

<body>

  <p>

    CSS is the language <font color="red">Web Designers</font>.

    But actually, what is CSS?

  <br />

    <font color="color">CSS </font>is a collection of code that is used to define the design of the markup language,

    <font color="red">One of them is HTML</font>.

  <br />

    With CSS we can change the design of the

    <font color="red">text, color, images and backgrounds </font>

    of (almost) all of the code the HTML tag.

  </p>

</body>

</html>

In the example above, I changed the CSS tag <font> be <span> tag. The tag <span> is itself a tag that is not meaningful, but can be kostumasi using CSS. My span tag add attributes attribute class = "color". The class attribute is useful to insert CSS code on the tag <style> at the head. (More about the tag <span>, we've discussed in learning HTML advanced tutorial: understanding div and span tags)

If we want to change the whole color to blue, then live change the contents of the CSS color: red became the color: blue, and all tags that have the class = "color" will automatically be changed to blue.

Apa Itu CSS? Mengenal CSS dan Pengertian CSS

Apa Itu CSS? Mengenal CSS dan Pengertian CSS

Pengertian CSS

Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.

Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.

Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:

<! DOCTYPE html>
<html>
<head>
      <title> Tag Tag Font HTML </ title>
</ head>
<body>
  <p>
    CSS merupakan bahasanya <font color="red">desainer web</font>.
    Namun sebenarnya, apa itu CSS?
  <br />
    <font color="red">CSS </font> adalah kumpulan kode yang digunakan
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya adalah HTML</font>.
  <br />
    Dengan CSS kita bisa mengubah desain dari
    <font color = "red"> teks, warna, gambar dan belakang belakang </ font>
    dari (hampir) semua kode tag HTML.
  </ p>
</ body>
</ html>

Contoh HTML tanpa CSS

Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.

Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.

Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:

<! DOCTYPE html>
<html>
<head>
   <title> Uji Latar Belakang Warna CSS </ title>
   <style type = "text / css">
     .warna {
       warna merah;
     }
   </ style>
</ head>

<body>
    <p>
      CSS merupakan bahasanya <span class=warna>desainer web</span>.
      Namun sebenarnya, apa itu CSS?
    <br />
      <span class=warna>CSS </span>adalah kumpulan kode
      yang digunakan untuk mendefenisikan desain dari bahasa markup,
      <span class=warna>salah satunya adalah HTML</span>.
    <br />
      Dengan CSS kita bisa mengubah desain dari
      <span class=warna>text, warna, gambar dan latar belakang</span>
      dari (hampir) semua kode tag HTML.
    </ p>
</ body>
</ html>

Contoh HTML dengan CSS

Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS.

Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head. (Lebih lanjut tentang tag <span>, telah kita bahas di tutorial belajar HTML lanjutan: pengertian tag span dan div)

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.

CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman. Dalam tutorial selanjutnya, kita akan membahas Cara Menginput Kode CSS ke Halaman HTML.