Creative IT Blog Just another WordPress site
Related Articles
CSS Properties and Description:
নিচে CSS Prooerties এর Description , Examples এবং কি কি Value আমরা Use করতে পারি সেগুলা দেয়া হল-
Background Properties
| Property | Description | Possible Values | Examples |
| background-attachment | Declares the attachment of a background image (to scroll with the page content or be in a fixed position). | fixed scroll |
.one { background-attachment:fixed; }.one { background-attachment:scroll; } |
| background-color | Declares the background color. | Valid color names, RGB values, hexidecimal notation. | .one { background-color:green; }.one { color:#00FF00; } |
| background-image | Declares the background image of an element. | URL values. | .one { background-image:url(images/img.jpg); }body { background-image:url(img.jpg); } |
| background-position | Declares the position of a background image. | Lengths or percentages for the x and y positions, or one of the predefined values:
top left |
.one { background-position:10px 50px; }.one { background-position:bottom right; } |
| background-repeat | Declares how and/or if a background image repeats. | repeat repeat-x repeat-y no-repeat |
.one { background-repeat:repeat-x; }.one { background-repeat:no-repeat; } |
| background | Used as a shorthand property to set all the background properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
background-color |
.one { background:green url(image.jpg) no-repeat fixed center center; }.one { background:url(image.jpg) fixed; } |
Border Properties
| Property | Description | Possible Values | Examples |
| border-top-color | Declares the color of the top border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | .one { border-top-color:green; }.one { border-top-color:#00FF00; } |
| border-top-style | Declares the style of the top border. | none hidden dotted dashed solid double groove ridge inset outset |
.one { border-top-style:solid; }.one { border-top-style:inset; } |
| border-top-width | Declares the width of the top border. | Lengths or the following predefined values:
thin |
.one { border-top-width:2px; }.one { border-top-width:thin; } |
| border-top | Used as a shorthand property to set all the border-top properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-top-width |
.one { border-top:2px solid green; }.one { border-top:thick double #00FF00; } |
| border-right-color | Declares the color of the right border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | .one { border-right-color:green; }.one { border-right-color:#00FF00; } |
| border-right-style | Declares the style of the right border. | none hidden dotted dashed solid double groove ridge inset outset |
.one { border-right-style:solid; }.one { border-right-style:inset; } |
| border-right-width | Declares the width of the right border. | Lengths or the following predefined values:
thin |
.one { border-right-width:2px; }.one { border-right-width:thin; } |
| border-right | Used as a shorthand property to set all the border-right properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-right-width |
.one { border-right:2px solid green; }.one { border-right:thick double #00FF00; } |
| border-bottom-color | Declares the color of the bottom border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | .one { border-bottom-color:green; }.one { border-bottom-color:#00FF00; } |
| border-bottom-style | Declares the style of the bottom border. | none hidden dotted dashed solid double groove ridge inset outset |
.one { border-bottom-style:solid; }.one { border-bottom-style:inset; } |
| border-bottom-width | Declares the width of the bottom border. | Lengths or the following predefined values:
thin |
.one { border-bottom-width:2px; }.one { border-bottom-width:thin; } |
| border-bottom | Used as a shorthand property to set all the border-bottom properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-bottom-width |
.one { border-bottom:2px solid green; }.one { border-bottom:thick double #00FF00; } |
| border-left-color | Declares the color of the left border. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. | .one { border-left-color:green; }.one { border-left-color:#00FF00; } |
| border-left-style | Declares the style of the left border. | none hidden dotted dashed solid double groove ridge inset outset |
.one { border-left-style:solid; }.one { border-left-style:inset; } |
| border-left-width | Declares the width of the left border. | Lengths or the following predefined values:
thin |
.one { border-left-width:2px; }.one { border-left-width:thin; } |
| border-left | Used as a shorthand property to set all the border-left properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-left-width |
.one { border-left:2px solid green; }.one { border-left:thick double #00FF00; } |
| border-color | Declares the border color of all four borders at once. | Valid color names, RGB values, hexidecimal notation, or the predefined value transparent.Separate the color for each border by a space, declaring the colors for the borders in the following order:
border-top-color Undeclared values work as further shorthand notation. If only one color value is declared, all four borders will use that color. If two colors are declared, the top and bottom borders will use the first color while the right and left borders will use the second color. If three colors are declared, the top border will use the first color, the right and left borders will use the second color, and the bottom border will use the third color. |
.one { border-color:green red blue olive; }.one { border-color:green; }
.one { border-color:green red; } .one { border-color:green red blue; } |
| border-style | Declares the border style of all four borders at once. | none hidden dotted dashed solid double groove ridge inset outsetUndeclared values work as further shorthand notation. If only one style value is declared, all four borders will use that style. If two styles are declared, the top and bottom borders will use the first style while the right and left borders will use the second style. If three styles are declared, the top border will use the first style, the right and left borders will use the second style, and the bottom border will use the third style. |
.one { border-style:solid dotted dashed double; }.one { border-style:solid; }
.one { border-style:solid dotted; } .one { border-style:solid dotted dashed; } |
| border-width | Declares the width of all four borders at once. | Lengths or the following predefined values:
thin Undeclared values work as further shorthand notation. If only one width value is declared, all four borders will use that width. If two widths are declared, the top and bottom borders will use the first width while the right and left borders will use the second width. If three widths are declared, the top border will use the first width, the right and left borders will use the second width, and the bottom border will use the third width. |
.one { border-width:1px 3px 5px 2px; }.one { border-width:thin; }
.one { border-width:2px 4px; } .one { border-width:2px 4px 5px; } |
| border | Used as a shorthand to declare the border properties when all four borders will have the same appearance. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
border-width |
.one { border:1px double green; }.one { border:thin solid #00FF00; } |
Classification and Positioning Properties
| Property | Description | Possible Values | Examples |
| clear | Declares the side(s) of an element where no previous floating elements are allowed to be adjacent. | left right both none |
.one { clear:right; }.one { clear:both; } |
| cursor | Declares the type of cursor to be displayed. | URL values, and the following prefefined values:
auto |
.one { cursor:crosshair; }.one { cusrsor:url(image.csr); }
.one { cusrsor:url(image.csr), pointer; } |
| display | Declares if/how the element displays. | none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption |
.one { display:none; }.one { display:inline; }
.one { display:marker; } |
| float | Declares whether a box should float to the left or right of other content, or whether it should not be floated at all. | left right none |
.one { float:left; }.one { float:right; } |
| visibility | Declares the visibility of boxes generated by an element. | visible hidden collapse |
.one { visibility:visible; }.one { visibility:hidden; } |
| top | Declares the distance that the top content edge of the element is offset below the top edge of its containing block. The position property of the element must also be set to a value other than static. | Lengths, percentages, and the predefined value auto. | .one { top:15px; }.one { top:2%; } |
| right | Declares the distance that the right content edge of the element is offset to the left of the right edge of its containing block. The position property of the element must also be set to a value other thanstatic. | Lengths, percentages, and the predefined value auto. | .one { right:15px; }.one { right:2%; } |
| bottom | Declares the distance that the bottom content edge of the element is offset above the bottom edge of its containing block. The position property of the element must also be set to a value other thanstatic. | Lengths, percentages, and the predefined value auto. | .one { bottom:15px; }.one { bottom:2%; } |
| left | Declares the distance that the left content edge of the element is offset to the right of the left edge of its containing block. The position property of the element must also be set to a value other thanstatic. | Lengths, percentages, and the predefined value auto. | .one { left:15px; }.one { left:2%; } |
| position | Declares the type of positioning of an element. | static relative absolute fixed |
.one { position:absolute; }.one { position:relative; } |
| clip | Declares the shape of a clipped region when the value of the overflow property is set to a value other thanvisible. | Shapes, or the predefined valueauto.In CSS 2, the only valid shape is a rectangle, using the following format to specify the offset lengths from each side of the box:
rect(top, right, bottom, left) |
.one { clip:auto; }.one { clip:rect(2px, 4px, 7px, 5px); } |
| overflow | Declares how content that overflows the element’s box is handled. | visible hidden scroll auto |
.one { overflow:hidden; }.one { overflow:scroll; } |
| vertical-align | Declares the vertical alignment of an inline-level element or a table cell. | Lengths, percentages, and the following predefined values:
baseline |
span { vertical-align:middle; }td { vertical-align:top; } |
| z-index | Declares the stack order of the element. | Integer values and the predefined value auto. | .one { z-index:2; }.one { z-index:auto; } |
Dimension Properties
| Property | Description | Possible Values | Examples |
| height | Declares the height of the element. | Lengths, percentages, and the predefined value auto. | .one { height:200px; }.one { height:50%; } |
| max-height | Declares the maximum height of the element. | Lengths, percentages, and the predefined value auto. | .one { max-height:200px; }.one { max-height:50%; } |
| min-height | Declares the minimum height of the element. | Lengths, percentages, and the predefined value auto. | .one { min-height:200px; }.one { min-height:50%; } |
| width | Declares the width of the element. | Lengths, percentages, and the predefined value auto. | .one { width:500px; }.one { width:75%; } |
| max-width | Declares the maximum width of the element. | Lengths, percentages, and the predefined value auto. | .one { max-width:500px; }.one { max-width:75%; } |
| min-width | Declares the minimum width of the element. | Lengths, percentages, and the predefined value auto. | .one { min-width:500px; }.one { min-width:75%; } |
Font Properties
| Property | Description | Possible Values | Examples |
| font-family | Declares the name of the font to be used. Previously set in HTML via the face attribute in a <font> tag. | Valid font family names or generic family names, i.e. Arial, Verdana, sans-serif, “Times New Roman”, Times, serif, etc.Font family names can be separated by a comma in the same declaration to allow additional and/or generic family names to be used if the prefereed font is unable to be displayed. | .one { font-family:Arial; }.one { font-family:Arial, Helvetica, sans-serif; } |
| font-size | Declares the size of the font. Previously set in HTML via the size attribute in a <font> tag. | Lengths (number and unit type— i.e. 1em, 12pt,10px, 80%) or one of the following predefined values:
xx-small |
.one { font-size:70%; }.one { font-size:0.85em; }
.one { font-size:medium; } |
| font-size-adjust | Limited browser support: Was part of CSS 2, but not in CSS 2.1. This property may return in CSS 3.Declares the aspect value(font size .oneided by x-height). | Numeric value | .one { font-size-adjust:0.54; }.one { font-size-adjust:0.46; } |
| font-stretch | Limited browser support: Was part of CSS 2, but not in CSS 2.1. This property may return in CSS 3.Declares the stretch of the font face. | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
.one { font-stretch:narrower; }.one { font-stretch:ultra-expanded; } |
| font-style | Declares the font style. | normal italic oblique |
.one { font-style:italic; }.one { font-style:oblique; } |
| font-variant | Declares the font variant. | normal small-caps |
.one { font-variant:normal; }.one { font-variant:small-caps; } |
| font-weight | Declares the font weight (lightness or boldness) | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
.one { font-weight:bolder; }.one { font-weight:200; } |
| font | Used as a shorthand property to declare all of the font properties at once (except font-size-adjust and font-stretch). | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
font-style |
.one { font:italic small-caps bold 1em 1.2em Arial }.one { font:bold 0.8em Verdana } |
Generated Content Properties
| Property | Description | Possible Values | Examples |
| content | Generates content in the document in conjunction with the :before and :afterpseudo-elements. | String values, URL values, and predefined value formats:
counter(name) |
.one:before { content:”some text”; }.one:after { content:url(page2.html); } |
| counter-increment | Declares the counter increment for each instance of a selector. | Integers and the predefined value none. | More Information |
| counter-reset | Declares the value the counter is set to on each instance of a selector. | Integers and the predefined value none. | More Information |
| quotes | Declares the type of quotation marks to use for quotations and embedded quotations. | String values and the predefined value none. | More Information |
List Properties
| Property | Description | Possible Values | Examples |
| list-style-type | Declares the type of list marker used. | disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
ol { list-style-type:upper-roman; }ul { list-style-type:square; } |
| list-style-position | Declares the position of the list marker. | inside outside |
ol { list-style-position:inside; }ul { list-style-position:outside; } |
| list-style-image | Declares an image to be used as the list marker. | URL values. | ul { list-style-image:url(image.jpg); } |
| list-style | Shorthand property to declare three list properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
list-style-type |
ul { list-style:disc inside url(image.gif); }ol { list-style:upper-roman outside; } |
| marker-offset | Declares the marker offset for elements with a value ofmarker set for the displayproperty. | Lengths and the predefined value auto. | li:before { display:marker; marker-offset:5px; } |
Margin Properties
| Property | Description | Possible Values | Examples |
| margin-top | Declares the top margin for the element. | Lengths, percentages, and the predefined value auto. | .one { margin-top:5px; }.one { margin-top:15%; } |
| margin-right | Declares the right margin for the element. | Lengths, percentages, and the predefined value auto. | .one { margin-right:5px; }.one { margin-right:15%; } |
| margin-bottom | Declares the bottom margin for the element. | Lengths, percentages, and the predefined value auto. | .one { margin-bottom:5px; }.one { margin-bottom:15%; } |
| margin-left | Declares the left margin for the element. | Lengths, percentages, and the predefined value auto. | .one { margin-left:5px; }.one { margin-left:15%; } |
| margin | Shorthand property used to declare all the margin properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
margin-top Undeclared values work as further shorthand notation. If only one length value is declared, all four margins will use that length. If two lengths are declared, the top and bottom margins will use the first length while the right and left margins will use the second length. If three lengths are declared, the top margin will use the first length, the right and left margins will use the second length, and the bottom margin will use the third length. |
.one { margin:5px 12px 4px 7px; }.one { margin:5px; }
.one { margin:5px 10px; } .one { margin:5px 7px 4px; } |
Outline Properties
| Property | Description | Possible Values | Examples |
| outline-color | Declares the outline color. | Valid color names, RGB values, hexidecimal notation. | .one { outline-color:green; }.one { outline-color:#00FF00; } |
| outline-style | Declares the style of the outline. | none dotted dashed solid double groove ridge inset outset |
.one { outline-style:solid; }.one { outline-style:inset; } |
| outline-width | Declares the width of the outline. | Lengths or the following predefined values:
thin |
.one { outline-width:2px; }.one { outline-width:thin; } |
| outline | Used as a shorthand property to set all the background properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
outline-color |
.one { outline:green solid 2px; }.one { outline:#00FF00 double thick; } |
Padding Properties
| Property | Description | Possible Values | Examples |
| padding-top | Declares the top padding for the element. | Lengths, percentages, and the predefined value auto. | .one { padding-top:5px; }.one { padding-top:15%; } |
| padding-right | Declares the right padding for the element. | Lengths, percentages, and the predefined value auto. | .one { padding-right:5px; }.one { padding-right:15%; } |
| padding-bottom | Declares the bottom padding for the element. | Lengths, percentages, and the predefined value auto. | .one { padding-bottom:5px; }.one { padding-bottom:15%; } |
| padding-left | Declares the left padding for the element. | Lengths, percentages, and the predefined value auto. | .one { padding-left:5px; }.one { padding-left:15%; } |
| padding | Shorthand property used to declare all the margin properties at once. | Separate values by a space in the following order (those that are not defined will use inherited or default initial values):
padding-top Undeclared values work as further shorthand notation. If only one length value is declared, all four sides will use that length. If two lengths are declared, the top and bottom sides will use the first length while the right and left sides will use the second length. If three lengths are declared, the top side will use the first length, the right and left sides will use the second length, and the bottom side will use the third length. |
.one { padding:5px 12px 4px 7px; }.one { padding:5px; }
.one { padding:5px 10px; } .one { padding:5px 7px 4px; } |
Page Properties
| Property | Description | Possible Values | Examples |
| marks | Declares the type of marks to display outside the page box. | crop cross |
@page { marks:crop; } |
| orphans | Declares the minimum number of lines of a paragraph that must be left at the bottom of a page. | Integers | @page { orphans:2; } |
| page | Declares the type of page where an element should be displayed. | Indentifiers | More Information |
| page-break-after | Declares a page break. | auto always avoid left right |
More Information |
| page-break-before | Declares a page break. | auto always avoid left right |
More Information |
| page-break-inside | Declares a page break. | auto avoid |
More Information |
| size | Declares the size and orientation of a page box. | Lengths, and the following predefined values:
auto |
More Information |
| widows | Declares the minimum number of lines of a paragraph that must be left at the top of a page. | Integers | @page { widows:2; } |
Table Properties
| Property | Description | Possible Values | Examples |
| border-collapse | Declares the way borders are displayed. | collapse separate |
table { border-collapse:collapse; }table { border-collapse:separate; } |
| border-spacing | Declares the distance separating borders (ifborder-collapse isseparate). | Lengths for the horizontal and vertical spacing, separated by a space.If one length is value is declared, that length is used for both the horizontal and vertical spacing. If two lengths are declared, the first one is used for horizontal spacing and the second one is used for vertical spacing. | table { border-spacing:5px; }table { border-spacing:5px 10px; } |
| caption-side | Declares where the table caption is displayed in relation to the table. | top bottom left right |
caption { caption-side:top; }caption { caption-side:right; } |
| empty-cells | Declares the way empty cells are displayed (if border-collapse isseparate). | show hide |
table { empty-cells:show; }table { empty-cells:hide; } |
| table-layout | Declares the type of table layout. | auto fixed |
table { table-layout:auto; }table { table-layout:fixed; } |
Text Properties
| Property | Description | Possible Values | Examples |
| color | Declares the color of the text. | Valid color names, RGB values, hexidecimal notation.The predefined color names are:
aqua |
.one { color:green; }.one {color:rgb(0,255,0); }
.one { color:#00FF00; } |
| direction | Declares the reading direction of the text. | ltr rtlltr = left-to-right rtl = right-to-left |
.one { direction:ltr; }.one { direction:rtl; } |
| line-height | Declares the distance between lines. | Numbers, percentages, lengths, and the predefined value of normal. | .one { line-height:normal; }.one { line-height:2em; }
.one { line-height:125%; } |
| letter-spacing | Declares the amount of space between text characters. | A length (in addition to the default space) or the predefined value of normal. | .one { letter-spacing:normal; }.one { letter-spacing:5px; }
.one { letter-spacing:-1px; } |
| text-align | Declares the horizontal alignment of inline content. | left right center justifyIf used on a set of table cells, this property can be given a string value to which the text of each row of the column will be aligned. |
.one { text-align:center; }.one { text-align:right; }
td { text-align:”.”; } |
| text-decoration | Declares the text decoration. | none underline overline line-through blink |
.one { text-decoration:none; }.one { text-decoration:underline; } |
| text-indent | Declares the indentation of the first line of text. | Lengths and percentages. | .one { text-indent:12px; }.one { text-indent:2%; } |
| text-shadow | Declares shadow effects on the text. | A list containg a color followed by numeric values (separated by spaces) that specify:
|
.one { text-shadow:green 2px 2px 7px; }.one { text-shadow:olive -3px -4px 5px; } |
| text-transform | Declares the capitalization effects on the letters in the text. | none capitalize uppercase lowercase |
.one { text-transform:uppercase; }.one { text-transform:lowercase; } |
| unicode-bidi | Declares values relating to bidirectional text. May be used in conjunction with the thedirection property. | normal embed bidi-override |
.one { unicode-bidi:embed; }.one { unicode-bidi:bidi-override; } |
| white-space | Declares how white space is handled in an element. | normal pre nowrap |
.one { white-space:pre; }.one { white-space:nowrap; } |
| word-spacing | Declares the space between words in the text. | A length (in addition to the default space) or the predefined value of normal. | .one { word-spacing:normal; }.one { word-spacing:1.5em; } |
Other Properties
| Property | Description | Possible Values | Examples |
| azimuth | Declares the angle that sound travels to the listener. | Angle values in degrees (deg), or one of the following predefined values:
left-side |
.one { azimuth:90deg; }.one { azimuth:behind; } |
| cue-after | Declares an audio cue to play after an element. | URL values and the predefined value none. | .one { cue-after:url(sound.wav); }.one { cue-after:none; } |
| cue-before | Declares an audio cue to play before an element. | URL values and the predefined value none. | .one { cue-before:url(sound.wav); }.one { cue-before:none; } |
| cue | Shorthand proerty to set both cue values at once. | URL values and the predefined value none. Separate the values by a space in the following order:
cue-before If only one cue value is declared, it is used for both before and after. |
.one { cue:url(sound.wav) url(sound2.wav); }.one { cue:url(sound.wav); } |
| elevation | Declares the elevation of a sound. | Angle values in degrees (deg), or one of the following predefined values:
below |
.one { elevation:30deg; }.one { elevation:higher; } |
| pause-after | Declares the amount of time to pause after an element. | Time in milliseconds (ms) or percentages. | .one { pause-after:100ms; }.one { pause-after:20%; } |
| pause-before | Declares the amount of time to pause before an element. | Time in milliseconds (ms) or percentages. | .one { pause-before:100ms; }.one { pause-before:20%; } |
| pause | Shorthand proerty to set both pause values at once. | Separate the values by a space in the following order:
pause-before If only one pause value is declared, it is used for both before and after. |
.one { pause:200ms 100ms; }.one { pause:100ms; } |
| pitch | Declares the average speaking pitch of a voice. | Frequencies in hertz (Hz) or the following predefined values:
x-low |
.one { pitch:120Hz; }.one { pitch:high; } |
| pitch-range | Declares a change in the pitch range of a voice. | Number values between 0 and 100 (lower values indicate a flat voice while higher values indicate an animated voice). | .one { pitch-range:50; }.one { pitch-range:99; } |
| play-during | Declares a background sound to be played while the current element is spoken. | URL value, followed by one or more of the following keywords, separated by spaces:
mix Alternatley, one of the following keywords: auto |
.one { play-during:url(music.wav); }.one { play-during:url(music.wav) repeat; }
.one { play-during:none; } |
| richness | Declares the richness of the voice in spoken text. | Numeric values between 0 and 100 (lower values have less richness and higher values have more richness). | .one { richness:50; }.one { richness:0; } |
| speak | Declares if/how text is spoken. | normal none spell-out |
.one { speak:none; }.one { speak:spell-out; } |
| speak-header | Declares how often table header cells are spoken. | once always |
th { speak-header:once; }th { speak-header:always; } |
| speak-numeral | Declares how numerals are spoken. | digits continuous |
.one { speak-numeral:digits; }.one { speak-numeral:continuous; } |
| speak-punctuation | Declares how punctuation is spoken. | code none |
.one { speak-punctuation:code; }.one { speak-punctuation:none; } |
| speech-rate | Declares the speech rate of spoken text. | A number indicating the number of words per minute, or one of the following predefined values:
x-slow |
.one { speech-rate:50; }.one { speech-rate:medium; } |
| stress | Declares the stress of the voice on spoken text. | Numeric values between 0 and 100 (lower values have less stress and higher values have more stress). | .one { stress:50; }.one { stress:0; } |
| voice-family | Declares the voice family of spoken text. | Generic or specific voice family names. | More Information |
| volume | Declares the median volume. | Numbers between 0 and 100, percentages, or one of the following predefined values:
silent |
.one { volume:50; }.one { volume:silent; } |
(collected )
