Penjelasan CSS Aspire

CSS

CSS adalah singkatan dari Cascading Style Sheet yang bisa disebut sebagai pemberi style atau gaya pada elemen yang ada di dalam html. Seperti memberi warna, bentuk huruf, warna background, jenis huruf dll. Langsung saja kita mulai penjelasan css.

CSS Selectors

CSS Selectors adalah salah satu css yang digunakan untuk
memisahkan settingan-settingan yang akan digunakan untuk elemen-elemen HTML. Dimana css tersebut bisa dipanggil dengan menggunak id, class dan lain-lain.

CSS Selectors dibedakan menjadi 3 yaitu :

1. Elemen selectors

Dimana settingan css yang ditulis diberi nama sesuai elemen yang akan diubah style nya

2. Id selectors

Dimana settingan css diberi nama dengan awalan tanda #, contohnya #id1

3. Class selectors

Settingan css diberi nama dengan awalan tanda titik (.), contohnya .class01

Dan jika kita ingin membuat settingan untuk elemen yang berbeda tetapi dengan settingan yang sama kita bisa mengelompokan elemennya secara bersamaan dimana cara ini disebut grouping selector.

Contoh script CSS Selectors :

<!DOCTYPE html>

<html>

<head>

<style>

p {color:red;}

#nomor1 {color:blue;

background-color:yellow;}

.class1 {color:white;

background-color:black;}

h1, h2 {text-decoration:underline}

</style>

</head>

<body>

<h1>Heading ini akan bergaris bawah</h1>

<h2>Heading ini akan bergaris bawah</h2>

<p> Huruf di paragraf ini akan berwarna merah</p>

<p id="nomor1">Huruf di paragraf ini akan berwarna biru dan berbackground kuning</p>

</body>

</html>

Hasil script di atas :

CSS How To

CSS How To adalah penjelasan cara-cara untuk memasukkan settingan CSS.

Ada 3 cara untuk memasukkan settingan CSS yaitu :

1. Inline style

Settingan css ditempatkan di dalam tag yang akan dimodif atau diberi style css

2. Internal style

Seluruh settingan css ditempatkan di dalam tag <head><style> settingan css </style></head>

3. External style

Dimana kita membuat terlebih dahulu settingan” css yang akan dibuat dengan text editor lalu kita save dengan extension .css, baru settingan tersebut akan dipanggil saat kita akan membuat sebuah dokumen html

Contoh script html :

<!DOCTYPE html>

<html>

<head>

<style>

p {color: red;

text-decoration:underline;}

</style>

</head>

<body>

<h1>Heading ini akan rata tengah dan berwarna biru</h1>

<p> Huruf paragraf ini akan berwarna merah dan bergaris bawah</p>

<p style="background-color:black;color:white;">Paragraf ini akan berbackground hitam</p>

</body>

</html>

Hasil script di atas :

CSS Background

CSS Background adalah style css yang digunakan untuk mengganti background dokumen html.

Ada 5 style di CSS Background yaitu :

1. Background-color

Membuat background berwarna sesuai selera

2. Background-image

Membuat gambar menjadi background html kita

3. Background-repeat

Mengatur perulangan gambar yang dijadikan background

4. Background-attachment

Untuk mengatur apakah gambar background akan tetap pada posisi atau ikut berubah saat di scroll

5. Background-position

Untuk mengatur letak gambar background

Di dalam css background ada yang namanya Shorthand property yaitu penulisan settingan backgroundnya dipersingkat. Jika normalnya penulisan scriptnya seperti :

Body {background-image: url(“w3schools.jpg”);

Background-repeat:no-repeat; }

Nah di shorthand property penulisannya dipersingkat hanya dengan menuliskan stylenya dan di pisahkan dengan spasi seperti :

body { background : url(“w3schools.jpg”) no-repeat;}

Contoh script html :

<!DOCTYPE html>

<html>

<head>

<style>

body { background-image: url("w3schools.jpg");

background-repeat: no-repeat;

background-position: center ;

background-attachment:fixed;

}

</style>

</head>

<body>

<p>Gambar background nya akan tetap di posisi karena kita merubah attachment nya menjadi fixed <p>

