Kumpulan Cascading StyleSheet (CSS) Lengkap

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
November 09, 2018




CSS adalah bahasa yang menggambarkan gaya dokumen HTML. CSS menjelaskan bagaimana elemen HTML harus ditampilkan. Sintaks CSS terdiri dari tiga bagian: pemilih, properti, dan nilai:

selector {property: value}

Properti adalah atribut yang ingin Anda ubah, dan setiap properti dapat mengambil nilai. Properti dan nilai dipisahkan oleh titik dua, dan dikelilingi oleh kurung kurawal:

body {color: white}

Jika nilainya beberapa kata, taruh kutipan di sekitar nilai:

p {font-family: "sans serif"}

Jika Anda ingin menentukan lebih dari satu properti, Anda harus memisahkan setiap properti dengan titik koma. Contoh di bawah ini menunjukkan cara menentukan paragraf yang selaras dengan pusat, dengan warna teks merah:

p {text-align: center; color: black}

Berikut adalah Kumpulan Cascading StyleSheet (CSS) Lengkap yang bisa anda gunakan untuk mempercantik website anda.

Properti dibawah ini mempengaruhi bagaimana teks muncul di suatu halaman. Properti gaya teks yang berbeda adalah seperti di bawah:

Color
{color: aqua}
{color: black} (default)
{color: blue}
{color: fuchsia}
{color: #808080}
{color: maroon}
{color: #ffa500}
font-weight
{font-weight: normal} (default)
{font-weight: bold}
{font-weight: bolder} (penggunaan kata kunci: lebih berani, lebih ringan)
{font-weight: lighter}
{font-weight: 100} (penggunaan nilai numerik: 100,200,300,400,500,600,700,800,900)
font-family
 {font-family: Verdana, Arial, Helvetica, sans-serif}
font-size
{font-size: 2pt}
{font-size: 2em}
{font-size: 2ex}
{font-size: 2pc}
{font-size: 2px}
{font-size: 2in}
{font-size: 10mm}
{font-size: 5cm}
{font-size: small}
{font-size: larger}
{font-size: smaller}
{font-size: xx-small}
{font-size: x-small}
{font-size: medium} (default)
{font-size: large}
{font-size: x-large}
{font-size: xx-large}
font-variant
{font-variant: normal } (default)
{font-variant: small-caps}
font-style
{font-style: normal} (default)
{font-style: italic}
{font-style: oblique}
text-decoration
{text-decoration: none} (default)
{text-decoration: underline}
{text-decoration: overline}
{text-decoration: line-through}
{text-decoration: blink}
text-transform
{text-transform: capitalize} (huruf pertama setiap kata ditulis dengan huruf besar)
{text-transform: uppercase} (semua huruf besar)
{text-transform: lowercase} (semua huruf kecil)
letter-spacing
{letter-spacing: normal} (default)
{letter-spacing: 2px}
{letter-spacing: 2in}
word-spacing
{word-spacing: normal} (default)
{word-spacing: 2px}
line-height
{line-height: normal} (default)
{line-height: 1.2}
{line-height: 120%}
{line-height: 2px}
vertical-align
{vertical-align: baseline} (default)
{vertical-align: middle}
{vertical-align: sub}
{vertical-align: super}
{vertical-align: text-top}
{vertical-align: text-bottom}
{vertical-align: top}
{vertical-align: bottom}
{vertical-align: 20%}
text-indent
{text-indent: 5px}
{text-indent: 10%}
text-align
{text-align: left}
{text-align: right}
{text-align: center}
{text-align: justify}
direction
{direction: rtl} (berarti teks harus mengalir dari kanan ke kiri)
{direction: ltr} (berarti teks harus mengalir dari kiri ke kanan) (default)
background-color
{background-color: maroon}
{background-color: #336699}
background-image
{background-image: url(image.png)}
background-attachment
{background-attachment: scroll} (default)
{background-attachment: fixed}
background-repeat
{background-repeat: repeat} (meng-ubin gambar latar belakang secara horizontal dan vertikal)
{background-repeat: repeat-x} (mem-tile sebuah gambar secara horizontal tetapi tidak secara vertikal)
{background-repeat: repeat-y} (memangkas gambar secara vertikal tetapi tidak secara horizontal)
{background-repeat: no-repeat} (membuat gambar muncul sekali dan tidak memajang gambar)
background-position
{background-position: 0% 0%} (default)
{background-position: 15% 25%}
{background-position: 20px 20px}
{background-position: top left}
{background-position: left top}
{background-position: top}
{background-position: top center}
{background-position: right top}
{background-position: left center}
{background-position: right center}
{background-position: bottom left}
{background-position: bottom-center}
{background-position: bottom-right}
background
background-image: url(https://www.tutorialswb.com.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;
border properties
{border-width: thin}
{border-width: medium} (default)
{border-width: thick}
{border-top-width: 2pt}
{border-left-width: medium}
{border-right-width: 2em}
{border-bottom-width: 2px}
{border-color: #336699}
{border-color: #336699 #003366}
{border-color: maroon green blue}
{border-color: maroon green blue yellow}
{border-style: none} (default)
{border-style: dotted dashed}
{border-style: solid}
{border-style: solid double groove}
{border-style: none ridge inset outset}
margin properties
{margin: auto}
{margin-top: 20%}
{margin-bottom: 2px}
{margin-left: -2cm}
{margin-bottom: 2em}
padding properties
{padding: 4px}
{padding-right: 20%}
{padding-left: 9mm}
{padding-bottom: 1in}
Position
{position: static} (default)
{position: relative}
{position: absolute}
{position: fixed}
top
{top: auto} (ini adalah default)
{top: 4px} (menggunakan nilai panjang)
{top: 4%} (menggunakan nilai persentase)
left
{left: auto}
{left: 4px}
{left: 55%}
bottom
{bottom: auto}
{bottom: 4in}
{bottom: 9%}
right
{right: auto}
{right: 4cm}
{right: 40%}
width
{width: auto} (default)
{width: 5%}
{width: 5em}
min-width
{min-width: auto} (default)
{min-width: 5%}
{min-width: 5mm}
z-index
{z-index: auto} (default)
{z-index: 5} (menggunakan integer)
visibility
{visibility: inherit} (default)
{visibility: visible}
{visibility: hidden}
overflow
{overflow: visible} (default)
{overflow: scroll}
{overflow: auto}
{overflow: hidden}
float
{float: none} (default)
{float: right}
{float: left}
clear
{clear: none} (default)
{clear: left}
{clear: right}
{clear: both}
cursor
{cursor: auto} (default)
{cursor: crosshair}
{cursor: default}
{cursor: pointer}
{cursor: move}
{cursor: *-resize}
{cursor: text}
{cursor: wait}
{cursor: help}
outline
{outline-color: invert} (default)
{outline-color: #ffa500}
{outline-color: purple}
{outline-style: none} (default)
{outline-style: dotted}
{outline-style: dashed}
{outline-style: solid}
{outline-style: double}
{outline-style: groove}
{outline-style: ridge}
{outline-style: inset}
{outline-style: outset}
{outline-width: thick}
{outline-width: medium} (default)
{outline-width: thick}
{outline-width: 4px}
display
{display: none}
{display: block}
{display: inline} (default)
{display: list-item}
{display: inline-block}
{display: run-in}
list-style-type
{list-style-type: none}
{list-style-type: disc} (default)
{list-style-type: circle}
{list-style-type: square}
{list-style-type: decimal}
{list-style-type: decimal-leading-zero}
{list-style-type: lower-roman}
{list-style-type: upper-roman}
{list-style-type: lower-alpha}
{list-style-type: upper-alpha}
{list-style-type: lower-greek}
{list-style-type: upper-latin}
{list-style-type: lower-latin}
{list-style-type: hebrew}
{list-style-type: armenian}
{list-style-type: georgian}
{list-style-type: cjk-ideographic}
{list-style-type: hiragana}
{list-style-type: katakana}
{list-style-type: hiragana-iroha}
{list-style-type: katakana-iroha}
list-style-image
{list-style-image: none} (default)
{list-style-image: url(image1.gif)}
list-style-position
{list-style-position: outside} (default)
{list-style-position: inside}
table-layout
{table-layout: auto} (default)
{table-layout: fixed}

Sekian share singkat kali ini semoga apa yang kami share bermanfaat bagi anda, kami harap css di atas membuta website anda lebih menarik dan menarik banyak pengunjung.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed