Sukai Penulis: PHP

PHP

Tampilkan postingan dengan label PHP. 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

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