Pendefinisian dengan External Style Sheet

Pendefinisian dengan External Style Sheet | Pada pembahasan-pembahasan sebelunya, style sheet dalam bentuk header diletakkan di dalam dokumen yang bersangkutan.  Baik itu di dalam HEAD, maupun di dalam BODY. Bagaimana jika kita ingin agar pendefinisian style sheet tersebut diletakkan pada sebuah file tertentu terpisah dengan dokumen HTML tersebut ? Inilah yang disebut External Style Sheet (style sheet luar).

Keuntungan dari External Style Sheet ini adalah  mempermudah modifikasi style tanpa harus menyentuh dokumen HTML yang bersangkutan. Selain itu juga, pembuat homepage tidak usah capek-capek membuat definisi-definisi baru di setiap dokumen. Dengan adanya ExternalStyle Sheet, misalnya alternatif yang pertama ukuran huruf sedang, sedangkan pada alternatif kedua ukuran huruf besar. Pembuat homepage juga dapat menentukan mana alternatif terbaik yang akan digunakan.
Hal-hal yang perlu diketahui dalam membuat External Style Sheet : 

1. Tag yang digunakan adalah LINK
2. Atribut utama yang digunakan adalah HREF dengan nilai nama External Style Sheet tersebut (misalnya aangstyle.css) atau URL dari file External Style Sheet tersebut.
3. Untuk membuat “Persistent Style Sheet” (Style Sheet yang paten), digunakan atribut tambahan REL dengan nilai stylesheet, tetapi jangan sampai menyertakan atribut TITLE.
4. Untuk membuat “Persistent Style Sheet” (Style Sheet terbaik), digunakan atribut tambahan REL dengan nilai stylesheet, dan atribut TITLE dengan nilai nama tertentu.
5. Untuk membuat “Alternate Style Sheet” (Style Sheet Alternatif), digunakan atribut tambahan REL dengan nilai alternate stylesheetdan atribut TITLE  dengan nilai nama tertentu.

Bisa juga ditambahkan atribut lainnya yaitu TYPE dengan nilai, misalnya text/css.

Contoh:

• Untuk membuat “Persistent Style Sheet” :

<LINK HREF =”aangstyle.css”
 REL=”stylesheet” TYPE=”text/css”>

• Untuk membuat “Preffered Style Sheet” :

<LINK HREF=”terbaik.css” TITLE=”MEDIUM” REL=”stylesheet” TYPE=”text/css”>

• Untuk membuat “Alternate Style Sheet”:

<LINK HREF=”alternatif.css” TITLE=”besar” REL=”alternate stylesheet” TYPE=”text/css”>

• Ingat nilai dari HREF=”../style/mystyle.css”> atau

<LINK HREF=http://www.aang.com/mystyle.css REL=”stylesheet” TYPE=”text/css”>

• Ingat, bentuk penulisan LINK bisa seperti ini :

<LINKL HREF=”aangstyle.css” REL=stylesheet”>

• Namun jangan sekali-sekali manulisnya hanya dengan bentuk seperti berikut :

<LINK HREF=”aangstyle.css”> 

Karena, tampilan pada browser nanti, tidak akan sesuai dengan style sheet yang telah didefinisikan. Ini disebabkan karena tidak adanya REL=”STYLESHEET” yang mengakhibatkan browser tidak mengenali adanya Externanal Style Sheet yang dipanggil oleh homepage tersebut.

Cukup sekian dulu tutorialnya tentang Pendefinisian dengan External Style Sheet  dan terimakasih.

Pendefinisian Style sebuah Nama Identitas khusus

Pendefinisian Style sebuah Nama Identitas khusus | Teknik ini berbeda dengan teknik yang telah dipelajari sebelumnya. Pendefinisian style dapat dibuat dengan menspesifikasikan sebuah nama identitas khusus tertentu dengan atribut-atribut style sheet. Untuk itu gunakanlah #nama-identitas-spesifik dengan atribut style tertentu yang telah didefinisikan. Bentuk pendefinisian ini dapat dipakai oleh tag-tag apapun yang disertai nama identitas tersebut.

Terlihat jelas bahwa identitas ID “identitasku” bisa digunakan oleh tag-tag lain asalkan tag tersebut mencantumkan ID=”identitasku”

Cukup sekian dulu artikel pada kesempatan kata kali ini tentang Pendefinisian Style sebuah Nama Identitas khusus dan semoga membawa manfaat untuk kita. Terimakasih

Pendefinisian Style Tag dengan Nama Class khusus

Pendefinisian Style Tag dengan Nama Class khusus | Style dapat dibuat dengan mendefinisikan sebuah tag HTML tertentu dengan atribut style sheet yang memiliki sebuah nama class yang spesifik/khusus. Yaitu dengan menggunakan atribut CLASS dengan nama class tertentu yang dapat menunjukkan cirri khusus untuk siapa definisi style tersebut digunakan. 

DIV dan Span biasa digunakan untuk mengelompokkan tag-tag. Selain, keduanya biasa digabungkan dengan atribut ID dan CLASS yang menawarkan mekanisme generic untuk memperluas struktur dokumen (mempermudah dan mengefisiensikan pengaturan tampilan).