<p>Coba geser ke bawah</p>

<p>Coba geser ke bawah</p><p>Coba geser ke bawah</p>

<p>Coba geser ke bawah</p>

<p>Coba geser ke bawah</p><p>Coba geser ke bawah</p>

<p>Coba geser ke bawah</p>

</body>

</html>

Hasil script di atas :

CSS Text

Di css text ini berisi tentang style untuk mengatur bentuk, warna, gaya dari sebuah teks

Ada 5 style si CSS text yaitu :

1. Text Color

Untuk mengganti warna teks

2. Text alignment

Untuk mengatur posisi rata teks

3. Text Decoration

Untuk mengatur dekorasi berupa garis dalam teks

4. Text Transformation

Untuk mengatur apakah akan menggunakan huruf kecil atau kapital

5. Text Indentation

Untuk mengatur jarak kata pertama dalam kalimat dengan sisi kiri

Contoh Script html :

<!DOCTYPE html>

<html>

<head>

<style>

p {color:blue}

p.tengah {text-align:center}

p.kiri-kanan {text-align:justify}

p.kanan {text-align:right}

p.atas {text-decoration:overline}

p.tembus {text-decoration:line-through}

p.bawah {text-decoration:underline}

p.besar {text-transform:uppercase}

p.kecil {text-transform:lowercase}

p.kapital {text-transform:capitalize}

p.indent {text-indent:50px}

</style>

</head>

<body>

<p> Seluruh huruf di dokumen ini berwarna biru</p>

<p class="tengah">Teks ini akan rata tengah </p>

<p class="kiri-kanan"> Teks ini akan rata kiri kanan jika penulisannya lebih panjang dan membentuk paragraf maka paragraf ini akan menjadi rata kiri kanan. Rata kiri kanan maksutnya adalah jarak sisi kiri dan kanan dari kata ke sisi kertas sama.</p>

<p class="kanan"> Teks ini akan rata kanan</p>

<p class="atas">Di atas teks ini akan ada sebuah garis</p>

<p class="tembus">Akan ada sebuah garis yang menutupi kalimat ini, atau bisa disebut kalimat ini akan menjadi seperti dicoret</p>

<p class="bawah">Kalimat ini akan bergaris bawah</p>

<p class="besar">Kalimat ini akan berhuruf kapital semua</p>

<p class="kecil">SELURUH HURUF DI KALIMAT INI KECIL</p>

<p class="kapital">seluruh kata di kalimat ini akan diawali huruf kapital</p>

<p class="indent">Di depan kalimat ini akan ada jarak dari sisi kiri yang kita sebut indent</p>

</body>

</html>

Hasil script di atas :

CSS Font

CSS Font adalah settingan css tentang format font, baik itu jenis, ukuran maupun style font.

Ada 3 style di css font yaitu :

1. Font-family

Untuk mengatur jenis huruf yang digunakan

2. Font-style

Untuk mengatur bentuk huruf seperti italic, oblique

3. Font-size

Untuk mengatur ukuran huruf

Contoh script html :

<!DOCTYPE html>

<html>

<head>

<style>

p.times {font-family:"Times New Roman"}

p.alger {font-family:"Algerian"}

p.italic {font-style:italic}

p.px {font-size:20px}

p.em {font-size:3em}

</style>

</head>

<body>

<p class="times">Paragraf ini ditulis dengan huruf Times New Roman</p>

<p class="alger">Paragraf ini ditulis dengan huruf Algerian</p>

<p class="italic">Paragraf ini ditulis dengan style italic</p>

<p class="px">Ukuran paragraf ini adalah 20px</p>

<p class="em">Ukuran paragraf ini adalah 3em</p>

</body>

</html>

Hasil script di atas :

CSS Link

Didalamnya terdapat settingan untuk memberi style pada link. Ada 4 style pada css link, yaitu :

1. a:link

normal link

2. a:visited

memberi style pada link yang sudah dikunjungi

3. a:hover

memberi style pada link jika pointer mouse terdapat di atas link

4. a:active

memberi style pada link saat link itu di klik

Contoh script html :

<!DOCTYPE html>

<html>

<head>

<style>

a {color: blue;}

