Belajar CSS Dasar – Belajar Internet

Topik.my.ID – Belajar CSS Dasar sangatlah penting untuk membuat sebuah website menjadi Indah, karena memang CSS ini dapat memberikan anda warna, ukuran, desain yang memang membuat tampilan menjadi indah dan bagus.

Sebelum anda belajar membuat website sederhana akan lebih baik kita belajar html dasar setelah itu anda menggunakan css untuk membuat tampilan lebih menarik dan untuk menjalankan fungsi-fungsi yang diberikan agar bekerja dengan baik selanjutnya kita harus belajar javascripst.

Apa Itu CSS?

CSS merupakan kepanjangan dari Cascading Style Sheet yang mana fungsi Css untuk memberikan style, warna, ukuran dan ke dalam html pada halaman dalam sebuah website

Menurut w3.org, css adalah mekanisme sederhana yang mengatur gaya/style (warna, ukuran, posisi dll) pada halaman sebuah website, sebuah csslah yang akan membuat tampilan sebuah website menjadi menarik

sebelum ada css, bagaiaman cara html membuat tulisan helloworld yang besar dengan warna biru terang, ukuran 6 dan font jenis arial maka mendapatkan codingan yang panjang sekali

<font size="6" color="lightblue" face="arial"> <center> <h1> Hello world</h1></center></font>

jangan pernah lakukan seperti itu, dengan menggunakan css maka anda akan mendapatkan sintax yang simpel dengan dibuat ditempat lain yang tidak bercampuran dengan html lainnya

h1
{
font-size: 120px;
font-family: arial;
color: lightblue;
text-align: center;
}

Cascading Style Sheet merupakan sebuah aturan yang digunakan untuk menampilkan elemnt atau tag html, kalau html adalah yang menyajikan konten, sedangkan CSS yang mana konten akan ditampilkan, apakah berwarna biru, ukurannya besar dan lainnya sebagainya

Fungsinya CSS sebagai pemisah antara file dengan html yang disajikan tentunya gak tercampur antara file, 1 CSS dapat digunakan untuk banyak halaman html seluruh element akan berubah dan 1 halaman html dapat terlihat jika menggunakan css yang berbeda pula. Merubah website tanpa merubah html dengan menggunakan CSS,

Anatomi CSS

Tidak hanya dalam html yang memiliki anatomi struktur seperti elemen, tag atributnya. Dalam CSS terdapat anatomi seperti selector, property dan value. Adapun strukturnya adalah sebagai berikut

Selector {property:value;}

Untuk membuat CSS ini harus sesuai dengan struktur dan satu deklarasi seperti diatas misalkan

h1 {color:blue;
font-family: Arial;

}

Artinya CSS. Silahkan pilih seluruh elemen yang ada di H1, lalu ubah teks di dalamnya menjadi warna biru, dengan font arial.

Apa Itu Selector?

Selector merupakan sebuah bagian yang digunakan untuk memilih dan memanipulasi elemen spesifik pada html elemen yang kita pilih berdasarkan tag, id clas bahkan pola atau pattern.

Apa Itu Property?

Property dalam CSS itu banyak sekali, anda tidak perlu menghafal satu persatu property tersebut, kita hanya mengambil hal-hal penting saja dala menggunakan property ini seluruhnya ada 350 lebih property anda bisa kunjungi website milik css-tricks.com/almanac

Penempatan CSS

Ada beberapa cara menempakan file CSS pada dokument html yang kita miliki {CSS} atau membuat file terpisah antara file html dengan CSS.

Cara pertama kita bisa menggunakan embed dibagian head pada html dengan menggunakan tag style

<Style></Style>

Lihat Contohnya seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>coba css</title>

<style>

body {
font-family: arial;
}

h1
{
font-size: 120px;
color: lightblue;
text-align: center;
}

p {
line-height: 1,6em;
color: grey;
}
</style>

</head>
<body>

<h1> hello world</h1>

<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus et ipsa adipisci dolores libero, enim molestiae qui mollitia fugit corrupti, error numquam atque dolorum quisquam officiis, incidunt maxime id totam sint natus quos? Est, at? Fugiat labore nemo blanditiis atque enim, id voluptatibus excepturi qui autem dolore repellendus minus aliquid.</p>

</body>
</html>

Cara Kedua yang kita bisa lakukan adalah dengan menggunakan atribut dari html yang namanya style dengan type inline

inline

<p style=" color=lightblue;"> ....</p>

Contohnya sebagai berikut

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<h1 style="text-align: center; font-size: 60 px;"> Belajar Membaca</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Ad quis perspiciatis unde. Neque perferendis fugit rem aut praesentium blanditiis, aliquam quod quis iste. Optio, officia eius tenetur incidunt rem, quos!</p>

</body>
</html>

Cara Ketiga dengan menggunakan membuat file terpisah dengan html yang dihubungkan file css dengan tag html link, tagnya link file css mana yang ada pada halaman tersebut

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

Dengan contoh sebagai berikut ini:

Buat Html dan Style CSS yang terpisah dengan contoh sebagai berikut

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Hello World</h1>
<p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Tempora veritatis ducimus laboriosam assumenda perferendis, incidunt perspiciatis iure a vero tempore repellendus eos, qui corporis. Vitae aliquid nobis adipisci odit maiores.</p>
</body>
</html>

kemudian untuk file CSSnya adalah sebagai berikut

h1{
color: blue;
font-size: 16px;
font-family: Arial;

}

Bagiaman cara membuat font Styling?

CSS memisahkan antara font dengan teks, font terkait dengan tulisan dan teks terkait dengan propertu pendukung, mari kita lihat property apa saja yang ada pada font

Font – family: Mengatur jenis font yang akan digunakan
(nama font dan generic family)

contoh: body {
font-family: arial, verdana, sans-serif;
}

arial dan verdana adalah nama font sedangkan sans-serif dan serif adalah generic font

nama font tersebut berguna untuk mencari apakah dalam sebuah value ada fontnya, jika dalam komputer server tidak ada font arial maka berganti di font sebelahnya yaitu verdana.

Font – size: Mengatur Ukuran font
Kita bisa memberikan belakang ukurannya piksel = px persen=% dan em

contohnya

body {
font-family: arial, verdana, sans-serif;
font-size: 16 px;
}

Font - Weight: Mengatur Ketebalan font
ada beberapa value untuk weight yaitu lighter, normal, 100-900, bold, bolder
contohnya:

body {
font-family: arial, verdana, sans-serif;
font-size: 16 px;
font-weight: normal;
}

Font- Variant: Mengatur font menjadi small caps, ada dua jenis varian yaitu normal dan small caps

body {
font-family: arial, verdana, sans-serif;
font-size: 16 px;
font-variant: small-caps;
}

Font Style: Mengubah font menjadi bercetak miring
ada 3 value yang bisa digunakan yaitu normal, italic, oblique

body {
font-family: arial, verdana, sans-serif;
font-size: 16 px;
font-variant: small-caps;
font-style: italic;
}

line-height; mengatur spasi atau jarak antar baris, kalau di microsoft world

body {
font-family: arial, verdana, sans-serif;
font-size: 16 px;
font-variant: small-caps;
font-style: italic;
line-height: 50px;
}

Nah, jika itu terlalu panjang dalam CSS. Ada sebuah cara atau shorthand yang urutannya harus sesuai, mulai dari font-style, font-variant, font weight, font size, line height, font-family. Namun, dari properti diatas ada yang opsional dan wajib

Untuk Opsional: Italic, normal, bold
Untuk yang wajib: 16px dan helvetica, arial, sans serif

body { font; normal bold 16px/18px helvetica, arial, sans-serif;

}

Dalam CSS Shorthand, kita urutkan property-propertynya menjadi sebuah value.

Text Styling,

Nah, untuk membuat CSS atau website bisa anda simpan program html anda di https://codepen.io/login untuk menggunakannya tidak perlu registrasi namun disarankan untuk melakukan registrasi supaya file website yang kalian punya akan selalu ada. Ketika anda masuk ada 3 jenis yaitu html, CSS dan javascript. Kelebihanya akan menampilkan sebuah website pada layar sebuah kanan.

untuk memberikan komentar pada CSS anda bisa menggunakan / (slash) bintang * atau langsung bisa menggunakan CTRL + Slash

Anda bisa menggunakan teks dengan properti

/* belajar mengenal teks */

color untuk memberi warna pada tulisan

kita bisa memberikan beberapa tipe warna yaitu red, lightseagreen, royalblue

h1 {
font-size: 100px;
color: red;
}

selain itu bisa menggunakan hexadecimal untuk pemberian warna text seperti #ff0000, #20b2aa, #4169el warna dengan hexadecimal ini ada 6 digit, untuk 0 sampai dengan 6 digit ini warnanya hitam, sedangkan untuk f 6 digit warnanya putih.

h1
{
font-size: 100px;
color: ffffff;
}

Dan terakhir pemberian warna dengan rgb

gb(255,0,0), rgb(32,178,170), rgb(65,105,225)
h1
{
font-size: 100px;
color: rgb(65,105,225);
}

text-align mengatur format paragraf/teks

p {
text-align: center;
}

text-indent memberi identasi pada paragraf/teks atau jarak pada sebuah awal paragraf

p {
text-indent: 40px;
}

text-decoration mengatur dekorasi pada teks

Untuk teks ini untuk menambahkan underline, overline atau line-through
untuk menghilangkan garis bawah pada link bisa menggunakan css

a{
text-decoration: none;
}

untuk menghilangkan tag <a href=”a”>Link disini</a>

text-transform mengubah jenis huruf menjadi huruf besar, kecil atau kapital.

p
{
text-transform: capitalize;
}

Membuat awal pada tiap-tiap paragraf menjadi huruf besar.

letter-spacing mengatur spasi antar huruf

p {
letter-spacing: 1px;
}

word-spacing mengatur spasi antar kata

p {
text-indent: 40px;
word-spacing: normal;
}

CSS Background

Anda bisa menggunakan background pada body dan ada 4 elemnt yang harus dipelajari dalam CSS Background ini

1. Background-color: Mengatur warna pada backgroudn

2. Backgrund-image: Mengatur gambar yang digunakan pada background

3. Background-position: Mengatur Pososo gambar pada background

4. Backgorud-repeat: Mengatur Jenis Pengulangan Gambar pada Background

Dari keempat ini bisa anda gunakan semua atau satu saja, kami akan membuat CSS Backround ini dengan menyiapkan indeks.html, style.css dan background untuk gambar

Untuk mencari gambar yang berpola anda bisa mencari di subtlepatern.com yang mana banyak sekali pola-pola yang bisa digunakan untuk background di website

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>coba Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1> Hello World</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. lorem odit dolore maiores, quam incidunt, eius voluptatem ea.</p>
</body>
</html>

style.css

body {
background-color: white;
background-image: url(gambar/logo.png);
background-repeat: no-repeat;
background-position: top;
}

Dari Keempat background tadi bisa disingkat dalam shorthand menjadi sebaris saja dengan

Background: color url() position repeat;

Misalnya:

Background: lightgreen url(gambar/logo.png) top left no-repeat;

SELECTOR CSS Basic

Selector merupakan salah satu hal yang digunakan oleh CSS untuk mengenali sebuah elemen html yang akan diberikan style. Nah, apa saja yang bisa digunakan dalam teks selector ini. Ada beberapa yang bisa digunakan yaitu elemen html seperti yang telah kita buat sebelumnya, dan kita juga bisa menggunakan selector sendiri dengan menggunakan
id/class
Dan yang paling belum kita bahas adalah complexx xelector

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<h1> Hello World</h1>
<ul>
<li><a href="">link1</a></li>
<li><a href="">link2</a></li>
<li><a href="">link3</a></li>
<li><a href="">link4</a></li>
</ul>

<ol>
<li><a href="">link1</a></li>
<li><a href="">link2</a></li>
<li><a href="">link3</a></li>
<li><a href="">link4</a></li>
</ol>
<a href="www.topik.my.id"> Belajar Webprogramming</a>

