Kamis, 19 Maret 2020
CSS #9 SPECIFICITY
SPECIFICITY
contoh script:
<!DOCTYPE html>
<html>
<head>
<title>Specificity</title>
</head>
<body>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
jika ditambahkan file CSS:
#p1 { color: red;}
p {color: green;}
maka warna scriptnya akan berwarna red. #p1 lebih berat dari p
cara perhitunganya:
inline id class element
0 0 0 0
#p1
inline id class element
0 1 0 0
p
inline id class element
0 0 0 1
Maka 100 dan satu berat 100 jadi warnanya menjadi red
contoh script:
<!DOCTYPE html>
<html>
<head>
<title>Specificity</title>
</head>
<body>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
jika ditambahkan file CSS:
#p1 { color: red;}
p {color: green;}
maka warna scriptnya akan berwarna red. #p1 lebih berat dari p
cara perhitunganya:
inline id class element
0 0 0 0
#p1
inline id class element
0 1 0 0
p
inline id class element
0 0 0 1
Maka 100 dan satu berat 100 jadi warnanya menjadi red
CSS #8 INHERITANCE
Inherit ( Mewarisi )
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Inherit</title>
</head>
<body>
<h1>Hello word</h1>
<a href="#">kembali ke halaman utama</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
CCS Nya:
Body { font-family: arial;
color:darkgrey;}
Maka "kembali ke halaman utama" collornya tetap sama
maka solusinya adalah, tambah CSS berikut
Body { font-family: arial;
color:darkgrey;
}
a { color: inherit;}
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Inherit</title>
</head>
<body>
<h1>Hello word</h1>
<a href="#">kembali ke halaman utama</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
CCS Nya:
Body { font-family: arial;
color:darkgrey;}
Maka "kembali ke halaman utama" collornya tetap sama
maka solusinya adalah, tambah CSS berikut
Body { font-family: arial;
color:darkgrey;
}
a { color: inherit;}
Kamis, 05 Maret 2020
CSS #7 Pseude Class
Pseude Class
Pseude Class adalah kelas semu yang dimiliki sebuah elemen HTML, yang membuat kita dapat mendefinisikan style pada "keadaan tertentu" dari elemen tersebut.
Pseude Class terbagi ke dalam beberapa type
pseude-class yang berhubungan dengan link:
1. :link, style default pada sebuah link/elemen.
2. :hover, style kursor mouse berada diatas sebuah link/elemen.
3. :style, ketika sebuah link di-klik sebuah link ( keadaan aktif ).
4. :visited, style ketika sebuah link sudah pernah dikunjungi sebelumnya ( menggunakan browser yang sama ).
Pseude Class adalah kelas semu yang dimiliki sebuah elemen HTML, yang membuat kita dapat mendefinisikan style pada "keadaan tertentu" dari elemen tersebut.
Pseude Class terbagi ke dalam beberapa type
pseude-class yang berhubungan dengan link:
1. :link, style default pada sebuah link/elemen.
2. :hover, style kursor mouse berada diatas sebuah link/elemen.
3. :style, ketika sebuah link di-klik sebuah link ( keadaan aktif ).
4. :visited, style ketika sebuah link sudah pernah dikunjungi sebelumnya ( menggunakan browser yang sama ).
CSS #6 Selector Basic
CSS Selector Basic
Digunakan pada CSS untuk mengenali sebuah elemen HTML yang akan diberi style.
terdiri dari:
a. elemen HTML.
b. id
Penjelasan:
1. sebuah elemen HTML hanya boleh memiliki 1 id.
2. setiap halaman hanya boleh memiliki 1elemen yaitu dengan id tersebut.
3. dapat digunakan sebagai penanda halaman untuk link.
4. digunakan juga untuk java script.
5. sebaiknya tidak digunakan untuk css lebih baik pake class.
c. class.
d. complex selector.
sebelumnya jangan bingung apabila sudah melihat script yang begitu panjang dibawah ini, karena dengan pemberian komentar yang begitu panjang padahal dengan script yang sangat sederhana. Maka saya sarankan untuk meng copy script yang saya buat ke dalam kode editor masing-masing, namun yang saya sarankan kalian menggunakan kode editor yaitu sublime text. Supaya tidak dibingungkan dengan kolom komentar yang saya sisipkan untuk memberikan penjelasan pada anda.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style type="text/css">
body {
font-family: arial;
}
/*memberikan efek seluruh tulisan dalam Browser itu type hurufnya adalah arial*/
h1 , h2 {
color: green;
}
/*memberikan efek seluruh tulisan dalam h1 yang ada di dalam tag h2 itu akan berwarna Hijau*/
/*jika menggunakan warna yang berbeda maka penulisanya bisa diubah, tetapi apabila kita menginginkan warna colornya sama maka bisa dihubugkan dengan elemen (,) atau artinya = dan*/
/*h2 {
color: green;
}
memberikan efek seluruh tulisan dalam h2 yang ada di dalam tag h2 itu akan berwarna Hijau
}*/
ul li a {
color: yellow;
}
/*Untuk memberi warna pada tag li maka tidak kita mengetikan ul { color: orange ; akan tidak ada perubahan apa-apa dan kalo kita mengetikan script, a{ color: orange; maka semua hyper link nya akan berwarna orange. Oleh karena itu kita harus menuliskan sesuai script yang saya tuliskan diatas dengan secara lengkap} */
ol li a {
color: red;
}
/*sama seperti komentar diatas (ul>*/
/*Selanjutnya bagaimana kita memberikan warna pada paragraf yang terdiri dari dua paragraf namun dengan mengunakan warna yang berbeda. Jika kita mengetikan script p { color: blue ;} makan yang terjadi kedua paragraf tersebut memiliki warna yang sama yaitu berwarna biru. Nah untuk membedakanya kita akan menambahkan id dan class pada tag paragraf/<p>, seperti dibawah*/
#p1 {
color:orange;
}
/*untuk "id" sebelum selector ditambahkan tanda (#) dan id hanya bisa terdiri dari 1 elemen yaitu p1.*/
.p2 {
color: red ;
}
.cetak-tebal {
font-weight: bold ;
}
p.cetak-tebal {
font-size:20px;
}
/*dan untuk "class" sebelum selector ditambahkan tanda (.) di dalam selector class itu bisa ditambahkan beberapa elemen seperti pada script diatas saya menambahkan elemen font-size sedangkan sebelumnya ada elemen color. */
</style>
</head>
<body>
<h1>Hello Word</h1>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
<ol>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>
</ol>
<a href="#" class="cetak-tebal">WebProgrammingLeni</a>
<h2>Judul Artikel</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2" class="cetak-tebal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Sekian dari saya terimakasih
Digunakan pada CSS untuk mengenali sebuah elemen HTML yang akan diberi style.
terdiri dari:
a. elemen HTML.
b. id
Penjelasan:
1. sebuah elemen HTML hanya boleh memiliki 1 id.
2. setiap halaman hanya boleh memiliki 1elemen yaitu dengan id tersebut.
3. dapat digunakan sebagai penanda halaman untuk link.
4. digunakan juga untuk java script.
5. sebaiknya tidak digunakan untuk css lebih baik pake class.
c. class.
d. complex selector.
sebelumnya jangan bingung apabila sudah melihat script yang begitu panjang dibawah ini, karena dengan pemberian komentar yang begitu panjang padahal dengan script yang sangat sederhana. Maka saya sarankan untuk meng copy script yang saya buat ke dalam kode editor masing-masing, namun yang saya sarankan kalian menggunakan kode editor yaitu sublime text. Supaya tidak dibingungkan dengan kolom komentar yang saya sisipkan untuk memberikan penjelasan pada anda.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style type="text/css">
body {
font-family: arial;
}
/*memberikan efek seluruh tulisan dalam Browser itu type hurufnya adalah arial*/
h1 , h2 {
color: green;
}
/*memberikan efek seluruh tulisan dalam h1 yang ada di dalam tag h2 itu akan berwarna Hijau*/
/*jika menggunakan warna yang berbeda maka penulisanya bisa diubah, tetapi apabila kita menginginkan warna colornya sama maka bisa dihubugkan dengan elemen (,) atau artinya = dan*/
/*h2 {
color: green;
}
memberikan efek seluruh tulisan dalam h2 yang ada di dalam tag h2 itu akan berwarna Hijau
}*/
ul li a {
color: yellow;
}
/*Untuk memberi warna pada tag li maka tidak kita mengetikan ul { color: orange ; akan tidak ada perubahan apa-apa dan kalo kita mengetikan script, a{ color: orange; maka semua hyper link nya akan berwarna orange. Oleh karena itu kita harus menuliskan sesuai script yang saya tuliskan diatas dengan secara lengkap} */
ol li a {
color: red;
}
/*sama seperti komentar diatas (ul>*/
/*Selanjutnya bagaimana kita memberikan warna pada paragraf yang terdiri dari dua paragraf namun dengan mengunakan warna yang berbeda. Jika kita mengetikan script p { color: blue ;} makan yang terjadi kedua paragraf tersebut memiliki warna yang sama yaitu berwarna biru. Nah untuk membedakanya kita akan menambahkan id dan class pada tag paragraf/<p>, seperti dibawah*/
#p1 {
color:orange;
}
/*untuk "id" sebelum selector ditambahkan tanda (#) dan id hanya bisa terdiri dari 1 elemen yaitu p1.*/
.p2 {
color: red ;
}
.cetak-tebal {
font-weight: bold ;
}
p.cetak-tebal {
font-size:20px;
}
/*dan untuk "class" sebelum selector ditambahkan tanda (.) di dalam selector class itu bisa ditambahkan beberapa elemen seperti pada script diatas saya menambahkan elemen font-size sedangkan sebelumnya ada elemen color. */
</style>
</head>
<body>
<h1>Hello Word</h1>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
<ol>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>
</ol>
<a href="#" class="cetak-tebal">WebProgrammingLeni</a>
<h2>Judul Artikel</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2" class="cetak-tebal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Sekian dari saya terimakasih
CSS #5 Background
Background
1. background-color, mengatur warna pada background.
contoh:
body {
background-color: lightblue;
}
2. background-image, mengatur gambar yang akan digunakan pada background.
contoh:
body {
background-image: url( folder/nama file.jpg;
}
untuk mencari gambar yang berpola bisa kunjungi website, subtlepatterns.com
3. background-position, mengatur posisi gambar pada background.
contoh:
ada bantak valuenya:
Ada top left, center, right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, x pos y pos.
body {
background-color: lightblue;
background-repeat: repeat-x; <!--bisa pilih x/y atau no-repeat-->
background-image: url( folder/nama file.jpg;
background-position: top center;
4. background-repeat, mengatur jenis pengulangan pada background.
contoh:
body {
background-color: lightblue;
background-repeat: repeat-x; <!--bisa pilih x/y atau no-repeat-->
background-image: url( folder/nama file.jpg;
}
5. background.
atau semuanya bisa disingkat menjadi:
body {
background: lightgreen url(nama file.jpg) top-left no repeat ;
}
1. background-color, mengatur warna pada background.
contoh:
body {
background-color: lightblue;
}
2. background-image, mengatur gambar yang akan digunakan pada background.
contoh:
body {
background-image: url( folder/nama file.jpg;
}
untuk mencari gambar yang berpola bisa kunjungi website, subtlepatterns.com
3. background-position, mengatur posisi gambar pada background.
contoh:
ada bantak valuenya:
Ada top left, center, right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, x pos y pos.
body {
background-color: lightblue;
background-repeat: repeat-x; <!--bisa pilih x/y atau no-repeat-->
background-image: url( folder/nama file.jpg;
background-position: top center;
4. background-repeat, mengatur jenis pengulangan pada background.
contoh:
body {
background-color: lightblue;
background-repeat: repeat-x; <!--bisa pilih x/y atau no-repeat-->
background-image: url( folder/nama file.jpg;
}
5. background.
atau semuanya bisa disingkat menjadi:
body {
background: lightgreen url(nama file.jpg) top-left no repeat ;
}
Rabu, 04 Maret 2020
CCS #4 Text Styling
Text Styling
text:
1. Color, Memberi warna pada tulisan.
contoh:
h1 {
color: skyblue;
}
untuk memilih warna bisa mengunjungi website, www.colorpicker.com dengan memasuki angka
hexadesimal. Dengan memasukan kode angka hexanya.
2. text-align, Mengatur format paragraf/text.
terdiri dari 3 atribut:
a. left, untuk rata kiri.
b. right, untuk rata kanan.
c. center, untuk rata tengah.
d. justify, untuk rata kiri kanan.
contoh:
p {
text-align: right ;<!--rata kiri-->
}
3. text-indent, Memberi indentasi pada paragraf/text.
terdiri dari 2 atribut nilai
a. bisa dengan px,
b. atau bisa dengan %
contoh:
p {
text-indent: 100 px;
}
4. text-decoration, Mengatur dekorasi pada text.
terdiri dari 4 atribut:
a. none, untuk menghilangkan garis bawah pada alamat link.
b. underline, memberikan garis bawah ditulisan
c. overline, memberikan garis diatas tulisan
d. line-through, memberikan garis melewati tulisanya.
contoh:
h1 {
text-decoration: underline;
}
5. text-transform, Mengubah jenis huruf menjadi kecil, besar/kapital.
terdiri dari 4 atribut:
a. none,
b. lowercase,
c. uppercase.
d. kapitalize,
digunakan untuk memaksa tulisan menjadi huruf besar semua atau huruf kecil semua.
contoh:
h1 {
text-transform: uppercase;
}
6. letter-spacing, Mengatur spaci antar huruf.
terdiri dari 2 atribut nilai:
a. normal.
b. px
contoh:
p {
letter-spacing: 5px;
}
7. word-spacing, Mengatur spaci antar kata.
terdiri dari 2 atribut nilai:
a. normal.
b. px
contoh:
p {
word-spacing: 10px;
}
text:
1. Color, Memberi warna pada tulisan.
contoh:
h1 {
color: skyblue;
}
untuk memilih warna bisa mengunjungi website, www.colorpicker.com dengan memasuki angka
hexadesimal. Dengan memasukan kode angka hexanya.
2. text-align, Mengatur format paragraf/text.
terdiri dari 3 atribut:
a. left, untuk rata kiri.
b. right, untuk rata kanan.
c. center, untuk rata tengah.
d. justify, untuk rata kiri kanan.
contoh:
p {
text-align: right ;<!--rata kiri-->
}
3. text-indent, Memberi indentasi pada paragraf/text.
terdiri dari 2 atribut nilai
a. bisa dengan px,
b. atau bisa dengan %
contoh:
p {
text-indent: 100 px;
}
4. text-decoration, Mengatur dekorasi pada text.
terdiri dari 4 atribut:
a. none, untuk menghilangkan garis bawah pada alamat link.
b. underline, memberikan garis bawah ditulisan
c. overline, memberikan garis diatas tulisan
d. line-through, memberikan garis melewati tulisanya.
contoh:
h1 {
text-decoration: underline;
}
5. text-transform, Mengubah jenis huruf menjadi kecil, besar/kapital.
terdiri dari 4 atribut:
a. none,
b. lowercase,
c. uppercase.
d. kapitalize,
digunakan untuk memaksa tulisan menjadi huruf besar semua atau huruf kecil semua.
contoh:
h1 {
text-transform: uppercase;
}
6. letter-spacing, Mengatur spaci antar huruf.
terdiri dari 2 atribut nilai:
a. normal.
b. px
contoh:
p {
letter-spacing: 5px;
}
7. word-spacing, Mengatur spaci antar kata.
terdiri dari 2 atribut nilai:
a. normal.
b. px
contoh:
p {
word-spacing: 10px;
}
Langganan:
Komentar (Atom)