a:visited {color: red;}

a:hover {color: hotpink;}

a:active {color: yellow;}

</style>

<head>

<body>

</body>

</html>

Hasil script di atas :

CSS List

Untuk memberi style pada sebuah list yang ada di dokumen. Ada 3 style untuk css list, yaitu :

1. list-style-type

Untuk memilih bentuk list yang diinginkan

2. list-style-image

Menjadikan gambar sebagai list mark

3. list-style-position

Mengatur posisi list

Contoh Script html :

<!DOCTYPE html>

<html>

<head>

<style>

ul.a { list-style-type:square;

list-style-position:inside;}

ul.b { list-style-type:circle;

list-style-position:outside;}

ol.c { list-style-type:lower-roman;

list-style-position:outside;}

ol.d { list-style-type:upper-alpha;

list-style-position:inside}

</style>

</head>

<body>

<li>Manajemen Informatika</li>

<li>Komputerisasi Akuntansi</li>

<li>Teknik Otomotif</li>

</ul>

<li>Manajemen Informatika</li>

<li>Komputerisasi Akuntansi</li>

<li>Teknik Otomotif</li>

</ul>

<li>Manajemen Informatika</li>

<li>Komputerisasi Akuntansi</li>

<li>Teknik Otomotif</li>

</ol>

<li>Manajemen Informatika</li>

<li>Komputerisasi Akuntansi</li>

<li>Teknik Otomotif</li>

</ol>

</body>

</html>

Hasil script di atas :

CSS Tables

CSS Tables digunakan untuk memberi style pada tabel yang kita buat. Ada 7 style di dalam CSS Tables antara lain :

1. Tabel border

Untuk mengatur bentuk border dari tabel yang kita buat

2. Collapse border

Membuat border tabel menjadi 1 garis saja

3. Table width and height

Untuk mengatur tinggi dan lebar tabel

4. Horizontal text alignment

Untuk mengatur rerata dari teks secara horizontal

5. Vertical text alignment

Untuk mengaatur rerata teks secara vertikal

6. Table padding

Untuk mengatur jarak antara tulisan di dalam tabel dengan border atau garis tabel

7. Table color

Untuk memberi warna pada tabel

Contoh Script HTML :

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {border: 1px solid black;}

table {border-collapse: collapse;}

table {width: 75%;}

th {height: 25px;}

td {height: 25px;}

th {text-align: center;}

td {text-align: right;}

th {vertical-align: center;}

td {vertical-align: top;}

td {padding: 5px;}

table, td, th {border: 5px solid red;}

th {background-color: blue;

color: yellow;}

</style>

</head>

<body>

<table>

<tr>

<th>Jurusan</th>

</tr>

<tr>

<td>Anang</td>

<td>Manajemen Informatika</td>

</tr>

<tr>

<td>Manajemen Informatika</td>

</tr>

<tr>

<td>Rany Nadya</td>

<td>Komputerisasi Akuntansi</td>

</tr>

<tr>

<td>Asrori</td>

<td>Teknik Otomotif</td>

</tr>

</table>

</body>

</html>

Hasil script di atas :

CSS Box Model

CSS Box Model adalah pengibaratan bahwa sebuah elemen di dalam html itu adalah sebuah kotak, dan yang diibaratkan di sini adalah width, padding, border, margin.

1. Width

Ukuran lebar elemen

2. Padding

Jarak antara content dan border

3. Border

Sebuar garis yang mengelilingi conteng

4. Margin

Jarak antara border dan sisi luar tepi layar

5. Content adalah konten atau isi yang kita buat

Contoh Script HTML :

<!DOCTYPE html>

<html>

<head>

<style>

div {background-color: black;

width: 200px;

padding: 10px;

border: 20px solid lightblue;

margin: 15px;

color:white}

</style>

</head>

<body>

<div>Kita bisa lihat sendiri bahwa sudah terlihat pembagian kotak-kotak yang kita buat tadi. Sudah dibedakan dengan warna sesuai yang kita inginkan</div>

</body>

</html>

Hasil script di atas :

CSS Border

Kumpulan style untuk memodif border. Ada bermacam-macam style untuk border.

Contoh Script HTML :

