Mengenal Elemen Pada Kode HTML Blog

Font Properties
Property
Valid Values
Example
font-family [font name or type] font-family: Verdana, Arial;
font-style normal | italic font-style:italic;
font-variant normal | small-caps font-variant:small-caps;
font-weight normal | bold font-weight:bold;
font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length font-size:12pt;
font font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family font: bold 12pt Arial;


Color and Background Properties
Property
Valid Values
Example
color color color: red
background-color color | transparent background-color: yellow
background-image url | none background-image: url(house.jpg)
background-repeat repeat | repeat-x | repeat-y | no-repeat background-repeat: no-repeat
background-attachment scroll | fixed background-attachment: fixed
background-position position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] background-position: top center
background transparent | color || url || repeat || scroll || position background: silver url(house.jpg) repeat-y


Text Properties
Property
Valid Values
Example
letter-spacing normal | length letter-spacing:5pt
text-decoration none | underline | overline | line-through text-decoration:underline
vertical-align sub | super | vertical-align:sub
text-transform capitalize | uppercase | lowercase | none text-transform:lowercase
text-align left | right | center | justify text-align:center
text-indent length | percentage text-indent:25px
line-height normal | number | length | percentage line-height:15pt


Box Properties
Property
Valid Values
Example
margin-top length | percentage | auto margin-top:5px
margin-right length | percentage | auto margin-right:5px
margin-bottom length | percentage | auto margin-bottom:1em
margin-left length | percentage | auto margin-left:5pt
margin length | percentage | auto {1,4} margin: 10px 5px 10px 5px
padding-top length | percentage padding-top:10%
padding-right length | percentage padding-right:15px
padding-bottom length | percentage padding-bottom:1.2em
padding-left length | percentage padding-left:10pt; }
padding length | percentage {1,4} padding: 10px 10px 10px 15px
border-top-width thin | medium | thick | length border-top-width:thin
border-right-width thin | medium | thick | length border-right-width:medium
border-bottom-width thin | medium | thick | length border-bottom-width:thick
border-left-width thin | medium | thick | length border-left-width:15px
border-width thin | medium | thick | length {1,4} border-width: 3px 5px 3px 5px
border-top-color color border-top-color:navajowhite
border-right-color color border-right-color:whitesmoke
border-bottom-color color border-bottom-color:black
border-left-color color border-left-color:#C0C0C0
border-color color {1,4} border-color: green red white blue; }
border-top-style none | solid | double | groove | ridge | inset | outset border-top-style:solid
border-right-style none | solid | double | groove | ridge | inset | outset border-right-style:double
border-bottom-style none | solid | double | groove | ridge | inset | outset border-bottom-style:groove
border-left-style none | solid | double | groove | ridge | inset | outset border-left-style:none
border-style none | solid | double | groove | ridge | inset | outset border-style:ridge; }
border-top border-width | border-style | border-color border-top: medium outset red
border-right border-width | border-style | border-color border-right: thick inset maroon
border-bottom border-width | border-style | border-color border-bottom: 10px ridge gray
border-left border-width | border-style | border-color border-left: 1px groove red
border border-width | border-style | border-color border: thin solid blue
float none | left | right float:none
clear none | left | right | both clear:left


Classification Properties
Property
Valid Values
Example
display none | block | inline | list-item display:none
list-style-type disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none list-style-type:upper-alpha
list-style-image url | none list-style-image:url(icFile.gif)
list-style-position inside | outside list-style-position:inside
list-style keyword || position || url list-style: square outside url(icFolder.gif)



Positioning Properties
Property
Valid Values
Example
Applies to
clip shape | auto clip:rect(0px 200px 200px 0px) all elements
height length | auto height:200px DIV, SPAN and replaced elements
left length | percentage | auto left:0px absolutely and relatively positioned elements
overflow visible | hidden | scroll | auto overflow:scroll all elements
position absolute| relative | static position:absolute all elements
top length | percentage | auto top:0px absolutely and relatively positioned elements
visibility visible | hidden | inherit visibility:visible all elements
width length | percentage | auto width:80% DIV, SPAN and replaced elements
z-index auto | integer z-index:-1 absolutely and relatively positioned elements


Printing Properties
Property
Valid Values
Example
page-break-before auto | always || left | right page-break-before:always
page-break-after auto | always || left | right page-break-before:auto


Pseudo Classes
Property
Valid Values
Example
cursor auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help { cursor:hand; }
active, hover, link, visited n/a a:hover { color:red; }
first-letter, first-line any font manipulating declaration p:first-letter{
float:left;color:blue
}

Semoga bermanfaat...!!!

Subscribe

1 Komentar Blogger
Komentar Facebook

1 komentar:

June 22, 2019 at 9:29 AM

Mantap sangat membantu mas

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers