Cascading Style Sheets: Perbedaan antara revisi

{{infoboxInfobox file format

| name = Cascading Style Sheets (CSS)

| extension = .css

| logoicon = [[Berkas:CSS3 logo and wordmark.svg|100px]]

Sama halnya ''styles'' dalam [[aplikasi]] pengolahan kata seperti [[Microsoft Word]] yang dapat mengatur beberapa ''style'', misalnya ''heading'', ''subbab'', ''bodytext'', ''footer'', ''images'', dan ''style'' lainnya untuk dapat digunakan bersama-samasecara bersamaan dalam beberapa berkas (''[[file]]'').<ref name="Slamet">Slamet Riyanto, ''Membuat Web Portal Multi Bahasa Jomla 1.5X + CD'', halaman 236. Elex Media Komputindo.</ref> Pada umumnya CSS dipakaidigunakan untuk memformat tampilan halaman web yang dibuat dengan [[bahasa]] [[HTML]] dan [[XHTML]].<ref name="Slamet"/>

CSS dapat mengendalikan [[ukuran]] [[gambar]], [[warna]] bagian tubuh pada teks, warna [[tabel]], ukuran border, warna border, warna [[hyperlink]], warna ''[[mouse]] over'', spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.<ref name="Slamet"/> CSS adalah bahasa [[Stylesheet|style sheet]] yang digunakan untuk mengatur tampilan dokumen.<ref name="dominikus">Dominikus Juju & Matamaya Studio, ''Seri Penuntun Praktis Join Multiply'', halaman 95. Elex Media Komputindo.</ref> Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.<ref name="dominikus"/>

Nama CSS didapat dari fakta bahwa setiap deklarasi ''style'' yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (''parent-child'') pada setiap ''style''.<ref name="SRR">Sulistyawan, Rubianto, Rahmad Saleh, ''Modifikasi Blog Multiply dengan CSS'', halaman 32. Elex Media Komputindo.</ref> CSS sendiri merupakan sebuah [[teknologi]] [[internet]] yang direkomendasikan oleh [[World Wide Web Consortium]] atau [[W3C]] pada [[tahun]] [[1996]].<ref name="dominikus"/> Setelah CSS distandardisasikandistandarisasikan, [[Internet Explorer]] dan [[Netscape Navigator|Netscape]] melepas [[browser]] terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.<ref name="SRR"/>

Saat masuk pada bagian CSS, sering dijumpai [[kode]] sebagai berikut:

''Selain itu, ada tiga metode penulisan atribut pada CSS atribut, yaitu :''<ref>Untung Rahardja, Augury El Rayeb, & Asep Saefullah (2009). ''Siapa saja bisa membuat website dengan CSS dan HTML'', halaman 37-41. Andi Yogyakarta.<name="css_html"/ref>

==== Inline Style Sheet ====

CSS didefinisikan langsung pada tag HTML yang bersangkutan. CaraIni penulisannya cukupditulis dengan menambahkan atribut '''style="..."''' dalam tag HTML tersebut.<ref name="css_html">Untung Rahardja, Augury El Rayeb, & Asep Saefullah (2009). ''Siapa saja bisa membuat website dengan CSS dan HTML'', halaman 37-41. Andi Yogyakarta.</ref> StyleGaya hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.<ref name="css_html" />

<sourcesyntaxhighlight lang="html4strict" line="1">

<title>Contoh Bentuk Inline </title>

<p id="cth3" style="font-size:14pt; color:red">

Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>

==== EmbeddedInternal StyleCSS Sheet ====

CSS didefinisikan terlebih dahulu dalam tag '''<style> ... </style>''' di atasdalam tag '''<bodyhead>'''.<ref name="css_html" /><ref>{{Cite Pada pendefinisian ini disebutkan atribut-atributweb|title=How CSS yang akanis digunakanstructured untuk tag-tag HTML,Learn yangweb selanjutnyadevelopment dapat{{!}} digunakan oleh tag HTML yang bersangkutanMDN|url=https://developer.<ref namemozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured|language="css_html" en-US|access-date=2024-09-23}}</ref>

<sourcesyntaxhighlight lang="html4stricthtml5" line="1">

<title>Contoh Bentuk Embedded</title>

<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>

<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasiindntasi 0.5 inchinci
</p>

<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna
background biru</p>

Ada beberapaBeberapa properti CSS yang dapat disingkat, biasanyadengan dipanggilmetode dengan Shorthand''shorthand'' CSS. TeknikIni shorthanddilakukan adalahdengan cara mempersingkat penulisan kode CSS yang memungkinkan untuk menetapkan nilai beberapa ''property'' secara bersamaan. Teknik ini dapat menghemat karakter, menghematsehingga energi,kode danyang tentu saja menghemat waktu. Kode jadi terlihatditulis lebih rapi, efisien, dan sering kali lebih mudah dibacaringkas.

Dalam CSS, adalah wajar jika satu propertyproperti memiliki banyak elemen.; Misalnyamisalnya dalam kodeproperti margin yang memiliki 4 propertyproperti untuk setiap sisi elemen., yaitu:

margin-right: 3px5px;

margin-bottom: 3px7px;

margin-left: 3px10px;

=== DukunganPenulisan darikomentar peselancarpada webCSS ===

Silahkan untuk menggunakan, mensalinmenyalin, dan mendistribusikan kode berikut */