<h2>Judul artikel</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil praesentium sint, ut, soluta voluptas aperiam quo ducimus nemo laboriosam quaerat autem cupiditate. Deleniti illum quos odit dolore quas saepe. Labore.</p>

</body>
</html>

CSS Element HTML

Nah, untuk memberikan warna yang sama pada selector anda cukup menuliskan satu selctor saja dengan menggunakan separator atau gruping dengan mengggunakan “koma”

h1,h2 {
color: green;
}

Jika kita ingin memberikan elemnt pada Ul dan OL yang UL dengan warna yang berbeda dengan UL warna orange, dan OL dengan warna merah kita tidak bisa menggunakan

ul {
color: orange;
}
ol {
color: red;
}

yang berubah bukanlah ul, namun yang berubah a didalamnya, jika kita tulis a maka

a {
color:red
}

semua warna a berubah menjadi merah, namun jika kita ingin membedakan warna a menggunakan sparator spasi untuk membedakan warna. Spasi itu namanya didalam yang ada di dalam Li atau yang ada di dalam UL contohnya

ul li a {
color: orange;
}

Sehingga a yang didalam ul berwarna orange

ol li a {
color: red;
}

Dan a yang ada dalam ol berwarna merah

NB, Jika ada warna yang sama bisa menggunakan koma dan jika ada warna yang lebih spesifik anda bisa gunakan spasi

Selector Class dan id

Jika kita hendak merubah warna pada sebuah paragraf tentunya, kita tidak bisa menggunakan selector html yang bisa kita gunakan adalah dengan menggunakan selctor id dan selector class

contoh pada html indeksnya sebagai berikut (tuliskan di dalam atributnya)

<p id="p1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil praesentium sint, ut, soluta voluptas aperiam quo ducimus nemo laboriosam quaerat autem cupiditate. Deleniti illum quos odit dolore quas saepe. Labore.</p>

<p class="p2"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi, alias recusandae, fugiat praesentium eveniet iure ut reprehenderit pariatur architecto nulla itaque quidem rerum sit culpa porro! Sit commodi esse culpa.</p>

untuk id kita menggunakan tanda pagar pada css

id= #

contoh css dari paragrafnya adalah sebagai berikut

#p1 {
color: red;
}

Untuk class kita menggunakan tanda titik pada css

class= .

contoh css dari paragrafnya adalah sebagai berikut

.p2{
color: blue;
}

Apa perbedaan antara dua selector ini? Kita bisa melihat teorinya sebagai berikut

Sebuah element html hanya boleh memiliki 1 id
setiap halaman hanya boleh memiliki 1 elemn dengan id tersebut
Dapat digunakan sebaga penanda halaman untuk link
Digunakan juga untuk javascrip
Sebaiknya tidak digunakan untuk CSS lebih baik gunakan class.

Jikalau untuk yang clas, maka satu elemen bisa menggunakan lebih dari satu clas contohnya berikut:

<p class="p2 cetak-tebal"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi, alias recusandae, fugiat praesentium eveniet iure ut reprehenderit pariatur architecto nulla itaque quidem rerum sit culpa porro! Sit commodi esse culpa.</p>

untuk CSSnya adalah sebagai berikut:

.p2{
color: blue;
}
.cetak-tebal{
font-weight: bold;
}

Dan untuk cetak tebal yang diatas pada CSS ini bisa digunakan untuk berulang kali contohnya pada html berikut:

<a href="www.topik.my.id" class='cetak-tebal'> Belajar Webprogramming</a>

Nah, untuk membuat selector pengkhususan pada paragaraf bisa anda lakukan perintah sebagai berikut

p.cetak-tebal{
font-size: 30px;
}

CSS tolong carikan saya paragraf tapi yang memiliki class cetak tebal jadi selain paragraf tidak akan dikenai cetak tebal

Pseudo Class CSS

Pseudo Class merupakan kelas semu yang dimiliki oleh sebuah elemen html yang membuat kita dapat mendefinisikan style pada keadaan tertentu dari elemen tersebut. Kenapa disebut dengan class semu? karena aktif pada keadaan tertentu saja dan pseudo class dibagi menjadi beberapa keadaan tertentu yang berhubungan dengan

