Memahami dasar CSS dan cara penulisanya

ada beberapa cara dalam penulisan css diantaranya inline style, internal style, import style dan external style. mari kita bahas satu persatu

Jadilah seperti yang kamu inginkan, karna kamu hanya memiliki satu kehidupan dan satu kesempatan untuk melakukan hal-hal yang ingin kamu lakukan.

ada beberapa cara dalam penulisan css diantaranya inline style, internal style, import style dan external style. mari kita bahas satu persatu

Last Modif at July 7th, 2011

sebelumnya saya sudah membahas

sebelumnya saya sudah membahas pemahaman dasar-dasar css(di baca yah). karena postingan sebelumnya tentang dasar-dasar css itu kurang lengkap. nah disini saya akan membahas kekurangan di postingan sebelumnya. ok, mari kita mulai.

penempatan/penulisan css dalam theme

ada beberapa cara dalam penulisan css diantaranya inline style, internal style, import style dan external style. mari kita bahas satu persatu

inline style

maksud dari inline style ini adalah penulisan css langsung ke tag htmlnya, biasanya teknik ini digunakan hanya untuk tag-tag tertentu saja, daripada bingung mari kita ke contoh;


<div style="clear:both;"/>
<span style="color:blue; background:red; font-size:20px;">jika anda menulis text disini maka hasilnya ialah, text tadi berwarna biru, warna latar merah dan ukuran text 20px</span>
<p style="font:italic bold 23px times;">text dengan dengan style font italic tebal 23px times</p>
</div>

keterangan;

  • diawali dengan tag html
  • kemudian masukkan atribut style
  • di ikuti dengan style cssnya
  • yang berwarna merah itu adalah css
  • oia tidak semua tag html dapat menggunakan teknik ini(inline style)

internal style

bagi yang main di blogspot internal style ini sangat tidak asing, coz untuk membuat template maupun merubah tampilan blogspot kita menggukan teknik ini(internal style), bagaimana penulisannya berikut;

<html>
<head>
<style type="text/css">
body{
background:lime;/* warna latar belakang */
padding-left:60px;/* jarak kiri*/
}
h1{
color:red;/* warna */
font-family:Times, serif;/* font family*/
font-style: italic;/* font style*/
font-weight: bold;/* font weigt */
font-size: 30px;/* ukuran font*/
}

p{
color:blue;/* warna*/
font-family:arial;/* font family*/
font-style: normal;/* font style*/
font-weight: bold;/* font wight*/
font-size: 50px;/* ukuran font*/
}
</style>
</head>
<body>
<h1>ini adalah judul </h1>
<p>ini adalah paragraf</p>
</body>
</html>

keterangan;

  • recomendasi dari w3.org, harus seperti berikut
  • penilisan cssnya harus diletakkan <head><style type="text/css">disini</syle></head>
  • intinya itu ialah penulisan cssnya terletak di documment head
  • tapi seperti yang saya katakan sebelumya, browser akan tetep menjalankan tag walaupun penulisan tag htmlnya tidak beraturan(bingung?)

external style

teknik ini sangat tidak asing buat penguna wordpress.org, mengapa saya katakan demikian?, yoooow, karena tanpa teknik ini(eksternal style) thema wordpress itu ngga akan bisa di buat atau error, oia buat pennguna wp.org coba perhatikan semua file theme anda, pasti file yang bername style.css salalu ada. saya coba jelasin ya, external style ini adalah teknik penulisan css tanpa menulis kodeya di dalam file html, namun kita menulis cssnya di file lain dengan ekstensi [dot]css, sedangkan untuk menghubungkannya kita mmenggunakan tag <link rel, dari pada bingung mari kita ke contoh

  • buat sebuah folder dengan nama eksternalstyle
  • misal di E:\externalstyle
  • buka foldernya kemudain buat dua file yang masing masing bername eksternalstyle.html dan eksternalstyle.css
  • jika udah, edit kedua file tadi
  • kemudian masing-masing file isi dengan kode dibawah

kode dibawah untuk eksternalstyle.html

<html>
<head>
<!-- start style css -->
<link rel="stylesheet" href="eksternalstyle.css" type="text/css"/>
<!-- end style css -->
</head>
<body>
<h1>ini adalah judul </h1>
<p>ini adalah paragraf</p>
</body>
</html>

kode di bawah untuk eksternalstyle.css


/* belajar external style */
body{
background:lime;/* warna latar belakang */
padding-left:60px;/* jarak kiri*/
}

h1{
color:red;/* warna */
font-family:Times, serif;/* font family*/
font-style: italic;/* font style*/
font-weight: bold;/* font weigt */
font-size: 30px;/* ukuran font*/
}

p{
color:blue;/* warna*/
font-family:arial;/* font family*/
font-style: normal;/* font style*/
font-weight: bold;/* font wight*/
font-size: 50px;/* ukuran font*/
}

  • setelah memasukkan masing masing kode diatas, sekarang klik simpan
  • pastikan ngga ada yang salah
  • abis itu jalankan file eksternalstyle.html
  • nah gimana, sekarang udah tahukan apa itu ekternal style

import style

import style ini hampir sama dengan external style hanya saja jika pada external style kita menggunakan tag ini

<link rel="stylesheet" href="eksternalstyle.css" type="text/css"/>

sedangkan pada import style kita menggunakan ini

<style type="text/css" media="screen">
@import url( ekternalstyle.css );
</style>

penting

  • jika anda belajar css menggunakan teknik import dan external style, sangat perlu diperhatikan adalah nama filenya. (mohon jangan sampai salah satu hurufpun)
  • pada ekternal dan import style, kita tidak mesti menyimpan file style cssnya di directory(folder yang sama), yang terpenting itu adalah url lokasi file cssnya, oia coba sobat ganti ekternalstyle.css menjadi E:\eksternalstyle\eksternalstyle.css(hasilnya sama) atau bisa juga dengan mengupload file cssnya, kemudaian ganti eksternal.css menjadi url yang file css yang anda upload tadi
  • jika sahabat sudah ngerti maksudnya, coba edit value cssnya, kan aneh kalau text paragraf lebih gede dari text header

ketika aku nulis artikel ini, saya dalam keadaan cape banget so jika salah dikit, mohon maaf.

semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

4 thoughts on “Memahami dasar CSS dan cara penulisanya”

  1. Shaiya says:

    met malem…. q mau tanya?? tau ga cara membuat sebuah halaman web yang ada coding HTML,CSS, dan JAVASCRIPT nya…
    jadi ketiga berada dalam 1 file… mohon bantuannya… makasih… :)

  2. siip lah, makasih atas ilmunya Bos… sukses ya

  3. kickymaulana says:

    trus semangat mas, mestipun capek, saya aja semangat bacanya mas

  4. Bukannya kloq pake CSS eksternal loadingnya akan lebih lama bro, karena harus membaca kode CSS yg sudah kita upload ke tempat hosting CSS eksternal tadi…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-