Pengertian dari CSS, Fungsi CSS Beserta Contoh nya

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya di Ramaikan24x7 (www.ramaikan.com)

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya. CSS Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Ramaikan24x7 (www.ramaikan.com). 
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya
CSS, Fungsi CSS
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-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

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. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 1
image source: www.cs1893.com

Dengan begitu CSS dapat disimpulkan sebagai berikut:

  • Suatu style yang digunakan untuk menampilkan elemen HTML.
  • Dapat mengatur dan mengontrol tampilan halaman web serta memisahkan antara tampilan dan konten halaman web.
  • Bukanlah suatu keharusan dalam membuat web, akan tetapi menggunakan CSS akan membuat tampilan web menjadi lebih menarik.

Struktur CSS

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 2

Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan blue adalah value.
  • Perintah CSS terdiri atas 2 komponen, yakni Selector & Declaration.
  • Selector berfungsi untuk memberi tahu browser bahwa pada elemen mana rule CSS diterapkan.
  • Selector dapat berupa elemen HTML, selector class atau selector id.
  • Declaration merupakan aturan CSS yang diterapkan, terdiri atas property dan value.

Metode Penulisan CSS

Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet:
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 3

Embedded Style Sheet (Internal)
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan CSS dengan metode Embedded Style Sheet internal :

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 4

Embedded Style Sheet (Eksternal)
CSS didefinisikan terlebih dalam sebuah file (*.css). Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya nama file di panggil dengan syntax html pada file HTML.

Contoh penggunaan CSS dengan metode Embedded Style Sheet eksternal :
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 5

Syntax CSS

Basic
  • CSS Syntax Standard
    body {color:black}
  • Jika value lebih dari satu kata gunakan tanda kutip ""
    p {font-family:"sans serif"}
  • Jika lebih dari satu properti untuk sebuah selektor
    p {text-align:center;color:red}
  • atau, agar lebih mudah dilihat bisa ditulis seperti ini:
    p { text-align:center; color:black; font-family:arial }

Grouping

Untuk mempersingkat penulisan, CSS juga memungkinkan untuk melakukan grouping pada selector‐selector yang memiliki property yang sama. contoh:
h1 { color:green; }

h3 { color:green; }

h5 { color:green; }

p { color:green; }

Di Group menjadi:

h1,h3,h5,p { color:green; }

CSS Class Selector

  • Berfungsi untuk memberikan style yang berbeda pada sebuah elemen HTML 
  • Diawali dengan menambahkan tanda '.' (titik) pada file css 
  • Pada file HTML ditambahkan property 'class' untuk memanggil selector tersebut. 
  • Satu elemen HTML dapat memanggil lebih dari satu class

contoh:

style.css
.merah {color:red;}
.right {text-align:right;}
.left {text-align:left;}

contoh.htmlPengertian dari CSS, Fungsi CSS Beserta Contoh nya 6_

CSS ID Selector

  • Berfungsi juga untuk memberikan style yang berbeda pada sebuah elemen HTML
  • Diawali dengan menambahkan tanda ‘#’ pada file css
  • Pada file HTML ditambahkan property ‘id‘ untuk memanggil selector tersebut.
  • Penulisan id tidak boleh diawali dengan angka
  • Satu elemen HTML hanya boleh menggunakan satu id

contoh:

style.css
#merah {color:red;}
#right {text-align:right;}
#left {text-align:left;} contoh.html

Selector CSS popular

CSS Dimension

Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML.

Contoh:

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 7_

Nilai/ value:Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 8_

CSS Box Model

  • Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak.
  • Digunakan pada saat kita akan merancang tampilan sebuah website.
  • Pada dasarnya berfungsi sebagai tempat yang membungkusisidarielemen‐elemen HTML.
  • Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag lain juga bisa menerapkan box model.
  • Terdiriatas4 bagian: Margin, Border, Padding, Content.
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 9_

Contoh margin:

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 10_


Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 11_

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 12_

Contoh padding:

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 13_

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 14_

Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 15_

CSS Float

  • Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau dikanan halaman.
  • Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float tersebut.
  • Elemen yang berada sebelum elemen yang diberi float tidak akan terpengaruh.
  • Property:
    float:left;
    float:right;
  • Untuk me‐nonaktifkan fungsi float gunakan:
    clear:both;
  • Biasanya digunakan untuk membuat gallery.

LATIHAN CSS

1. STYLE DALAM TAG TUNGGAL
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 16_

2. STYLE DALAM 1 DOKUMEN HTML
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 17_

3. STYLE DALAM FILE EKSTERNAL
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 18_

4. LATIHAN: Buat form menggunakan CSS sehingga memiliki tampilan seperti berikut:
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya 19_

Sekian artikel tentang Pengertian, Tipe, dan Fungsi CSS Beserta Contoh. Semoga bermanfaat.

COMMENTS

BLOGGER
Name

Bahasa Markah,2,Biologi,2,Blog,5,Blogger,2,Cloud Computing,4,Cloud Storage,4,CSS,1,Database,1,Definisi,24,HTML,1,Hukum,5,Internet,7,Komputer,2,Konsep Komunikasi Data Dan Jaringan,2,Manajemen,4,Organisasi,3,Para Ahli,5,Pengantar Ilmu Komunikasi,1,Pengertian,22,PHP,1,SEO,4,Sistem Operasi,2,Tips & Triks,1,Tools,1,Tutorial,2,Umum,11,WEB dan WWW,2,
ltr
item
Ramaikan24x7: Pengertian dari CSS, Fungsi CSS Beserta Contoh nya
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya
Pengertian dari CSS, Fungsi CSS Beserta Contoh nya di Ramaikan24x7 (www.ramaikan.com)
https://4.bp.blogspot.com/-hzG9Xv5dxfk/WZDMr_q_X3I/AAAAAAAAAWc/GiekQHTtQDoQkWiqucWEWRR7c5FjJluvwCLcBGAs/s640/Pengertian%2Bdari%2BCSS%252C%2BFungsi%2BCSS%2BBeserta%2BContoh%2Bnya.png
https://4.bp.blogspot.com/-hzG9Xv5dxfk/WZDMr_q_X3I/AAAAAAAAAWc/GiekQHTtQDoQkWiqucWEWRR7c5FjJluvwCLcBGAs/s72-c/Pengertian%2Bdari%2BCSS%252C%2BFungsi%2BCSS%2BBeserta%2BContoh%2Bnya.png
Ramaikan24x7
http://www.ramaikan.com/2017/08/Pengertian.dari.CSS.Fungsi.CSS.Beserta.Contoh.nya.html
http://www.ramaikan.com/
http://www.ramaikan.com/
http://www.ramaikan.com/2017/08/Pengertian.dari.CSS.Fungsi.CSS.Beserta.Contoh.nya.html
true
1823188735813404161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy