Sukai Penulis: CSS

CSS

Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Display Dalam CSS

Atribut Display

Dalam CSS, anda dapat pula memanipulaskan elemen-elemen dalam html agar tampilannya menjadi sesuai dengan yang anda inginkan, Saat ini kebanyakan halaman web dapat di buat hanya dengan menggunakan sedikit tag yang di susun rapi ke dalam style css yang akan mengatur tampilan dokumen web hingga sesuai dengan keinginan anda.

Kebanyakan dokumen html yang di tampilkan dalam browser saat ini terdiri dari berbagai style font, margin, padding, dan pada dasarnya adalah tipe display. Adapun penulisan display dalam css dapat di masukan ke dalam sebuah selector seperti contoh script berikut ini:

selector {display : tipe display;}

kebanyakan tipe pokok dari display adalah berupa tipe inline, block-line, dan none yang dapat di manipulasi dengan property display dan nilai inline, block serta none tersebut. Adapun maksud dari tipe display adalah:

Tipe-tipe Display

Inline	:	Seperti artinya di mana elemen-elemen yang di tampilkan secara inline akan mengikuti alur dari sebuah garis/line. Elemen-elemen seperti strong, anchor, dan emphasis adalah elemen yang biasa nya di tampilkan secara inline
Block	:	Akan menempatkan sebuah line break sebelum dan sesudah elemen yang di berikan property ini. Header dan paragraf adalah contoh dari elemen yang biasanya di tampilkan secara blok-line dalam display.
None	:	Maksud dari property ini adalah tidak akan menampilkan elemen yang memiliki property ini, walaupun terlihat tidak berguna, tetapi property ini dapat di gunakan dan akan terlihat bagus jika di gabungkan dengan elemen-elemen accessibility seperti accessbility link, alternate stylesheet, atau efek hover tingkat lanjut.

Berikut sebuah contoh penerapan property display dalam membuat layout sebuah dokumen web:

<html>
<head>
<title>Belajar Display</title>
</style>
#bg{
display: inline;
z-index: 1;
background: #ffccff;
left: 10px;
width : 100%;
border-bottom: #fc9b52 20px solid;
position: absolute;
top: 10px;
height: 150;
}
</style>
</head>
<body>
div id=bg> </div>
</body>
<html>

Pada contoh kode di atas di gunakan sebuah property display yang di terapkan secara inline, kemudian posisi z-index 1, warna background #ffccff warna border bawah dengan nilai 20 piksel, posisi absolute, besar margin atas 10 piksel dan tinggi sebesar 150 piksel. Jika di dalam browser akan terlihat seperti pada gambar di bawah ini :

Tampilan Dalam Tabel

Dalam CSS kita dapat pula menampilkan data dalam bentuk tabel seperti yang di buat dengan html menggunakan property display css, seperti :

selector {display : table;}

Pada nilai inline-table tersebut akan mengatur data dalam sebuah tabel tanpa adanya line break sebelum dan sesudahnya.

Mungkin cara terbaik untuk memahami tabel yang berhubungan dengan nilai dari prperty display ini adalah dengan menggunakannya seperti tabel dalam Html. Tabel dalam CSS adalah display insial dan anda dapat menirukan elemen ter dan td dengan nilai dari baris tabel menggunakan table-roe dan cell table menggunakan table-cell secara terpisah. Penulissannya dalam CSS adalah:

selector {display : nilai table;}

Property display semakin baik dengan menawarkan nilai yang lebih lengkap untuk tabel berupa table-column, table-row-group, table-column-group, dan table-caption guna pengaturan data dalam sebuah tabel menggunakan css, di mana seluruh nilai tersebut cukup deskriptif untuk mewakili tampilan dari tabel dalam css.

Keunggulan dari nilai ini adalah bahwa anda dapat membuat tabel dengan kolom di bandingkan tabel yang di gunakan dalam html yang lebih condong pada metode menggunakan baris.

Catatan : Menggunakan sebuah tabel css dalam dokumen web yang anda buat dapat merusak tampilan dokumen web yang anda buat menggunkan html. Html biasanya di gunakan untuk menyampaikan pesan. Jadi, jika anda memiliki data-data yang tersusun dalam tabel, ada baiknya jika data tersebut di susun dalam tabel html.

Tipe-tipe display lainnya:

1.List-item	:	Untuk tampilan data daftar yang biasanya di gunakan seperti pada tag li dalam elemen html. Agar tipe ini bekerja dengan baik, elemen yang akan menggunakan tipe ini sebaiknya menggunakan elemen ul atau ol sehingga akan menampilkan berupa daftar
2.Run-in	:	Akan membuat sebuah elemen baik berupa in-line maupun block-line tergantung tipe ini adalah tidak dapata bekerja dalam browser Internet Explorer atau Mozilla
3.Compact	:	Sama dengan run-in, yaitu membuat elemen terlihat dalam bentuk inline atau block-line tergantung pada isinya. Namun tipe ini tidak dapat bekerja dengan baik pula dalam kedua browser di atas
4.Marker	:	Di gunakan bersama dengan pseudo element : before dan after untuk menentukan tampilan dari nilai property isi yang telah di tandai dengan tag ini. Jadi tipe ini hanya dapat berjalan dengan baik jika anda mengesampingkan nilai pseudo elemen property display sebelumnya.

Nah itulah pembahasan dari saya mengenai Display Dalam CSS, semoga artikel ini dapat membantu, ok saya pamit dulu sampai bertemu di artikel selanjutnya. Salam Sukai Penulis

Cara mengatur posisi Absolute dan Relative di CSS

CSS HTML JavaScript 0

Dalam membuat layout menggunakan CSS, anda dapat menentukan posisi sebuah elemen dengan menggunakan fungsi dari position. Adapun property position tersebut berupa absolute, relative, dan static atau fixed.

Nilai dari static merupakan nilai default dari seluruh elemen yang terlihat dalam html. Relative hampir seperti nilai static, tetapi elemen-eleemennya dapat di set dari posisi orsinil dengan menggunakan nilai top, right, bottom, dan left.

Property fixed pada absolute, tetapi secara teoeri elemen yang menggunakan property ini akan tetap berada pada posisi tersebut walau halaan tersebut kita scroll ke atas atau ke bawah. Namun property fixed ini walau terlihat bekerja lebih baik dalam browser seperti mozilla dan opera, tetapi tidak bekerja sama sekali pada internet explorer.

Penerapannya di dalam dokumen web anda di hitung dari posisi atau koordinat samping kiri atas (absolute) atau mengakalkulasikan dari posisi atau koordinat di mana elemen tersebut di masukan (relative).

Catatan : Sebelum ke kode script, alangkah baiknya anda tahu pengertiannya