<!DOCTYPE html>

<html>

<head>

<style>

p.none {border-style: none;}

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid { border-style: solid;

border-width: 5px}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.hidden {border-style: hidden;}

p.gabungan {border-style:dashed solid double groove}

</style>

</head>

<body>

<p class="none">Tidak ada border</p>

<p class="dotted">Ini adalah border style dotted</p>

<p class="dashed">Ini adalah border style dashed</p>

<p class="solid">Ini adalah border style solid</p>

<p class="double">Ini adalah border style double</p>

<p class="groove">Ini adalah border style groove</p>

<p class="ridge">Ini adalah border style ridge</p>

<p class="inset">Ini adalah border style inset</p>

<p class="outset">Ini adalah border style outset</p>

<p class="hidden">Ini adalah border hidden atau tidak kelihatan.</p>

<p class="gabungan">Ini adalah gabungan dari beberapa style</p>

</body>

</html>

Hasil script di atas :

CSS Outline

CSS outline ini sama seperti css border hanya saja namanya yang beda. Kita juga bisa

Contoh Script HTML :

<!DOCTYPE html>

<html>

<head>

<style>

p {outline-color:blue}

p.none {outline-style: none;}

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}

p.solid { outline-style: solid;

outline-width: 5px}

p.double {outline-style: double;}

p.groove {outline-style: groove;}

p.ridge {outline-style: ridge;}

p.inset {outline-style: inset;}

p.outset {outline-style: outset;}

</style>

</head>

<body>

<p class="none">Tidak ada outline</p>

<p class="dotted">Ini adalah outline style dotted</p>

<p class="dashed">Ini adalah outline style dashed</p>

<p class="solid">Ini adalah outline style solid</p>

<p class="double">Ini adalah outline style double</p>

<p class="groove">Ini adalah outline style groove</p>

<p class="ridge">Ini adalah outline style ridge</p>

<p class="inset">Ini adalah outline style inset</p>

<p class="outset">Ini adalah outline style outset</p>

</body>

</html>

Hasil script di atas :

CSS Margin

CSS Margin adalah style yang digunakan untuk mengatur margin atau jarak keluar dari sebuah elemen. Di CSS margin ada 4 settingan yaitu :

1. margin-top

Mengatur margin bagian atas

2. margin-right

Mengatur margin bagian kanan

3. margin-bottom

Mengatur margin bagian bawah

4. margin-left

Mengatur margin bagian kiri

Dan ada yang namanya dimana kita bisa melakukan settingan sekaligus tanpa menyetting satu-persatu seperti :

Margin: 100px 75px 50px 25px

Margin atas 100px

Margin kanan 75 px

Margin bawah 50px

Margin kiri 25px

Margin: 100px 75px 50px

Margin atas 100px

Margin kanan dan kiri 75px

Margin bawah 50px

Margin: 100px 75px

Margin atas dan bawah 100px

Margin kanan dan kiri 75px

Margin: 100px

Semua sisi marginnya 100px

Contoh Script HTML :

<!DOCTYPE html>

<html>

<head>

<style>

p.a {margin: 50px 75px 50px 25px}

p.b {margin: 25px 50px 100px}

p.c {margin: 10px 5px 25px}

</style>

</head>

<body>

<p class="a">Paragraf 1</p>

<p class="b">Paragraf 2</p>

<p class="c">Paragraf 3</p>

</body>

</html>

Hasil script di atas :

CSS Padding

CSS Padding seperti yang sudah dijelaskan sebelumnya untuk mengatur jarak antara konten di dalam kotak dengan sisi kotaknya. Settingan nya sama seperti margin dibagi menjadi top, right, bottom dan left.

Contoh Script HTML :

<!DOCTYPE html>

<html>

<head>

<style>

p.kotak { border:1px solid black;

padding-top:10px;

padding-right:100px;

padding-bottom:25px;

padding-left:50px;}

</style>

</head>

<body>

<p class="kotak">Lihatlah jarak antara teks dan kotaknya di seluruh sisi</p>

</body>

</html>

Hasil script di atas :

» Thanks for reading: Penjelasan CSS

Latest News and Artikel

Penjelasan CSS