Untuk menjalankan Sudo Class maka kata kuncinya adalah :Pseudo Class apa

contoh

.hello:link {}

:link

Style defaulte pada sebuah link (a yang memiliki href)

.hello:link{
color: orange;
}

: Hover

Style ketika kursor mouse berada diatas sebuah link/elemen

.hello:hover{
color: red;
font-family: Arial;
Font-size: 20px;
}

: active

Style ketika sebuah link di-klik (keadaan aktif)

.hello:active {
font-style: italic;
}

: visited

Style ketika sebuah link sudah pernah dikunjungi sebelumnya menggunakan browser yang sama

.hello:visited {
color: red;
}

Menggunakan tipe pertama yang aktif dengan menggunakan link

Untuk tipe kedua yaitu Pseudo Class yang berhubungan dengan posisi element

:firs-child

Memilih elemen pertama dari sebuah parent (elemen pembungkusnya)

.li:first-child a {
color: green;
}

css tolong saya carikan a yang ada di dalam li tapi yang merupakan anak pertama, lalu a di dalamnya kita ganti warnanya jadi hijau

:last-child

memilih elemen terakhir dari sebuah parent (elemen Pembungkusnya)

.li:last-child a {
color: green;
}

Maka yang berwarna hijau adalah yang terakhir:
css tolong saya carikan a yang ada di dalam li tapi yang merupakan anak pertama, lalu a di dalamnya kita ganti warnanya jadi hijau

:nth_child (n)

Memilih elemn ke-n dari sebuah paren (elemen Pembungkusnya.)
n Bisa berarti urutan 1,2 atau pula 2n, 3n+2, 4n-1 atau ganjil dan genap even dan odd
(even): genap (odd): ganjil

.li:nth-child(5) a {
color: green;
}

anda bisa tambahkan urutan yang nomor mana yang mau diganti pada urutannya seleteh element tersebut

.li:nth-child(odd) a:hover {
color: red;
}

Css tolong carikan saya Li yang didalamnya a dengan angka ganjil, saat saya hover maka warnanya merah

Pseudo-class yang berhubungan dengan posisi elemen (2)

: first-of-type

Memilih elemn pertama dari sebuah jenis/tipe tag

:last-of-type

memilih elemen terakhir dari sebuah jenis/tipe tag

Pewarisan pada CSS (Inheritance)

Pewarisan pada css ini sangatlah sederhana, pewarisan ini merupakan sebuah elemen yang mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parentnya

Properti yang diwariskan adalah

Color
font
letter-spacing
line height
list-style
text-align
text-indent
text-transform
visibility
white-space

contohnya sebagai berikut, yang mana jika bodynya semua dikasih color darkgrey maka yang a tidak berubah karena tidak mewarisinya untuk merubahnya anda harus menggunakan pewarisan dalam css

body {
font-family: arial;
color: darkgrey:
}

a {
color:inherit;
}

Maka colornya akan mengikuti orang tuanya menjadi darkgray

CSS Specificity

CSS Specificity merupakan setiap deklarasi CSS (selector) yang memiliki berat yang berbeda. Berat tersebut menentukan sebera spesifik sebuah elemen dapat dipilih oleh selector.

Setiap selector yang dibuat membuat berat yang berbeda dan sebera spesifik dari selector tersebut.

p {
color: green;
}
p{
color: red;
}

Overide, jika anda membuat css yang sama maka yang akan diambil adalah selector yang terakhir

#p {
color: red;
}

p{
color: green;
}

jika kita mendahulukan id terlebih dahulu maka akan lebih spesifik dari yang lain.

Inline, Id, Class, Element

jika anda tidak bisa menghitungnya anda bisa ke url http://specificity.keegan.st sebagai kalkultaro dalam menghitung specificity yang akan adukan antara id, class, element yang bisa anda tulis di selector yang akan anda bandingkan.

Semoga dengan Belajar CSS Dasar diatas menjadi bahan refrensi bagi anda yang ingin belajar css untuk pemula terimakasih.