Posisi Absolute

Jika anda menentukan posisi ke dalama posisi absolute maka akan di kalkulasikan dari sebelah ujung kiri atas halaman kecuali layer tersebut di definisikan di dalam layer yang lain, dimana dalam kasus ini akan dikalkulasikan dari sebelah ujung kiri atas dari layer utama.

<div style="position:absolute; top:10; left:60; font-family: verdana; font-size:35pt; color: green">

Posisi Relative

Jika anda menentukan pisisi menjadi rekative maka akan di posisikan relative ke dalam tag yang di usung dalam stylenya. Jika anda menambahkan sebuah layer dengan posisi relative di tengah halaman, posisi akan dikalkulasikan tepat dari tempat yang sama dalam tengah halaman di mana ia di tambahkan.

Ketika property position mengindikasikan sumber luar dari koordinat sistem, maka property left dan top akan menentukan posisi yang tetap pada layer, yaitu posisi sebelah kiri halaman (left) dan posisi sebelah kanan halaman (right).Anda dapat memasukan baik nilai positif maupun negatif untuk property tersebut.

Dengan demikian, sangat mungkin untuk menempatkan isi atau content menjadi lebih tinggi dan ke lebih ke kiri dalam halaman di bandingkan posisi logical dalam kode atau script yang di buat dengan menggunakan html di mana layer tersebut di definisikan. Jadi di bawah kode html, anda akan dapat memasukkan kode untuk layer yang di posisikan pada atas halaman yang di hasilkan.

Baik property left maupun tip dapat di ubah secara dinamis dengan menggunakan bahasa javascript. Ini artinya bahwa anda akan dapat menggerakan objek pada layer bahkan setelah halaman web tersebut selesai di load.

Kegunaan lain dari layer yang di buat dengan CSS adalah berupa menu yang keluar ketika mouse bergerak melewati sebuah link yang telah di berikan script ini.

Property "z-index", berfungsi untuk meletakkan "stacking order" dari layar-layar yang di letakan antara satu dengan yang lain. Nilai z-index yang tertinggi akan menekan elemen yang terendah dan nilai yang terendah akan secara pasti mengikuti aturan di atasnya.

Sebagai contoh, Sebuah permainan kartu di mana kita sebuah as sekop jika berada pada dasar maka dapat di katakan memiliki z-index:52;. Hebatnya lagi bahwa z-index ini dapat di buat menjadi lebih baik lagi menggunakan javascript, tetapi tentu saja kita juga harus menguasai bahasa ini.

Anda dapat membuat beberapa halaman di atas tiap halaman lainnya seleuruhnya dalam sebuah halaman. Ketika pengguna memilih sebuah link, maka akan secara otomatis memindahkan layer dengan info yang kita inginkan di atasnya dari pada membuka sebuah halaman baru.

Tekhnik membuat efek seperti saat ini banyak mengacau pada DHTML (Dinamic HTML atau gabungan antara javascript dan CSS) yang lebih mengarah pada tujuan tersebut.

Salah satu penggunaan properti "z-index" adalah untuk menciptakan bayangan (drop shadow). Contoh berikut adalah penerapan z-index untuk membuat bayangan :

