Friday, March 1, 2019

Property in CSS

Property in CSS
The following are the components used in the CSS property:

Property Text Style

Property Text Style you can use to make your writing style on the web. The components of Text Style or associated with the model or style of writing / font of CSS is as follows:
1. color 
This property controls the color of the text writing 
selector {color: # 000000}
Value Hexadecimal color can be just writing for example for use Yellow yellow.
2. The font-weight 
This property controls the thickness of a literary text 
selector {font-weight: 100}
Value you can write with numbers ranging from one hundred and continued with multiples or you can write the word 'Bold' or the other.
3. font-family 
Property to set the font you are using 
selector {font-family: Arial, Helvetica, sans-serif}
For the type of font you should use the default standard Windows, if you want to be read by all users.
Font-size 4. 
This property to set the font size to be used 
selector {font-size: 12px}
For the font size you can use the size ... px, ... em or small, medium, large etc.
5. font-variant 
This property to set the font that will arise if using 
lowercase letters or small caps 
selector {font-variant: small-caps} or you can use the normal.
6. The font-style 
This property to set the font style to be used in the text 
selector {font-style: italic} selection of other value normal, oblique
7. The text-decoration 
This property to set the font style of font style continued. Selector {text-decoration: underline} or another value: line-through, none, 
blink, overline
8. The text-transform 
This property to set the font capital 
Selector {text-transform: lowercase} value are: uppercase, capitalize

Property Text Layout

Property Text Layout function to regulate how the effects of a layout of an article on the website page.

This property is more focused on the placement and appearance that are placed on your web pages.

You can combine the page layout and text display layouts so that your website look more elegant and in accordance with your wishes and the obvious course you can not get in the HTML.

Propert following:
1. The letter-spacing 
This property to control the distance of space between characters 
selector {letter-spacing: normal} for normal value it will be governed by the browser as fully justified text.
2. The word-spacing 
This property to control the distance of space between text or word 
selector {word-spacing: normal}
3. The line-height 
Property to set the line spacing or line 
selector {line-height: normal} value as: ... em ... px or percentage ...%
4. The text-indent 
Property to set up from the first line that goes usually to the initial paragraph. 
Selector {text-indent: 50px}
5. text-align 
This property to set the position of text 
selector {text-align: justify} Value are: left, right, center
6. The vertical-align 
This property is to control the distance of space between text or word 
selector {vertical-align: top} value another: text-top, text-bottom, bottom, middle, 
baseline, sub, super.
7. The direction 
Property is to regulate and determine the direction of an article on the website 
Selector {direction: ltr} Value else: rtl 
Description: ltr = text to be read from left to right 
rtl = text to be read from right to left
8. unicode-bidi 
Property is to control and direct the writing unicode 
selectors {unicode-bidi: bidi-override} Value are: normal, embed

Property Border

This property is to organize the elements that have lines with a variety of width, color and style of a display.

You can create a line between the left-right-up-down with a different style. 
Property following:
1. border 
Property to set the overall border 
selector {border: normal} Value else: thin, thick, dashed, dotted, double, 
grove, hidden, inset, none, outset, ridge, solid
2. The border-width 
This property is to set the overall width of the border 
selector {border-width: thin } Other Value: thick, medium
3. The border-top-width 
This property to set the width of the top border 
selector {border-top-width: thin} Value else: thick, medium
4. The border-right-width 
This property is to set the right border width 
selector {border-right-width: thin} Value else: thick, medium
5. border-bottom-width 
This property to set the width of the bottom border 
selector {border-bottom-width: thin} Value else: thick, medium
6. The border-left-width 
This property to set the width of the left border 
selector {border-left-width: normal} Value else: thick, medium
7. The border-color 
This property to set the color of the border 
selector {border-color: # 333333} Value else: you can use the color 
hexadecimal initially started with #
8. border-style
This property is to set the style of the border
selector { border-style:normal} Value lain : thin, thick, dashed, dotted,
double, grove, hidden, inset, none , outset, ridge, solid
9. border-top
This property is for managing border top
selector { border-top:normal} Value lain : thin, thick, dashed, dotted, double,
grove, hidden, inset, none , outset, ridge, solid
10. border-right
This property is to set border right
selector { border-right:normal} Value lain : thin, thick, dashed, dotted,
double, grove, hidden, inset, none , outset, ridge, solid
11. border-bottom
This property is to set border bottom
selector { border-bottom:normal} Value lain : thin, thick, dashed, dotted,
double, grove, hidden, inset, none , outset, ridge, solid
12. border-left
This property is to set border left
selector { border-left:normal} Value lain : thin, thick, dashed, dotted, double,
grove, hidden, inset, none , outset, ridge, solid

 

Property Margin

Property Margin to set the space or distance between elements limits, for example between the upper and lower elements, or between the left and bottom etc.

Property following:
1. The margin 
Property to set the overall distance between elements include 
selector {margin: auto} Value else can measure ... px, ... em or percentage 
, for example 25%
2. The margin-top 
Property to set the top with an element spacing 
selector {margin-top: auto} Value else can measure ... px, ... em or percentage 
, for example 25%
3. The margin-left 
This property to set the distance left to the element 
selector {margin-left: auto} Value else can measure ... px, ... em or percentage 
, for example 25%
4. The margin-right 
Property right to set the distance to the element 
selector {margin-right: auto} Value else can measure ... px, ... em or 
percentage, for example 25%
Margin-bottom 5. 
This property to set the distance bottom with an element 
selector {margin-bottom: auto} Value else can measure ... px, ... em or 
percentage, for example 25%

Property Padding

Property padding is to organize the space between the elements and content. 
Property following:
1. padding 
This property is to organize the space element with a global content 
selector {padding: 7px} Value else can measure ... px, ... em or percentage 
, for example 25%
Padding-top 2. 
Property is to regulate the content space with the top element 
selector {padding-top: 7px} Value else can measure ... px, ... em or percentage 
, for example 25%
3. padding-left 
This property is to organize the space left by the content element 
selector {padding-left: 7px} Value else can measure ... px, ... em or percentage 
, for example 25%
4. padding-right 
Property to set the right elements to the content space 
selector {padding-right: 7px} Value else can measure ... px, ... em or 
percentage, for example 25%
Padding-bottom 5. 
This property to set the bottom element space with content 
selector {padding-bottom: 7px} Value else can measure ... px, ... em or 
percentage, for example 25%

Property Page Layout

Property Page Layout is to design a layout on a web page, this important property that you need to master for the control of this property then you can create a great web page and must be supported will be the creativity of a person.
HTML does not support CSS will look as good layout, with mastering this Property you can also change the themes or templates on CMS script that da today. 
Property following:
1. The position 
Property is to determine which elements will be placed as well 
to put the parent element. 
Selector {position: absolute} Value else: fixed, relative, static, top, bottom, 
left, right
2. Top 
Property to determine the top of an element is placed. 
Selector {top: absolute} Value else: fixed, relative, static, auto
3. Left 
Property to determine the left side of an element is placed. 
Selector {left: absolute} Value else: fixed, relative, static, auto
4. The bottom 
Property to determine the bottom of an element 
is placed. 
Selector {bottom: absolute} Value else: fixed, relative, static, auto
5. The right 
Property to determine the right part of the element 
is placed. 
Selector {right: absolute} Value else: fixed, relative, static, auto
6. width 
Property to determine the width of an element 
selector {width: 50%} value as: ... px, ... em, auto
7. min-width 
This property is to determine the minimum width of an element 
selector {min-width: 50%} value as: ... px, ... em, auto, none
8. max-width 
This property is to determine the maximum width of an element 
selector {max-width: 50%} value as: ... px, ... em, auto, none
9. height 
Property to determine the height of an element 
selector {height: 50%} value as: ... px, ... em, auto, none
Min-height 10. 
This property is to determine the minimum height of an element 
selector {min-height: 50%} value as: ... px, ... em, auto, none
11. max-height 
Property to determine the maximum height of an element 
selector {max-height: 50%} value as: ... px, ... em, auto, none
Z-index 12. 
This property is to set beberpa elements that overlap 
selector {z-index: auto} value others using integer (integer)
13. visibility 
This property is to organize the elements are displayed in a browser or 
not. 
Selector {visibility: hidden} Value else: visible, collapse
14. overflow 
This property to set the display content that can not be 
accommodated by the element 
selector {overflow: auto} Value Other: hidden, scroll, visible
Float 15. 
This property makes the effects of the elements out of the flow and are placed 
on the left or right of an element 
selector (float: left} Value else: None, right
16. clear 
This property is used in conjunction with the float and here determined whether the 
element can accept a float or not. 
Selector {clear: both} Value are: left, right, none
Clip 17. 
This property is to set small excerpts of an element to be displayed. 
Selector {clip: rect ( 'top', 'right', 'bottom', 'left')} Value else: both

Property Background

This property allows you to adjust the display background or behind a web page as well as setting a background of others such as the background of a font. 
Property following:
1. background 
This property to set the background is widely 
selector {background: bottom} For other values can be: url, none, center, left, 
right, top, no-reapet, reapet, reapet-x, reapet-y, fixed, scroll 
for example the use of value url: 
selector ( background: url ( http://rudydevianto.com/background.png ) 
fixed no-reapet top left}
2. The background-color 
This property to set the background color 
selector {background-color: # 000 033} Value else you can use 
coloring hexadecimal.
3. The background-image 
This property to set the background image of a table, page 
, or other element 
selector (background: url ( http://rudydevianto.com/logo.png )} or the value 
none to not display the image.
4. background-attachment 
This property to set an image is if the mouse scroll 
picture scroll join or remain 
selector {background-attachment: scroll} Value else: fixed
Background-repeat 5. 
Property is to make orders on the image on the 
background to the recurrence because the small size caused the image 
selector {background-repeat: repeat} Value else: no repeat, reapet-x, 
reapeat-y
6. The background-position 
Property to adjust the position of the background image on the page. 
Selector {background-position: top} Value are: left, right, bottom, center

Property Type Elemen

This property to arrange an element in the web. 
Property following:
1. Display 
the Property is to set as the elements will be installed on a 
web page 
selector {display: block} Value else: compact, inline, inline-table, list-item, 
markers, none, run-in, table, table-caption, table -cell, tablecolumn, tablecolumn-group, table-footer-group, table-header-group, table-row, table-rowgroup
2. The white-space 
This property can be used if you use block elements and 
to determine what browser do the white-space ( 
space) 
Selector {white-space: normal} Value are: normal, nowrap, pre
3. list-style-type
Property ini digunakan untuk menentukan suatu Style List Item ( Bullet )
Selektor{ list-style-type:armenian} value lain : cirle, cjk-ideographic, decimal,
decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha,
lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upperalpha, upper-latin, upper-roman
4. The list-style-image 
This property is to create a bullet from the image 
selector {list-style-image: url ( http://rudydevianto.com/bullet.gif )}
5. The list-style-position 
This property to set the bullet position 
selector {list-style-position: inside} Value else: outside
6. list-style
Property ini untuk mengatur style dari list ( bullet ) secara global
Selektor{ list-style-type:armenian} value lain : url, inside, outside, cirle, cjkideographic, decimal, decimal-leading-zero, disc, georgian, hebrew,
hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lowerroman, none, square, upper-alpha, upper-latin, upper-roman
7. border-collapse 
This property to set the table border 
selector {border-collapse: collapse} Value else: separate
8. The border-spacing 
This property is to organize the space in the border 
selector {border-spacing: 0}
9. caption-side 
the Property is to adjust the position of the caption 
selector {caption-side: bottom} Value else: top, left, center, right
Empty-cells 10. 
This property to show or hide a cell in the table 
selector {empty-cells: hide} Value else: show
11. The table-layout 
This property to set the layout of a table whether to adjust or 
fixed. 
Selector {table-layout: auto} Value else: fixed

 

Property Interface

This property to set the display on the web to create a view that is intended for users. 
Property following:
1. cursor 
Property is to set the right cursor display on a user used 
the browser 
selector {cursor: auto} Value else: url, crosshair, default, e-resize, help, 
move, resize ne, n-resize, nw-resize, pointer, se-resize, sw-resize, text, wait, 
w-resize
2. outline 
This property is set the margins of the global element 
selector {outline: # 333333} for the color can use the color 
hexadecimal other or another value: dashed, dotted, double, groove, hidden, 
inset, none, outside, ridge, solid, medium, thin, thick
3. outline-color 
property is set the color of the outline of an element 
selector {outline: # 333333} for the color can use color 
hexadecimal other
4. outline-style 
This property to set the style of the outline of an element 
selector {outline: dashed} value other: dotted, double, groove, hidden, inset, 
none, outside, ridge, solid, medium, thin, thick
5. outline-width 
This property to set the line width how much edge of an element 
selector {outline-width: medium} Value else: thick, thin
Now part of you to try and a lot of practice, because you must in many EXERCISE CSS and more you explore, so you know exactly function function of the elements of Rule CC. 

NB: 
To edit the HTML and CSS files you can use the software include 

Notepad (Windows default) 
Notepad ++ 
CoffeCup 
Macromedia Dreamweaver 8 
, etc.



Please go to the next material:  Advanced Master CSS.


Reviewer: Fajar Yusuf
ItemReviewed: Property in CSS

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

Cobalah untuk memilih Pelajaran Pemrograman dan belajar dari Materi Pertama
EmoticonEmoticon


TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.