Mulai Belajar CSS

Pada postingan ini kita akan belajar memulai dengan css, ini adalah bagian kedua setelah sebelumnya kita sudah mempelajari dasar-dasar dalam memulai bahasa html.

Baca Juga : Mulai Belajar HTML

Seperti biasa hal yang perlu kita siapakan adalah text editor dan web browser.

Yang akan kita pelajari disini adalah:

1.  Warna
2.  Ukuran Font dan Jenis Font
3.  Lebar, Tinggi dan Warna Latar Belakang
4.  Class

CSS (Cascading Style Sheets) digunakan untuk mendesain situs web, dengan css kita dapat membuat atau mengubah tampilan web terlihat lebih bagus dan menarik. Banyak hal yang bisa kita ubah dengan css seperti warna, ukuran, spasi, tata letak dan lain-lain yang terdapat pada element html.

Cara kerja CSS yaitu css ditulis dalam file terpisah dari html, kita bisa menentukan bagaimana, apa, dan dimana yang ingin kita ubah dari file html, agar lebih paham kita lansung saja mulai dari tahapan yang akan kita pelajari disini.

1. Warna

Bagian ini kita akan mempelajari property color (warna). Didalam css kita bisa menentukan warna dengan menggunakan nilai heksadesimal, nilai heksadesimal tidak perlu kita hapal kita bisa mencari melalui online ataupun menggunakan software, contoh warna dengan nilai heksadesimal biru = #0000ff; merah = #ff0000; dan lain-lain.

Dalam menggunakan sintax css hal yang perlu kita ingat adalah kita harus mengindentasi code css sesuai dengan apa yang ingin kita ubah pada code html, kemudian gunakan titik dua (:) di akhir property css dan titik koma (;) di akhir baris. Untuk menggunakan komentar pada css gunakan code /* apit teks disini */.

Sekarang mari kita praktekkan dengan code di bawah, buka text editor dan tuliskan code dibawah.

 

Tulis code dibawah pada file html

<!--ini adalah code untuk menghubungkan css -->

<link rel="stylesheet" href="style.css">

    

<h1>Hello World</h1>

<p>Selamat Datang di Pelajaran HTML</p> 

Tulis code di bawah pada file css

h1 {

    color: #ff0000;

}

p {

    color: #0000ff;

}

dan jalankan di browser hasilnya, teks yang ada di element html berubah warna.

2. Ukuran Font dan Jenis Font

Pada ukuran font bisa kita gunakan dengan property font-size, satuan yang kita gunakan adalah px yang berarti piksel, contoh "font-size: 30px;" yang berarti membuat ukuran font menjadi 30 piksel.

Pada jenis font bisa kita gunakan dengan property font-family, kita dapat melakukan ini dengan menetapkan font-family: nama font; contoh "font-family: serif;

Banyak jenis font yang bisa kita gunakan, kita bisa mencari jenis font secara online contohnya: serif, Georgia, Lucida Grande dan lain-lain.

Mari kita mulai mengubah jenis font pada element html, tambahkan code di bawah pada file css.

h1 {

    color: #ff0000;

    font-size: 30px;

    font-family: sans-serif;

}

p {

    color: #0000ff;

    font-size: 20px;

    font-family: courier;

}

Sekarang kita lihat hasilnya bahwa ukuran dan jenis font sudah berubah.

3. Lebar, Tinggi dan Warna Latar Belakang

Untuk mengubah warna latar belakang kita bisa menggunakan property "background-color", kita bisa menggunakan property ini sama seperti property warna yaitu "color", selain itu jika ada nilai heksa desimal dari warna yang menggunakan hurup yang sama bisa disingkat seperti #dddddd bisa disingkat menjadi #ddd.

Kemudian kita akan menetukan lebar dan tinggi, dalam menentukan atau mengubah lebar dan tinggi kita bisa menggunakan property "width" untuk lebar dan "height" untuk tinggi, element ini dapat ditentukan denan "px" sama seperti font-size.

Meri kita lansung coba di text editor dan tulis code di bawah:

Tulis code di bawah pada file html

<link rel="stylesheet" href="style.css">

<h1>Hello World</h1>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TOUs4ucFYbZ0mzQshGTZFXIdjusZYlcxZxU5NndhRU6HU6g7Xzq4GTpiHL3av9SAgBFxu4TPi1hHZnojR50U66qs0-AlkVMfs1zBCaTBXhP4UTgByfimQ6B7kjOtCqe2GO1oovGZ-eM/w400-h200/html+css.PNG" >

dan code di bawah pada file css

h1 {

    color: #ff0000;

    font-size: 50px;

    background-color: #9acd32;

    width: 300px;

    height: 100px;

}

img {

    width: 400px;

    height: 210px;

}

dan lihat hasilnya, latar belakang lebar dan tinggi pada teks dan gambar sudah sesuai dengan yang kita atur pada file css.

Sekarang kita masuk pada pembahasan terakhir di artikel kali ini yaitu class.

4. Class

Class adalah atribut yang bisa kita gunakan untuk menerapkan css ke element tertentu. contoh jika kita mempuyai beberapa daftar dengan element <li> jika kita mengubah warna di css pada element <li> maka semua daftar pada element <li> akan ikut berubah warna, dengan atribut class kita bisa mengubah hanya satu element <li> saja.

Caranya adalah dengan memberi label pada Tag yang diinginkan, kita juga bisa menerapkan css yang berbeda ke setiap element. Jika kita ingin menerapkan css ke selector maka tanda titik di perlukan di depan nama class.

Cara menerapkan css ke beberapa tag adalah dengan menerapkan nama class yang sama kebeberapa element html. Perlu diingat lagi bahwa nama selector class selalu dimulai dengan titik jika kita lupa menambahkan titik maka css tidak akan diterapkan, Jika selector menggunakan titik tetapi tag tidak menggunakan titik.

Mari kita mulai menerapkan di text editor, tuliskan code di bawah ini.

code HTML

<link rel="stylesheet" href="style.css">

<h3>Pemrogaraman Web</h3>

<ul>

    <li class="selected">HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

Code CSS

li {

    color: #ff0000;

}

.selected{

    color: #0000ff;

}

Kemudian lihat hasilnya, kita bisa mengubah warna hanya pada satu element teks HTML saja.

Sekarang kita sudah belajar dasar-dasar yang harus kita kenal pada CSS, masih banyak hal yang perlu kita pelajari lagi namun kita harus tetap semangat.

Terima kasih dan semangat belajar.