SPAN merupakan inline content (text level), sedangkan div merupakan block level. Kedua sangat bermanfaat untuk style sheet. Dimana<DIV></DIV> itu sendiri maupun antara DIV dengan tag-tag lainnya, pada pergantian barisnya tidak terdapat baris kosong (line break). Sedangkan seperti kita ketahui sebelumnya, antara P yang satu denga P yang lain maupun P dengan tag-tag lainnya, terdapat pergantian baris. Lihat kembali penggalan source dari tampilan baris.
…Ryan Giggs berhasil meraih MVP dan hadiah berupa sedan sport <SPAN CLASS = “hadiah”>Toyota Celica SS-II</SPAN>. Perhatikan baik-baik, tidak ada pergantian baris pada SPAN.

Cukup sekian dulu postingan saya tentang Pendefinisian Style Tag dengan Nama Class khusus dan semoga bermanfaat.

Tutorial Css Header Style Information

Tutorial Css Header Style Information | Style sheet bias diletakkan di bagian kepala dokumen HTML. HTML mengizinkan elemen-elemen STYLE berada di bagian HEAD maupun di dalam BODY. Imlementasi style sheet kali ini bias diterapkan lebih bervariasi dibandingkan dengan Inline Style Information. Sebagai contoh, pendeklarasian elemen STYLE dalam bentuk header ini digunakan untuk: 

• Hal-hal yang berkaitan dengan sebuah tag spesifik HTML, misalnya pendeklarasian untuk semua tag P atau untuk semua tag H, dsb. 
• Mendefinisikan sebuah tag HTML tertentu yang memiliki nama class spesifik dengan nilai –nilai style sheet tertentu (digunakan untuk mendefinisikan style tag tertentu). Misalnya, atribut CLASS yang berisi nilai-nilai tertentu tersebut digunakan tag P. Contoh : 

p.aang{text-align:center}
maka style ini hanya digunakan oleh
<p class=”aang”> 

• Mendefinisikan sebuah nama identitas spesifik yang memiliki nilai-nilai style sheet tertentu (mendefinisikan tag-tag yang mengandung identitas spesifik tersebut.) Misalnya, atribut ID yang memiliki nilai-nilai tertentu dengan identitas yang khusus pula digunakan oelh tag P dan DIV yang memiliki identitas khusus pula. Contoh:  

#aang{teks-align:center;}
maka style ini digunakan oleh tag-tag apapun yang mengandung nama identitas khusus “aang”, misalnya:
<p id=”aang”>
<div id=”aang”>

Nah cukup sekian dulu Tutorial Css Header Style Information dan tunggu postingan selamjutnya juga,.

Tutorial Css Inline Style Information

Tutorial Css Inline Style Information | Menggunakan atribut STYLE.Atribut ini digunakan untuk mendefinisikan informasi style dokumen HTML untuk sebuah elemen tunggal. Sintaks dari data style tergantung pada Style Sheet Language yang digunakan. Contoh berikut ini memperlihatkan penentuan informasi warna dan ukuran huruf suatu paragraph tertentu.

<p style=”font-size:12pt;  color:blue;”>aang

Dalam CSS format pendeklarasian property style adalah … “nama : nilai” dan diantara property yang satu dengan lainnya dipisahkan dengan tanda titik kome (;). Atribut style biasa digunakan untuk mengaplikasikan sebagian style pada sebuah dokumen HTML. Jika style ingin digunakan pada beberapa tag lainnya kembali (re-used), pembuat homepage harus menggunakan elemen STYLE untuk mengelompokkan informasi tersebut dalam bentuk header. Agar kemampuan lebih optimal dan fleksibel , pembuat homepage bisa mendefinisikan style pada External Style Sheet (style sheet luar).

Nah cukup sekian dulu Tutorial Css Inline Style Information dan semoga bermanfaat untuk kita semuanya.

Tutorial Css (Cascade Style Sheet) Untuk Pemula

Tutorial Css (Cascade Style Sheet) Untuk Pemula | Dengan style sheet kita dapat memisahkan style (format tampilan) dengan isi dokumen HTML yang sebenarnya. Hal ini dilakukan dengan tujuan kita ingin mengubah tampilan yang ada pada dokumen HTML, kita tidak perlu menggantikan sebagian besar isi source dengan mengotak-atik setuap baris source dokumen HTML yang ingin kita ubah tersebut. Cukup dengan mengubah definisi style sheet atau dengan membuat style sheet yang baru, Anda akan dapat melakukan dengan cara yang lebih mudah. Jadi style sheet merupakan sarana yang efisien dan fleksibel untuk mengatur tampilan homepage.

Pembuatan homepage dapat memberikan spesifikasi informasi style dari Style Sheet Language yang akan digunakan dalam sebuah dokumen HTML. Untuk itu, sebaiknya digunakan elemen META untuk meletakkan default Style Sheet Language untuk dokumen tersebut. Contoh untuk deklarasi CSS (Cascading Style Sheet) Language, maka deklarasi formatnya adalah sbb:

<meta http-equiv=”Content-Style-Type” content=”text/css”>
Cara lain untuk mendefinisikan tipe style adalah seperti contoh berikut:
<head>
<style type=”text/css”> … </style>
</head>

Penulisan dengan TYPE seperti ini tidak harus dilakukan, tujuannya adalah untuk bagi browser yang tidak support untuk mengabaikannya.

Nah cukup sekian dulu tutorial kali ini tentang Tutorial Css (Cascade Style Sheet) Untuk Pemula dan tunggu artikel Css yang menarik lainnya.