Pengertian CSS Dasar dan Sekilas Tutorial CSS Dasar

Pengertian CSS Dasar

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR terlebih dahulu. CSS singkatan dari Cascading Style Sheet. CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita .

Soal gaya Masalah Besar

HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen.

HTML itu dimaksudkan untuk menentukan isi dari sebuah dokumen, seperti:

<h1> Ini adalah heading </h1>

<p> Ini adalah sebuah paragraf </p>

Ketika tag seperti <font>, dan atribut warna ditambahkan dengan spesifikasi HTML 3.2, mulai mimpi buruk bagi pengembang web. Pengembangan situs web yang besar, dimana informasi font dan warna yang ditambahkan ke setiap halaman menjadi proses yang panjang dan mahal.

CSS Menyimpan Banyak Kerja .

CSS mendefinisikan cara elemen HTML yang akan ditampilkan.

Gaya biasanya disimpan dalam file css eksternal. Style sheet eksternal memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman dalam sebuah situs web hanya dengan mengedit satu file tunggal

Dan berikut ini adalah sekilas tutorial tentang CSS

Tutorial CSS Dasar

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ), dan satu atau lebih deklarasi ( Declaration ).

Selector adalah HTML element yang ingin dibuat style nya.
Declaration merupakan isi dari property dan nilai dari CSS.
Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )

Contoh CSS

Sebuah Deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :

p {color:red;text-align:center;}

CSS Coment

Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik. Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″

#para1
{
text-align:center;
color:red;
}

NB: jangan memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox

Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen. Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama.

Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”

Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :

.center {text-align:center;}

kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.

Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :

p.center {text-align:center;}

NB: jangan memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer

Cara CSS

Empat Cara untuk Insert CSS :

1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman, dengan ini anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”/>
</head>

dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus disimpan pada ekstensi CSS. sebuah contoh dari file style sheet dibawah ini :

hr {color:sienna;}

p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}

NB: jangan meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.

2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik. Di bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :

<head>
<style type=”text/css”>

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>

</head>

3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan, maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

4. Multiple Style Sheet

Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.

contoh style sheet eksternal untuk pemilih h3 :

h3
{
color:red;
text-align:left;
font-size:8pt;
}

contoh style sheet internal untuk pemilih h3 :

h3
{
text-align:right;
font-size:20pt;
}

Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
text-align:right;
font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.

Beberapa Styles Akan Cascade ke Satu :

gaya dapat ditentukan :

didalam sebuah elemen HTML
didalam bagian kepala halaman HTML
didalam sebuahj file CSS eksternal

Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:

Browser default
Eksternal style sheet
Internal style sheet (di bagian kepala)
Inline style (di dalam elemen HTML)

Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi, yang berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet eksternal, atau dalam browser (nilai default).

NB : Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!

Semoga Bermanfaat :)

./Dayak_Cyb3r

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.