<html>
<head>
<title> Membuat Bayangan<title>
<style>
.posisi1 {position:relative; top:15; left:25; z-index:10; color:#00000; font-family: arial; font-size:25pt;}
.posisi2 {position:relative; top:-22; left:28; z-index:6; color:#00ccff; font-family: arial; font-size:25pt;}
.posisi3 {position:relative; top:-59; left:29; z-index:6; color:#ff00ff; font-family: arial; font-size:25pt;}
</syle>
</head>
<body>
<div class="posisi1">Bayangan dengan Layer </div>
<div class="posisi2">Bayangan dengan Layer </div>
<div class="posisi3">Bayangan dengan Layer </div>
</body>
</html>

Dalam browser akan terlihat seperti gambar di bawah ini:

Property terkahir adalah visibility property yang memungkinkan anda membuat layer yang tidak terlihat untuk menambahkan berbagai bentuk pop up menu dan berbagai efek lain dalam halaman anda. Nilai dari peroperty ini adalah "visible" untuk memperlihatkan layer dan "hidden" untuk menyembunyikan layer.

Dengan dynamic html akan memudahkan anda mengbah penampakan dari layer menurut masing-masing event. Kegunaan yang paling umum adalah dalam membuat menu yang dapat keluar (pop up), seperti menu statt dalam windwos di mana sub-menu-sub-menu yang akan keluar (pop up) tersebut harus di buat sebagai layer yang tidak terlihat (invisble layer).

Kemudian, sebuah mouse melintas di atas sebuah link maka layer yang kita tentukan akan terlihat. Namun browser netscape agaknya kurang mendukung teknologi css ini. Berikut adalah contoh pembuatan dokumen dengan properti "visibility", yang menerima nilai "visible" dan "hidden".

<html>
<head>
<title>Property visibility</title>
</head>
<div style="position: absoulte; top:10; left:50; font-family:verdana; font-size:30pt; color:green; font-variant:small-caps;">
Contoh Properti Visibility :</div>
<div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:hidden;">
1. Teks ini tidak terlihat karena visibility : hidden
</div>
<div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:visible;">
2. Teks ini telihat karena visibility : visible
</div>
</body>
</html>

Dalam browser akan terlihat seperti gambar di bawah ini:

Selain properti di atas, ada lagui yang namanya float. seperti artinya yaitu mengapung, maka elemen yang akan di buat ke kanan atau ke kiri dari sebuah garis dengan isi yang melingkupnya. Floating di gunakan untuk memosisikan elemen yang lebih keci dalam sebuah halaman, contoh script di bawah:

#navigasi {float: left; width:10px;}

#navigasi {float: right; width:10px;}

#isi {margin:0 10px;}

Jika anda tidak menginginkan elemen berikutnya elemen berikutnya mengelilingi objek yang di floating. Anda dapat menerapkan propery clear.

Clear: left (akan menghilangkan elemen float kiri)
Clear: Right (akan menghilangkan elemen float kanan)
Clear: Both (akan menghilangkan elemen float kiri dan kanan).

Sebagai contoh, jika anda membuat sebuah footer dalam halaman, anda dapat menambahkan sebuah id footer dan membahkan :

#footer {clear: both;)

contoh:

<html>
<head>
<title>Belajar float</title>
<style>
#navigasi {float: left; width:10px;}
#navigasi2 {float: right; width:50px;}
#footer {clear:both;}
</style>
</head>
<body>
<div id=navigasi> float kiri</div>
<div id=navigasi2> float kanan</div>
<div id=footer> clear float</div>
</body>
</html>

Jika di lihat di dalam browser akan terlihat seperti gambar di bawah ini:

Cukup sekian pembahasan kali ini, terimakasih sudah mau membaca artikel ini, sampai jumpa dan salam Sukai Penulis

Apa itu layout di CSS?

CSS HTML Pemula 0

Pada kesempatan kali ini saya akan menjelaskan apa itu layout, bagaimana cara mengatur margin yang kita inginkan, border dan padding. Baiklah tanpa basa-basi yang panjang mari kita simak di bawah ini :

Baca juga : Apa itu Shorthand dalam CSS ?

Layout Dalam CSS

Layout dalam CSS itu adalah tata letak untuk mengatur tampilan seperti inginkan, contoh tata letak seperti halaman-halaman web, dan sebagainya. Dalam CSS, kita harus mengenal adanya properti-properti yang di gunakan mengeset layout dokumen web dengan menggunakan CSS.

Salah satunya adalah yang di kenal dengan properti yang saya sebutkan yaitu margin dan padding. Margin dan paddding dalam web yang di buat menggunakan tekhnologi CSS biasanya di gunakan untuk memformat tampilan layout situs.

Model format dengan style CSS dapat di artikan bahwa tiap-tiap elemen akan di kelilingi oleh tiga area yang berbeda. Area itu yang sering disebut adalah padding, borde, dan margin. Masing-masing entitas tersebut dapat di atur melalui property CSS yang menginjinkan para developer untuk secara singkat mengatur tampilan dan posisi dari setiap elemen HTML yang di buatnya.

Margin Dalam CSS

Margin adalah pemberian jarak atau batas pada suatu objek dengan objek yang berbeda di luar. Adapun nilai margin (garis tepi atau daerah pinggir) halaman web dapat kita atur besar dan letaknya melalui properti dari margin seperti "margin-top", "margin-bottom", "margin-right", dan "margin-left". Contoh penggunaan margin dalam mengeset dokumen web adalah sebagai berikut:

<html>
<head>
<title>Mengatur margin</title>
<style type="text/css">
body {margin-top:30; margin-bottom:30; margin-right:40; margin-left:40;}
</style>
</head>
<body>Bagaimana mengatur margin? <br>
Dengan menggunakan property margin
</body>
</html>

Anda dapat merubah niali sesuka hati anda yang berwarna hijau untuk mengatur tata letaknya. Jika di lihat atau di eksekusi di dalam browser maka akan terlihat seperti pada contoh gambar di bawah ini :

Dalam contoh di atas dapat di ketahui bahwa dokumen tersebut akan memiliki lebar margin atau garis tepi atas sepanjang 30 piksel, lebar garis tepi bawah sepanjang 39 piksel, garis tepi kanan 40 piksel, dan garis tepi kiri sepanjang 40 piksel.

Anda juga dapat memanfaatkan seluruh properti dengan menggunakan shorthand property, yaitu cara penulisan dengan menulis hanya velue-nya saja seperti di bawah ini :

<style="text/css">

body {margin: 30px 30px 40px 40px}

</style>

Border dalam CSS

Dalam CSS, anda dapat menyesuaikan lebar border dengan menggunakan property "border-top-width","border-left-width", "border-right-width" dan "border-bottom-width, anda dapat menentukan nilainya dengan menata suatu border dengan shortcut property "border-width". Contoh seperti di bawah ini:

<html>
<head>
<title> Mengatur Border </title>
<style type="text/css">
body {border-top-width: 30px; border-right-width: 30px; border-bottom-width: 40px; border-left-width: 40px;}
</style>
</head>
<body>
Bagaimana mengatur border?<br>
Dengan menggunakan property border
<body>
</html>

Dalam contoh script di atas, halaman web yang di buat akan menggunakan lebar border atas sebesar 30 pixel, lebar border kanan sebesar 30piksel, lebar border bawah sebesar 40 piksel, dan lebar border kiri sebesar 40 piksel. Anda dapat pula menentukan lebar keseluruhan border menggunakan script seperti :

body {border-width: 30px;}

anda dapat pula menentukan lebar border dengan kata bantu "thick","medium","thin", dan "none" seperti di bawah ini :

body {border-top-width: thick; border-right-width: medium; border-bottom-width: thin; border-left-width: none;}

atau, tentukan lebar keseluruhan border dengan menggunakan salah satu kata bantu yang ada, seperti contoh di bawah ini:

body {border-width: thick;}

Dalam CSS kita juga dapat mengatur warna border halaman web yang di buat dengan menggunakan property "border-color". Seperti terlihat dalam contoh berikut:

<html>
<head>
<title> Warna Border </title>
<style type="text/css">
body {border-color: green; border-width: 50px; background: lime;}
</style>
</head>
<body>
Bagaimana mengatur warna border?<br>
Dengan menggunakan Property border-color
</body>
</html>

Dalam contoh di atas, warna border akaan menjadi kuning dengan ketebalan border keseluruhan sebesar 10 piksel dan warna background lime. Sayangnya, property ini tidak di dukung dalam browser netscape, Namun jika anda menggunakan borwser internet explorer, akan terlihat berbeda cobalah lihat sendiri untuk hasilnya.

Padding Dalam CSS

Padding adalah pemberian jarak atau batas antara suatu objek dengan objek-objek yang berada di dalam objek tersebut. Padding dalam CSS dapat di atur menggunakan property pengaturan padding seperti padding-top padding-bottom padding-right, dan padding left perhatikan contoh script di bawah ini :

<html>
<head>
<title> Mengatur Padding </title>
<style type="text/css">
body {border-color: green; border-width: 50px; background: lime; padding-bottom: 30px; padding-top: 30px; padding-right: 40px; padding-left: 40px;}
</style>
</head>
<body>
Bagaimana mengatur padding? <br>
Dengan menggunakan property padding
</body>
</html>

Catatan: Untuk mengeksekusi di sarankan mengguakan browser firefox dan lihatlah hasilnya sendiri

Ok sampai di sini dulu untuk penjelasan mengenai layout, mudah-mudahan artikel ini dapat membantu anda semua. Salam Sukai Penulis

Apa itu Shorthand dalam CSS ?

CSS HTML 0

Saya yakin shorthand sudah tidak asing lagi bagi para programer, tapi yang sudah tahu biarkan saya menjelaskan apa yang di maksud dengan shorthand dan bagaimana penjelasannya. Baiklah saya tidak akan basa basi lagi silahkan simak di bawah ini.

Apa itu Shorthand ?

Sfesifikasi dalam CSS, di mana kita harus mengetikkan aturan-aturan css ke dalam style kadang membuat kita merasa jemu jika harus menuliskan seluruh aturan-aturan yang panjang tersebut untuk menyetting hanya sebuah area kecil saja dalam dokumen web yang di buat.

Namun jika anda menggunakan tekhnik shorthand css, akan memungkinkan anda untuk membuat berbagai style menggunakan sintaks yang lebih singkat yang di kenal dengan shorthand CSS atau shorthand Notation.

Shorthand CSS memungkinkan anda untuk menentukan nilai beberapa property sekaligus dengan menggunakan sebuah property tag, misalnya pada penggunaan property font yang memungkinkan anda untuk menentukan property font-style, font-variant, font weight, font-size, line-height, dan font-family dalam sebuah baris sintaks. Contoh:

<html>
<title>Menggunakan shorthand CSS</title>
<head>
<style>
H1 {
font-weight :bold;
font-size:16pt;
line-height:18pt;
font-family: Arial;
font-variant: normal;
font-stretch: normal;
font-size-adjust: none; }
</style>
</head>
<body>
<h1> Huruf ini akan tebal dengan jenis huruf arial sebesar 16 point </h1>
</body>
</html>

Jika di tulis dalam shorthand CSS, tag di atas akan terlihat seperti :

h1 {font:bold 16pt/18pt arial}

Sebagai perbandingan, tag H1 di bawah ini menggunakan sintaks longhand CSS.

Catatan: property font-variant, font-stretch, font-size-adjust, dam font-style telah di buat ke dalam nilai default

Tampilan script di atas jika di eksekusi maka tampilannya akan seperti di bawah ini.

Menggunakan Shorthand CSS memungkinkan anda untuk menempatkan hanya beberapa nilai saja dari property yang anda inginkan dalam sebuah style. Penempatan property dalam dokumen web di wakili oleh niali yang di pisahkan dengan spasi.

Sebagai contoh, dalam menyingkat penulisan pembuatan layout seperti margin, padding, dan border-width dengan shorthand css, anda dapat menjadikannya ke dalam margin-top-width, margin-right-width, margin-buttom-width, dan lain sebagainya dalam susunan property seperti top, right, bottom, dan left. Perhatikan contoh di bawah ini:

p {border-top-width: 1px; border-right-widht: 5px; border-bottom-width: 10px; border-left-width: 20px;}

Penulisan dapat di buat menjadi lebih singkat dengan menggunakan shorthand notation sehingga akan menjadi seperti di bawah ini:

p {border:1px red solid;}

Cara ini dapat juga di aplikasikan untuk border-top, border-right, dan sebagainya dengan hanya menetapkan dua nilai (seperti margin: 1em 10em;), di mana nilai pertama akan menjadi nilai untuk posisi atas dan posisi bawah, kemudian nilai kedua akan menjadi nilai dari posisi kiri dan kanan.

Property yang berhubungan dengan font juga dapat di jadikan satu dengan menggunakan property font seperti dalam contoh berikut, di mana nilai '/15' mengacu pada nilai untuk line height:

p {font: italic bold 1em/1.5 courier;)

Jika di terapkan dalam dokumen html maka akan menjadi seperti di contoh di bawah ini:

<html>
<title> Menggunakan shorthand CSS</title>
<head>
<style>
body {border: 1px, red, solid;}
p {font: italic bold 1em /1.5 courier;}
H1 {font: bold 16pt /18pt Arial;}
</style>
</head>
<body>
<p> Huruf ini akan tebal dan miring dengan line height 1,5 </p>
<h1> Huruf ini akan tebal dan jenis huruf arial sebsar 16 point </h1>
</body>
</html>

Ketika di tulis menggunakan shorthand notation, nilai lain akan di abaikan secara otomatis dan menetapkan nilai default untuk nilai yang di abaikan tersebut. Jika anda memiliki style yang di tentukan lebih dari satu lokasi, sebaiknya berhati-hati jika anda mengabaikan property tersebut karena jika terdapat aturan CSS yang berlawanan maka akan dapat mengakibatkan adanya property yang bertumbuk sehingga akan merusak tampilan yang di buat.

Sebagi contoh adalah style CSS yang akan di ikutkan dalam halaman HTML dan style yang di impor dari external style sheet menggunakan sintaks CSS shorthand dan longhand.

Jika anda menggunakan program HTML editor yang bersifat visual seperti Macromedia Dreamweaver maka style CSS yang di buat akan menggunakan longhand CSS, Longhan CSS yaitu menuliskan secara penuh atribut dan property CSS secara lengkap tanpa penyingkatan seperti pada shorthand css.

Jadi ada baiknya jika anda saat ini membuat style CSS menggunakan notepad dan nantinya akan di olah lebih lanjut menggunakan program Micromedia Dreamweaver tersebut agar membuat style CSS menggunakan longhand CSS, yaitu menuliskan aturan-aturan yang di buat dalam CSS tanpa penyingkatan.

Tampilan script di atas akan seperti ini bila di eksekusi di internet exproler, mozila fire fox maupun di browser lainnya.

Nah itulah pembahasan kali ini mengenai Shorthand dalam CSS, semoga adanya artikel ini bisa bermanfaat untuk kita semua. Salam Sukai Penulis

Pengelompokan Dan Nesting Dalam CSS Dalam HTML

CSS HTML PHP 0

Pembahasan kali ini adalah pengelompokan dan nesting dalam CSS, berikut penjelasannya dan pembahasannya, semoga anda dapat memahami apa yang kami sampaikan di bawah ini, baiklah simak penjelasannya.

Pengelompokan Dan Nesting dalam CSS

Dalam dookumen web yang di buat menggunakan syle kita dapat memformat berbagai aturan yang di buatnya menjadi makin ramping sesuai dengan keinginan kita. Adapun format untuk style CSS tersebut berupa :

1. Pengelompokan atau Grouping

Dalam Css kita mengenal adanya pengelompokan atau grouping, pengelompokan di sini berfungsi untuk mengelompokan berbagai selector ID atau Class yang memiliki nilai property yang sama. Anda dapat memberikan propety yang sama tersebut ke dalam sejumlah selector tanpa harus mengulang penulisannya dengan membagi selector-selector tersebut dengan koma (,).

Pengelompokan dalam CSS berfungsi untuk menyingkat berbagai penulisan dari aturan-aturan yang menyingkat berbagai penulisan dari aturan-aturan yang banyak hingga membentuk aturan baru yang jauh lebih singkat. Berikut ini adalah contoh mengelompokan tag yang memiliki nilai yang sama :

<style type="text/css">
p {background-color:yelow;}
b {background-color:yelow;}
i {background-color:yelow;}
</style>

Dengan demikian, dalam pengelompokan menggunakan CSS penulisannya dapat di ringkas menjadi :

<html>
<head>
<title>Pengelompokan tag</title>
<style type="text/css">
p, b, i {background-color: yelow;}
</style>
</head>
<body>
<p> pengelompokan dengan tag p</p>
<b> pengelompokan dengan tag b</b>
<i> pengelompokan dengan tag i</i>
</body></html>

Maksud aturan di atas adalah CSS akan memberikan nilai p yang di dalam dokumen HTML seharusnya adalah format untuk membuat paragraf, namun juga memiliki nilai warna background-biru yang sama dengan tag b (bold atau tebal) dan i (italic atau miring) seperti terlihat browser Netscape berikut :

Bila kita menerapkan pengelompokan tersebut dalam selector class, ID dan tag scriptnya akan seperti berikut ini :

<style type="text/css">
p {font-family: Arial, Verdana;}
.teks1 {font-family: Arial, Verdana;}
#teks2 {font-family: Arial, Verdana;}
</style>

Dengan demikian, dalam pengelompokan dengan CSS, penulisannya akan menjadi seperti script di bawah ini :

<html>
<head>
<title>pengelompokan tag </title>
<style>
.teks, .title, #teks2 {font-family:verdana; background-color:yellow;}
</style>
</head>
<body>
<span class="teks">pengelompokan dengan tag p </span><br>
<span class="title">pengelompokan dengan class teks1</span><hr>
<div id="teks2">pengelompokan dengan class teks2</div>
</body>
</html>

Penampakannya akan terlihat seperti di bawah ini :

2. Nesting

CSS memiliki struktur bahasa yang baik sehingga dapat di manfaatkan untuk menyingkat style CSS agar lebih efisien dalam dokumen web yang di buat menggunakan CSS. Anda tidak membutuhkan class atau ID selector yang terlalu banyak untuk membuat sebuah dokumen web dengan bantuan CSS karena anda dapat menentukan property dari selector untuk di tempatkan dalam selector lain.

Contoh :
#atas {background-color: #ccc; padding: 2em}
#atas h1 {color: #ff0;}
#atas p {color: red; font-weight: bold;}

Dengan menghilangkan kebutuhan akan class atau ID yang cukup banyak tersebut, anda dapat menyingkatnya dengan menggunakan cara nesting sehingga dalam penulisaanya akan menjadi lebih singkat seperti berikut :

<div id="atas">
<h1> menyingkat CSS dengan nestingM</h1>
<p> penyingkatan ini menggunakan cara nesting </p>
<p> mudah sekali ya .. </p>
</div>

Dengan cara ini, memisahkan selector dengan spasi dapat berarti bahwa h1 berada dalam ID atas, yang memiliki nilai warna latar #ccc dan warna isi #ff0 dalam h1, serta penambahan tag p dalam ID atas yang berarti merah dan tebal.

Cara ini dapat di terapkan lebih dari dua tingkatan seperti di dalam dan di dalamnya ID atau class tertentu yang anda inginkan hingga di akhiri dengan penutup </div> seperti contoh di atas.Adapun script keseluruhan jika anda menggunakan nesting dalam HTML bisa anda lihat di bawah ini :

<html>
<title>Nesting</title>
<head>
<style>
#atas {background-color: #ccc; padding:2em}
#atas h1 {color: #ff0;}
#atas p {color: red: font-weight: bold;}
</style>
</head>
<body>
<div id="atas">
<h1> menyingkat CSS dengan nesting </h1>
<p> penyingkatan ini menggunakan cara nesting</p>
<p> mudah sekali ya..</p>
<div>
</body?
</html>

Contoh Script yang di atas bila di eksekusi akan seperti di bawah ini :

Nah itu lah pembahasan mengenai pengelopokan dan nesting dalam css, semoga artikel ini dapat membantu anda dan bermafaat khusunya bagi yang membaca dan juga untuk penulis, sampai di sini pembahasannya, Salam Sukai Penuli

Inheritance, Pseudo Classes, Pseudo Element dan Selektor Kontekstual

CSS HTML PHP 0

Jika di artikel sebelumnya membahas Selector. Class Selector, dan ID selector, nah kali ini saya akan memenuhi janji yang membahas tentang Inheritance, Pseudo Classes, Pseudo Element, dan Selektor Kontekstual, Untuk penjelasan yang lebih lengkap anda bisa membaca artikel ini sampai akhir.

Pewarisan atau Inheratance

Yang di maksud dengan pewaris atau inheratance di sini adalah satu kondisidi mana bagian-baian HTML dalam dokumen kita yang kekurangan dalam spesifikasi aturan CSS dapat mengikuti atau di buat menurut aturan CSS yang menutupinya.

Setiap aturan yang tidak ada dalam format yang di buat dengan HTML atau ingin menggantikannya dengan aturan CSS, tetap akan memengaruhi huruf yang ada di dalam kurungan CSS. Di bawah ini adalah contoh kode script inheritance:

<html>
<head>
<title> Inheritance </title>
<style type="text/css">
B {background-color : green; color : white;}
</style>
</head>
<body>
<B>
Belajar membuat web dengan<font size="1"><em>CSS</em></font> Sangatlah mudah.
<br>
Hanya dengan program notepad pun jadi
</B>
</body>
</html>

Jika di lihat dari contoh di atas dapat di lihat bahwa tag <B> dalam aturan CSS akan mendefinisikan warna font dan warna latar dari font sedangkan tag <B> dalam HTML bisa di artikan sebagai bold atau format untuk menebalkan huruf.

Sementara tag <font> yang berada dalam lingkup CSS dapat menerapkan aturan HTML dasar akan tetapi teteap terpengaruh dengan kondisi warna dan tebalnya huruf dari aturan CSS yang melingkupinya. Cara ini dapat anda gunakan untuk di kombinasikan lebih lanjut dengan tag-tag lain agar sesuai dengan keperluan dokumen anda.

Berikut adalah penampakan dari kode script di atas :

Pseudo Classes

Pseudo Classes dalam CSS di buta tebal dalam selector-selector untuk menentukan sebuah statemen atau relasi selector penulisannya pun hanya di pisahkan dengan sebuah tanda titik dua, yaitu di antara selector dan pseudo dan class.

Adapun contoh format penulisaanya adan bisa lihat di bawah ini

selector:pseudo class {property :value; }

Banyak format css yang tidak di dukung oleh kebanyakan browser, tetapi terdapat 4 (empat) pseudo classes yang dapat di gunakan secara aman ketika di aplikasikan ke dalam hyperlink atau link, inilah di antaranya ke 4 (empat) pseudo classes itu :

Link	:	Untuk tampilan sebuah link yang belum di kunjungi
Visited	:	Untuk tampilan sebuah link ke halaman yang telah di kunjungi
Acrive	:	Untuk tampilan sebuah link yang sedang aktif (ketika di klik)
hover	:	Untuk tampilan sebuah link yang hover (ketika cursor melintas di atasnya

Contoh penggunaan :

a.snowman:link {color:blue;}
a.budi.visited {color:puple;}
a.budi.active {color:puple;}
a.budi.hover {text-decoration:none; color : blue; background-color:yellow;}

Anda dapat menggunakan hover pseudo class dengan elemen-elemen lain selain link. Sayangnya, Internet Explorer masih tidak mendukung metode ini karena banyak tampilan yang dapat anda buat dan terlihat bagus dalam browser lain, tetapi tidak terlihat dengan menggunakan browser ini.

Pseudo Element

Pseudo Element dalam CSS di tempatkan dalam sebuah selector sama seperti pada pseudo classes. Penulisannya akan seperti contoh berikut di bawah ini :

selector:pseudoelement {property:nilai;}

Contoh seting huruf dan baris pertama:

Pseudo element pada huruf pertama di aplikasikan elemen dari huruf pertama dan baris pertama pada atas baris sebuah elemen. Anda dapata membuat huruf besar dan huruf tebal baris pertama pada paragraf dengan menggunakan perintah berikut di bawah ini :

p:first-letter {font-size:5px; float:left;}

p:first-line {font-weight:bold;}

Before And After dalam Pseudo Element

Pseudo Element before dan after di gunakan dengan property content untuk menempatkan isi dari sebuah elemen tanpa menyentuh kode HTML. Nilai dari property content ini dapat berupa open-quote, close-quote, no-open-quote, no-close-quote, berbagai string yang di sertakan dalam tanda kutip, atau berbagai image gambar menggunakan url (Nama Image) seperti contoh di bawah ini :

blockquote:before {content: open-quote;}

blockquote:after {content: close-quote;}

li:before {content: "POW: "}

p:before {content: url(images/jam.jpg)}

Selecktor Kontekstual (Contextual Selector)

Selektor kontekstual dalam CSS hampir sama dengan pernyataan-pernyataan kondisional di mana deklarasi dalam style-sheet CSS yang ada akan berpengaruh jika menemui kondisi atau keadaan tertntu. Contoh dari slector kontekstual adalah sebagai berikut :

<html>
<head>
<title> Selecktor Kontekstual </title>
<style type="text/css">
b em {font-family: verdana; background: blue; color : white;}
</style>
</head>
<body>
<b>
Belajar membuat web dengan <em>CSS</em> Sangatlah mudah.
<br></b>
<em>Hanya dengan program notepad pun jadi
</em>
</body>
</html>

Dalam contoh di atas dapat di lihat bahwa dokumen web tersebut akan menerapkan style CSS tersebut pada dokumen yang berada dalam tag <em> (font verdana, warna lata biru dan font berwarna putih) di mana tag <em> tersebut berada di dalam tag <b> dan </b> (bold atau tebal).

Sementara tag <em> yang berada di style tersebut atau hanya memiliki nilai <em> biasa atau huruf miring. Jika di lihat dalam browser maka penampakannya adalah seperti gambar di bawah ini berikut:

Nah itu lah penjelasan mengenai Inheritance, kemudian Pseudo Classes, kemudian Pseudo elent, dan terakhir adalah Selektpr Kontekstual, semoga penjelasan di atas bisa mudah di pahami, okeh sampai di sini dulu perjumpaan kita. Sampai jumpa salam Sukai Penulis

Selector di dalam CSS (Class, dan ID Selector) Lengkap!!!

CSS PHP 0

Untuk memahami apa itu selector sebaiknya anda memahami terlebih dahulu apa itu Struktur CSS, agar anda tidak bingung untuk membaca artikel yang satu ini, saya sudah siapkan linknya anda tinggal klik saja di bawah ini maka anda akan di alihkan ke halaman sebelumnya.

Baca juga : Keuuntungan Menggunakan CSS Dan Struktur CSS

Sekarang di artikel ini ingin menjelaskan seperti apa itu selector di dalam CSS, mungkin untuk pemula tidak tahu apa itu selector, dan apa tujuannya, baiklah mari kita lihat di bawah ini semoga dapat memuaskan anda untuk yang membacanya.

Selector Dalam CSS

Jika dalam HTML kita mengenal adanya tag-tag yang menyusun sebuah dokumen HTML, maka dalam CSS kita juga mengenal dengan sebutan selector.

Selector adalah nama-nama yang di berikan untuk style-style yang berbeda baik itu style internal maupun eksternal. Dalam style tujuan, anda harus menentukan bagaimana selector seharusnya bekerja yang dinamakan properties di dalam tanda { } atau curly bracket yang dapat memiliki nilai berupa font, warna dan lain-lain.

Selanjutnya dalam body di halaman web anda, arahkan ke selector-selector ini untuk mengaktifkan style tersebut.

Karena CSS memiliki atruan tersendiri dalam penulisan sintaksnya, penulisan sintaks tersebut terbagi ke dalam tiga bagian, yaitu selector, property, dan value. Untuk lebih jelasnya lihat kode script di bawah ini :

selector {property: value;}

Selector dalam CSS adalah elemen adalah elemen yang akan di definisikan dalam style CSS, sedangkan elemen ini berupa tag HTML ataupun class. Sementara property dalam CSS adalah atribut yang berfungsi untuk mendifinisikan selector, sedangkan value adalah nilai atau harga dari sebuah property.

Contoh:

<html>
<head>
<style type="text/css">
B.besar {color:read; font-size:15px; font-family:arial;}
</style>
</head>
<body>
<b> ini adalah huruf besar dengan HTML</b><br>
<b class="besar"> ini adalah huruf besar dengan CSS</b>
</body>
</html>

Dalam kasus ini, B.besar adalah selector, Contoh di atas akan menghasilkan tampilan seperti:

Class Selector

Class selector di gunakan untuk menentukan style yang dapat di gunakan tanpa menentukan lagi tag HTML sederhana. Penulisan class adalah dengan menggunakan tanda titik atau sering di sebut dot (.). Selain aturan penulisan di atas, CSS mengenal Class selector di mana dalam elemen yang sama, anda dapat menerapkan lebih dari satu style.

Contoh:

<html>
<head>
<title> Class Selector </title>
<style type="text/css">
<!--
f.times {font-family:times;}
f.verdana {font-family:verdana;}
.courier {font-family: "courier";}
-->
</style>
</head>
<body>
<f class="times"> Ini adalah contoh pengunaan class sebagai selector, setiap huruf memiliki huruf times new roman </f><br>
<f class="verdana"> Ini adalah contoh pengunaan class sebagai selector, setiap huruf memiliki huruf verdana </f><br>
<f class="courier"> Ini adalah contoh pengunaan class sebagai selector, setiap huruf memiliki huruf courier </f><br>
</body>
</html>

Tampilan kode sript di atas akan seperti gambar di bawah ini :

Pada contoh di atas, tag f memiliki 2 class berbeda untuk memformat paragraf, yaitu. times dan .verdana di karenakan tag clas .times dan .verdana adalah class yang memiliki oleh tag f maka ia hanya dapat di kenakan pada elemen f saja.

Lain halnya dengan class .courier, ia dapat di pergunakan oleh semua elemen tanpa harus menggunakan tag f di awal dan akhir elemen yang akan di format.

Nama untuk setiap class dapat berbeda-beda. Anda di bebaskan menentukan nama class sendiri, tetapi ada baiknya memilih nama dari tiap class yang mengacu kepada fungsi dari clas tersebut. Hal ini bertujuan agar anda tidak bingung menggunakan class pada saat menggabungkannya ke dalam tag HTML.

Contoh :

<p class="blog"> ini teks untuk paragraf pada blog </p>
<p class="menukiri"> ini teks untuk paragraf pada menu kiri </p>

ID Selector

ID selector di gunakan untuk menentukan style yang berhubungan dengan objek-objek dengan sebuah ID yang unik. Berbeda dengan class selector yang dapat kita pergunakan pada berbagai tag, ID selector ini memiliki sifat-sifat yang berbeda.

ID selector hanya dapat di pergunakan pada satu elemen saja pada setiap halaman yang kita buat. ID selector mneggunakan tag kres (#) sebelum menggunakan nama selector. Di bawah ini adalah contoh ID Selector :

#helvitica {font-family: Helvetica;}

Dalam penerapan pada tag html, anda dapat menggunakan atribut atau span atau pun div, seperti conotoh di bawah ini:

<span id="helvetica"> Ini adalah huruf helvetica</span>
<div id="helvetica"> Ini adalah huruf helvetica </div>

Contoh penulisan dokumen dapat di tuliskan pada contoh kode script di bawah ini:

<html>
<head>
<title> ID Selector </title>
<style type="text/css">
<!--
#times {font-family: times;}
#verdana {font-family: verdana;}
#courier {font-family: "courier";}
-->
</style>
</head>
</html>
<body>
<div id="times"> Ini adalah contoh penggunaan id sebagai selector, setiap huruf memiliki huruf times new rowman </div><br>
<div id="verdana"> Ini adalah contoh penggunaan id sebagai selector, setiap huruf memiliki huruf verdana </div><br>
<div id="courier"> Ini adalah contoh penggunaan id sebagai selector, setiap huruf memiliki huruf courier </div><br>
</body>
</html>

Tampilan kode sript di atas akan seperti gambar di bawah ini:

Selain yang di jelaskan di atas, dalam css kita juga akan mengenal atau berhadapan dengan adanya pewarisan (Inheritance), Pseudo Classes, Pseudo-element, dan Selectors-Kontekstual (Contextual Selector), Tapi nanti di artikel selanjutnya. hihi :p

Baca juga : Inheritance,Pseudo Classes, Pseudo-element, dan Selector-Kontekstual

Saya rasa cukup untuk penjelasan mengenai selector di dalam css (class, dan id), terimakasih telah membaca artikel ini semoga bermanfaat, saya pamit, sampai jumpa. Salam Sukai Penulis

Apa Keuntungan Menggunakan CSS ?

CSS PHP 0

Tahukah anda keuntungan menggunakan css ini.? Ku yakin pasti orang-orang sudah pada tahu, tapi tidak salahnya juga saya menuliskan artikel mengenai hal ini, berbeda pendapat itu adalah hal wajar, hal ini adalah pendapat saya mengenai keuntungan menggunakan CSS, jika ingin tahu maka simak artikel di bawah ini.

Catatan : Telitilah saat membaca

Apa keuntungan CSS?

CSS memungkinkan anda dapat memisahkan layout (Tampilan) dari isi dokumen, CSS ini juga memungkinkan anda dapat menentukan layout (Tampilan) yang lebih ampuh di bandingkan dengan HTML. Di bawah ini ada beberapa keuntungan menggunakn CSS yang bisa anda lakukan saat menggunakan CSS :

Menentukan tampilan dari halaman-halaman web dalam sebuah tempat tanpa mengulangnya kembali melalui script (kode) HTML anda. Hal Ini akan lebih efisien di bandingkan menentukan warna dan font tiap kali anda memulai sebuah cell baru dalam sebuah tabel.
Dengan mudah mengubah tampilan dari halaman-halaman web walaupun setelah halaman tersebut di buat. Setelah style di tentukan dalam sebuah tempat, anda dapat mengubah tampilan keseluruhan situs sekaligus tanpa harus mengganti tag-tag tertentu ketika mengubah salah satu tampilan dari elemen halaman anda.
Menentukan ukuran font dan atribut-atribut yang sejenis dengan keakuratan yang sama dengan sebuah "word processor" dan tidak dibatasi hanya untuk tujuh ukuran font berbeda yang telah di tetapkan dalam HTML.
Menentukan isi hingga ukuran piksel dari tiap halaman web dengan akurat
Menentukan kembali keseluruhan tag-tag HTML. Sebagai contoh, anda dapat dengan mudah membuat tabel tag menjadi berwarna merah menggunakan font yang spesial

Style tersebut di hubungkan untuk memformat tampilan dalam dokumen HTML tersebut.

Dalam mengimpor file CSS, anda dapat langsung mengimpor beberapa file CSS, sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen seperti terlihat pada contoh kode di bawah ini:

<link rel="stylesheet" type="text/css" href ="default1.css"
<link rel="stylesheet" type="text/css" href ="default2.css"
<link rel="stylesheet" type="text/css" href ="default3.css"
<style>
<!--
@import url(default1.css)
@import url(default2.css)
@import url(default3.css)
-->
</style>

Perbedaan dalam terakhir adalah perintah impor tersebut akan mengambil style CSS dengan cara import style dari alamat url yang anda tentukan. Cara ini lebih efisien karena dokumen yang kita beri perintah impor tersebut hanya akan mengimpor file CSS yang pada akhirnya style CSS tersebut eksternal yang terpisah dengan dokumen HTML asli.

Ketika surfing ke dalam situs anda maka CSS akan di sembunyikan dalam komputer pengguna sehingga akan memperkecil ukuran file sebuah situs yang kita buat. Jadi jika anda menggunakan cara terkahir ini, maka sebelumnya anda harus membuat sebuah dokumen style CSS eksternal tersebut dengan eksternal (.css) di mana dokumen style tersebut berisi aturan yang akan mengatur tampilan dokumen web yang di buat.

Struktur CSS

Dalam pembuatan dokumen web menggunakan style CSS di kenal adanya aturan atau struktur penulisan buku agar style CSS yang anda buat tersebut dapat di tampilkan dengan baik dalam dokumen web yang di buat. Perhatikan Contoh kode script di bawah ini:

<html>
<head>
<title> HTML Selector </title>
<style type="text/css">
<!--
p {font-family: verdana;}
-->
</style>
</head>
<body>
<p> penggunaan HTML Selector dalam CSS</p>
</body>
</html>

Pada contoh di atas di gunakan tag HTML <p> sebagai selector dan setiap huruf yang berada di antara tag </p> akan memiliki jenis font verdana sesuai dengan value atau nilai yang di berikan pada property style tersebut. Seperti terlihat dalam gambar di bawah ini:

Untuk penjelasan mengenai apa keuntungan menggunakan CSS hanya itu saja yang bisa saya sampaikan, dengan adanya artikel ini semoga membantu dan bermanfaat, sampai jumpa di Artikel lain, dan terimakasih sudah berkunjung di artikel saya. Salam Sukai Penulis

Apa itu Css? Bagaimana cara kerjanya?

CSS PHP 0

Saya yakin pasti para master sudah tidak asing lagi dengan CSS alat pembantu html, tapi saya hanya ingin berbagi saja dengan pengalaman saya saat di sekolah dan ini adalah salah satunya, ilmu itu tidak ada yang sia-sia jika kita mengamalkannya betul tidak? kurasa betul karena saya yang mengatakannya. hehe :D Baiklah silahkan baca-baca ke bawah dengan teliti.

Apa itu CSS?

CSS (Cascoding Style Sheets) adalah sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman web yang di buat. Css memperkenalkan template yang berupa style untuk membuat dan mempermudah penulisan dari halaman-halaman yang di rancang.

Hal ini sangat penting karena halaman yang menggunakan css dapat di baca secara bolak-balik dan isinya dapat di lihat oleh pengunjung dari manapun. CSS mampu menciptakan halaman yang tampak sama pada resolusi lauar daro pengunjung yang berbeda tanpa memerlukan suatu tabel.

Dengan CSS, anda akan lebih mudah melakukang setting tampilan keseluruhan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS. Dengan atribut yang di inginkan tanpa harus mengubah satu per satu atribut tiap elemen yang ada dalam situs yang di buat.

Saat ini CSS merupakan style yang banyak di gunakan karena berbagai CSS dalam web akan lebih efisien karena CSS dapat di gunakan untuk penggunaan secara berulang pada tag-tag tertentu sehingga tidak usah mengetikkan ulang seluruh perintah pemformatan seperti halnya HTML klasik.

CSS akan lebih mudah di pelajari jika telah mengetahui struktur pembuatan dokumen web dengan bahasa HTML.

Bagaimana cara Kerja CSS?

Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format-format lain untuk memformat atribut sebuah halaman web yang kita buat. Tiap style memiliki dua buah elemen dasat, yaitu "selector" dan "deciaration".

Sebuah "Selector" biasanya adalah tag HTML, sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukan tipe bentuk yang di aplikasikan pada selector. Declaraton ini biasanya di tandai dengan kurung kurawal {}.

Perintah atau nilai CSS yang berbeda di pisahkan satu dengan yang lain dengan menggunakan titik koma (;) seperti terlihat pada contoh di bawah ini :

<style type="text/css">
.format {font-family:verdana; color:blue;}
</style>

Kode di atas telihat bahwa :

.Format adalah selector, dan {font-family:verdana; color:blue;} adalah declaration.

Selector-selector dan style dalam CSS akan di masukan dalam sebuah tempat yang sama dalam isi dokumen HTML atau di buat di luar dokumen HTML yang nantinya akan di panggil untuk menentukan isi tampilan dokumen HTML. Kita hanya menunjuk pada selector-selector di mana akan mengaktifkan sebuah style yang anda inginkan.

Hal paling umum dalam memasukan kode style sheet dengan menggunakan tag <style>, tag </style> ini selalu tamil dalam bagian <head> dan sebelum </head> dari dokumen anda.

Di bawah ini adalah contoh penempatan CSS di dalam kode HTML:

<html>
<head>
<style type="text/css">
(Aturan-aturan CSS)
</style>
</head>
<body>
(Dokumen html yang akan di berikan aturan)
</body>
</html>

Untuk menentukan font dan warna-warna tiap anda memulai sebuah cell table, anda dapat menentukan sebuah style dan kemudian anda tinggal menunjuk ke style dalam cell table anda. Di bawah ini contoh perbandingan dari sebuah tabel berikut yang di buat menggunakan html sederhana :

<html>
<head>
<title> Belajar CSS </title>
</head>
<body>
<table>
<tr>
<td bgcolor="red" align="center"><font face="verdana" color="blue">Belajar CSS1</font></td>
</tr>
</table>
</body>
</html>

Jika di browser maka tampilan kode html di atas akan seperti di bawah ini :

Bandingkan jika dokumen tersebut di buat dengan menggunakan CSS (dengan menganggap bahwa sebuah selector yang di panggil "format" telah di tetapkan yang akan mengatur format teks dokumen HTML tersebut).

<html>
<head>
<title> Belajar CSS </title>
<style type="text/css">
.format {background-color:red; color:blue; font- family:verdana;}
</style>
</head>
<body>
<table>
<tr>
<td class="format">Belajar CSS1</font></td>
</tr>
</table>
</body>
</html>

Jika di browser maka tampilan kode html di atas akan seperti di bawah ini :

Dengan menggunakan CSS, dokumen yang di buat menggunakan HTML murni akan dapat lebih di singkat dan akan lebih mengefisienkan waktu yang di butuhkan. Bayangkan jika anda membuat sebuah situs yang kompleks dengan banyak atribut untuk halam dalam situs anda, Tentunya anda harus menentukan tiap atribut untuk tiap halaman tersebut satu per satu.

Bagaimana jika terdapat seratus halam dalam situs tersebut? Bayangkan beberapa waktu yang anda habiskan hanya untuk memformat tiap halaman jika terdapat kesalahan dalam halaman-halaman tersebut? Namun masalah tersebut dapat lebih diminimalisasi menggunakan CSS karena anda hanya akan membuat style yang akan memformat keseluruhan halaman dalam situs yang di buat dan kita cukup menentukan selector dalam style yang akan di gunakan dalam halaman tersebut.

Catatan : Terimakasih sudah membaca sampai akhir :D

Nah itulah penjelasan apa yang di maksud dengan CSS, terus bagaimana cara kerjanya, saya sudah jelaskan, semoga dengan penjelasan saya di atas bisa membuat anda mengerti, okeh sampai di sini dulu, sampai jumpa. Salam Sukai Penulis