Académique Documents
Professionnel Documents
Culture Documents
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
fixed background-attachment Declares the scroll attachment of a background image (to scroll with the page content or be in a fixed position). background-color Declares the background color.
Valid color names, RGB div { background-color:green; } values, hexidecimal notation. div { color:#00FF00; } div { backgroundimage:url(images/img.jpg); } body { background-image:url(img.jpg); }
background-image
background-position
div { background-position:10px 50px; } Declares the position Lengths or percentages of a background for the x and y positions, image. or one of the predefined div { background-position:bottom right; } values: top left top center top right center left center center center right bottom left bottom center bottom right
background-repeat
Declares how and/or repeat repeat-x if a background repeat-y image repeats. no-repeat Used as a shorthand property to set all the background properties at once.
background
div { background:green url(image.jpg) noSeparate values by a repeat fixed center center; } space in the following order (those that are not defined will use inherited div { background:url(image.jpg) fixed; } or default initial values): background-color background-image background-repeat backgroundattachment backgroundposition
Nimbus Infocom
Aura Of Excellence In Computer Education
Border Properties CSS Border Properties Property border-top-color Description Declares the color of the top border. Possible Values
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
Examples
Valid color names, RGB values, hexidecimal notation, div { border-topcolor:green; } or the predefined value transparent. div { border-topcolor:#00FF00; }
border-top-style
none hidden dotted dashed solid double groove ridge inset outset
border-top-width
Declares the width of Lengths or the following predefined values: the top border. thin medium thick Used as a shorthand Separate values by a space in the following order property to set all the (those that are not defined will use inherited or default border-top properties initial values): at once. border-top-width border-top-style border-top-color Declares the color of the right border.
div { border-topwidth:2px; } div { border-topwidth:thin; } div { bordertop:2px solid green; } div { bordertop:thick double #00FF00; }
border-top
border-right-color
Valid color names, RGB values, hexidecimal notation, div { border-rightcolor:green; } or the predefined value transparent. div { border-rightcolor:#00FF00; }
border-right-style
none hidden dotted dashed solid double groove ridge inset outset
border-right-width
Declares the width of Lengths or the following predefined values: the right border. thin medium thick
border-right
div { borderUsed as a shorthand Separate values by a space in the following order property to set all the (those that are not defined will use inherited or default right:2px solid
Nimbus Infocom
Aura Of Excellence In Computer Education
border-right properties initial values): at once. border-right-width border-right-style border-right-color border-bottom-color Declares the color of the bottom border.
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
Valid color names, RGB values, hexidecimal notation, div { borderbottom-color:green; or the predefined value transparent. } div { borderbottomcolor:#00FF00; }
border-bottom-style
none hidden dotted dashed solid double groove ridge inset outset
border-bottom-width Declares the width of Lengths or the following predefined values: the bottom border. thin medium thick border-bottom Used as a shorthand Separate values by a space in the following order property to set all the (those that are not defined will use inherited or default border-bottom initial values): properties at once. border-bottom-width border-bottom-style border-bottom-color Declares the color of the left border.
div { borderbottom-width:2px; } div { borderbottomwidth:thin; } div { borderbottom:2px solid green; } div { borderbottom:thick double #00FF00; }
border-left-color
Valid color names, RGB values, hexidecimal notation, div { border-leftcolor:green; } or the predefined value transparent. div { border-leftcolor:#00FF00; }
border-left-style
none hidden dotted dashed solid double groove ridge inset outset
border-left-width
Declares the width of Lengths or the following predefined values: the left border. thin medium
Nimbus Infocom
Aura Of Excellence In Computer Education
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
thick border-left Used as a shorthand Separate values by a space in the following order property to set all the (those that are not defined will use inherited or default border-left properties initial values): at once. border-left-width border-left-style border-left-color Declares the border color of all four borders at once.
border-color
Valid color names, RGB values, hexidecimal notation, div { bordercolor:green red or the predefined value transparent. blue olive; } Separate the color for each border by a space, declaring the colors for the borders in the following order: border-top-color border-right-color border-bottom-color border-left-color div { bordercolor:green; } div { bordercolor:green red; }
div { bordercolor:green red Undeclared values work as further shorthand notation. blue; } 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. border-style Declares the border style of all four borders at once. none hidden dotted dashed solid double groove ridge inset outset div { borderstyle:solid dotted dashed double; } div { borderstyle:solid; } div { borderstyle:solid dotted; }
Undeclared values work as further shorthand notation. div { borderIf only one style value is declared, all four borders style:solid dotted will use that style. If two styles are declared, the top dashed; } 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. border-width Declares the width of Lengths or the following predefined values: all four borders at once. thin medium thick div { borderwidth:1px 3px 5px 2px; } div { border-
Nimbus Infocom
Aura Of Excellence In Computer Education
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
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. border Used as a shorthand to declare the border properties when all four borders will have the same appearance.
div { border:1px Separate values by a space in the following order (those that are not defined will use inherited or default double green; } initial values): div { border:thin solid #00FF00; } border-width border-style border-color
Classification and Positioning Properties CSS Classification/Positioning Properties Property clear Description Declares the side(s) of an element where left right no previous floating elements are both allowed to be adjacent. none Declares the type of cursor to be displayed. Possible Values Examples div { clear:right; } div { clear:both; }
cursor
URL values, and the following div { cursor:crosshair; } prefefined values: div { cusrsor:url(image.csr); } auto crosshair default div pointer { cusrsor:url(image.csr), move pointer; } e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help none inline block list-item run-in compact marker table inline-table table-row-group table-header-group div { display:none; } div { display:inline; } div { display:marker; }
display
Nimbus Infocom
Aura Of Excellence In Computer Education
table-footer-group table-row table-column-group table-column table-cell table-caption 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
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
visibility
top
Declares the distance that the top content Lengths, percentages, and the div { top:15px; } edge of the element is offset below the predefined value auto. top edge of its containing block. The div { top:2%; } position property of the element must also be set to a value other than static. Declares the distance that the right Lengths, percentages, and the div { right:15px; } content edge of the element is offset to predefined value auto. the left of the right edge of its containing div { right:2%; } block. The position property of the element must also be set to a value other than static. Declares the distance that the bottom Lengths, percentages, and the div { bottom:15px; } content edge of the element is offset predefined value auto. above the bottom edge of its containing div { bottom:2%; } block. The position property of the element must also be set to a value other than static. Declares the distance that the left content Lengths, percentages, and the div { left:15px; } edge of the element is offset to the right predefined value auto. of the left edge of its containing block. div { left:2%; } The position property of the element must also be set to a value other than static. Declares the type of positioning of an element. static relative absolute fixed Shapes, or the predefined value auto. div { position:absolute; } div { position:relative; } div { clip:auto; }
right
bottom
left
position
clip
Declares the shape of a clipped region when the value of the overflow property is set to a value other than visible.
div { clip:rect(2px, 4px, In CSS 2, the only valid shape 7px, 5px); } is a rectangle, using the following format to specify the offset lengths from each side of the box: rect(top, right, bottom, left)
overflow
div { overflow:hidden; }
Nimbus Infocom
Aura Of Excellence In Computer Education
element's box is handled. hidden scroll auto
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
div { overflow:scroll; }
Lengths, percentages, and the span { verticalfollowing predefined values: align:middle; } baseline sub super top text-top middle bottom text-bottom td { vertical-align:top; }
z-index
Declares the stack order of the element. Integer values and the predefined value auto.
Dimension Properties CSS Dimension Properties Property height Description Declares the height of the element. Possible Values Lengths, percentages, and the predefined value auto. Examples div { height:200px; } div { height:50%; } max-height Declares the maximum height of the Lengths, percentages, and the predefined element. value auto. div { max-height:200px; } div { max-height:50%; } min-height Declares the minimum height of the Lengths, percentages, and the predefined element. value auto. div { min-height:200px; } div { min-height:50%; } width Declares the width of the element. Lengths, percentages, and the predefined value auto. div { width:500px; } div { width:75%; } max-width Declares the maximum width of the Lengths, percentages, and the predefined element. value auto. div { maxwidth:500px; } div { max-width:75%; } min-width Declares the minimum width of the Lengths, percentages, and the predefined element. value auto. div { minwidth:500px; } div { min-width:75%; } Font Properties CSS Font Properties Property Description Possible Values Examples
Nimbus Infocom
Aura Of Excellence In Computer Education
font-family
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
Declares the name of the font to Valid font family names or generic family div { fontfamily:Arial; } be used. Previously set in names, i.e. Arial, Verdana, sans-serif, HTML via the face attribute in "Times New Roman", Times, serif, etc. a <font> tag. div { font-family:Arial, Font family names can be separated by a Helvetica, sans-serif; } 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. Declares the size of the font. Lengths (number and unit type i.e. Previously set in HTML via the 1em, 12pt, 10px, 80%) or one of the size attribute in a <font> tag. following predefined values: xx-small x-small small medium large x-large xx-large smaller larger div { font-size:70%; } div { font-size:0.85em; } div { font-size:medium; }
font-size
font-size-adjust Limited browser support: Numeric value Was part of CSS 2, but not in CSS 2.1. This property may return in CSS 3. Declares the aspect value (font size divided by x-height). font-stretch Limited browser support: Was part of CSS 2, but not in CSS 2.1. This property may return in CSS 3. normal wider narrower ultra-condensed extra-condensed Declares the stretch of the font condensed semi-condensed face. semi-expanded expanded extra-expanded ultra-expanded Declares the font style. normal italic oblique
font-style
font-variant
normal small-caps
font-weight
Nimbus Infocom
Aura Of Excellence In Computer Education
200 300 400 500 600 700 800 900 font
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
div { font:italic smallUsed as a shorthand property to Separate values by a space in the caps bold 1em 1.2em Arial declare all of the font properties following order (those that are not at once (except font-size-adjust defined will use inherited or default initial } and font-stretch). values): div { font:bold 0.8em Verdana } font-style font-variant font-weight font-size line-height font-family
Generated Content Properties CSS Generated Content Properties Property content Description Possible Values Examples
Generates content in the String values, URL values, and div:before { content:"some text"; } document in conjunction with the predefined value formats: :before and :after pseudoelements. div:after counter(name) counter(name, list- { content:url(page2.html); } style-type) counters(name, string) counters(name, string, list-styletype) attr(X) open-quote close-quote no-open-quote no-close-quote Integers and the predefined value none. More Information More Information
counter-increment Declares the counter increment for each instance of a selector. counter-reset
Declares the value the counter is Integers and the predefined set to on each instance of a value none. selector. Declares the type of quotation marks to use for quotations and embedded quotations. String values and the predefined value none.
quotes
More Information
List Properties CSS List Properties Property Description Possible Values Examples
Nimbus Infocom
Aura Of Excellence In Computer Education
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 inside outside
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
ol { list-style-type:upperroman; } ul { list-style-type:square; }
ol { list-styleposition:inside; } ul { list-styleposition:outside; }
list-style-image list-style
ul { list-styleimage:url(image.jpg); }
ul { list-style:disc inside Shorthand property to declare Separate values by a space in the url(image.gif); } three list properties at once. following order (those that are not defined will use inherited or default initial values): ol { list-style:upper-roman outside; } list-style-type list-style-position list-style-image Declares the marker offset for Lengths and the predefined value elements with a value of auto. marker set for the display property. li:before { display:marker; marker-offset:5px; }
marker-offset
Margin Properties CSS Margin Properties Property margin-top Description Declares the top margin for the element. Possible Values Lengths, percentages, and the predefined value auto. Examples div { margintop:5px; } div { margintop:15%; } margin-right Declares the right margin for the element. Lengths, percentages, and the predefined value auto. div { marginright:5px; } div { marginright:15%; }
Nimbus Infocom
Aura Of Excellence In Computer Education
margin-bottom Declares the bottom Lengths, percentages, and the predefined value auto. margin for the element.
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
margin-left
margin
Shorthand property Separate values by a space in the following order (those that are used to declare all the not defined will use inherited or default initial values): margin properties at once. margin-top margin-right margin-bottom margin-left 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.
div { margin:5px 12px 4px 7px; } div { margin:5px; } div { margin:5px 10px; } div { margin:5px 7px 4px; }
Outline Properties CSS Outline Properties Property outline-color Description Declares the outline color. Possible Values Examples
Valid color names, RGB values, hexidecimal div { outlinecolor:green; } notation. div { outlinecolor:#00FF00; }
outline-style
Declares the style of the outline. none dotted dashed solid double groove ridge inset outset Lengths or the following predefined values: thin medium thick
div { outlinewidth:2px; } div { outlinewidth:thin; } div { outline:green solid 2px; } div { outline:#00FF00
outline
Used as a shorthand property to Separate values by a space in the following set all the background properties order (those that are not defined will use at once. inherited or default initial values):
Nimbus Infocom
Aura Of Excellence In Computer Education
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
outline-color outline-style outline-width Padding Properties CSS Padding Properties Property padding-top Description Declares the top padding for the element. Possible Values Lengths, percentages, and the predefined value auto.
double thick; }
padding-right
padding-bottom Declares the bottom Lengths, percentages, and the predefined value auto. padding for the element.
padding-left
padding
Shorthand property Separate values by a space in the following order (those that are used to declare all not defined will use inherited or default initial values): the margin properties at once. padding-top padding-right padding-bottom padding-left
div Undeclared values work as further shorthand notation. If only { padding:5px one length value is declared, all four sides will use that length. 10px; } 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 div length. If three lengths are declared, the top side will use the { padding:5px first length, the right and left sides will use the second length, 7px 4px; } and the bottom side will use the third length. Page Properties CSS Page Properties Property marks Description Declares the type of marks to display outside the page box. Possible Values crop cross Examples @page { marks:crop; }
Nimbus Infocom
Aura Of Excellence In Computer Education
orphans page page-break-after Declares the minimum number of lines of a Integers paragraph that must be left at the bottom of a page. Declares the type of page where an element should Indentifiers be displayed. Declares a page break. auto always avoid left right auto always avoid left right auto avoid Lengths, and the following predefined values: auto landscape potrait widows Declares the minimum number of lines of a paragraph that must be left at the top of a page. Integers
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
More Information
page-break-inside size
Declares a page break. Declares the size and orientation of a page box.
@page { widows:2; }
Table Properties CSS Table Properties Property Description collapse separate Possible Values Examples table { bordercollapse:collapse; } table { bordercollapse:separate; } border-spacing Declares the distance separating borders (if border-collapse is separate). Lengths for the horizontal and vertical spacing, table { borderspacing:5px; } separated by a space. If one length is value is declared, that length is table { borderused for both the horizontal and vertical spacing. spacing:5px 10px; } If two lengths are declared, the first one is used for horizontal spacing and the second one is used for vertical spacing. top bottom left right caption { captionside:top; } caption { captionside:right; } table { emptycells:show; }
caption-side
empty-cells
show hide
Nimbus Infocom
Aura Of Excellence In Computer Education
separate).
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
table { emptycells:hide; } table-layout Declares the type of table layout. auto fixed table { tablelayout:auto; } table { tablelayout:fixed; } Text Properties CSS Text Properties Property color Description Possible Values Examples div { color:green; } div { color:rgb(0,255,0); } div { color:#00FF00; }
Declares the color of the text. Valid color names, RGB values, hexidecimal notation. The predefined color names are: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow
direction
Declares the reading direction ltr rtl of the text. ltr = left-to-right rtl = right-to-left
line-height
Declares the distance between Numbers, percentages, lengths, and the lines. predefined value of normal.
letter-spacing
Declares the amount of space A length (in addition to the default between text characters. space) or the predefined value of normal.
Nimbus Infocom
Aura Of Excellence In Computer Education
text-align Declares the horizontal alignment of inline content. left right center justify If 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. text-decoration Declares the text decoration. none underline overline line-through blink
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
text-indent
Declares the indentation of the Lengths and percentages. first line of text.
text-shadow
Declares shadow effects on the A list containg a color followed by text. numeric values (separated by spaces) that specify: 1. 2. 3. 4.
div { text-shadow:olive The color for the shadow effect -3px -4px 5px; } Horizontal distance to the right of the text Vertical distance below the text Blur radius div { texttransform:uppercase; } div { texttransform:lowercase; } div { unicodebidi:embed; } div { unicode-bidi:bidioverride; } div { white-space:pre; } div { whitespace:nowrap; } div { word-spacing:normal; } div { wordspacing:1.5em; }
text-transform
none Declares the capitalization effects on the letters in the text. capitalize uppercase lowercase
unicode-bidi
normal Declares values relating to bidirectional text. May be used embed bidi-override in conjunction with the the direction property. normal pre nowrap
white-space
word-spacing
A length (in addition to the default space) or the predefined value of normal.
Other Properties Other CSS Properties Property Description Possible Values Examples
Nimbus Infocom
Aura Of Excellence In Computer Education
azimuth
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
Declares the angle that Angle values in degrees (deg), or one div { azimuth:90deg; } sound travels to the listener. of the following predefined values: div { azimuth:behind; } left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards Declares an audio cue to play after an element. URL values and the predefined value div { cueafter:url(sound.wav); } none. div { cue-after:none; }
cue-after
cue-before
URL values and the predefined value div { cuebefore:url(sound.wav); } none. div { cue-before:none; }
cue
URL values and the predefined value div { cue:url(sound.wav) none. Separate the values by a space url(sound2.wav); } in the following order: div { cue:url(sound.wav); } cue-before cue-after If only one cue value is declared, it is used for both before and after.
elevation
Declares the elevation of a Angle values in degrees (deg), or one div { elevation:30deg; } sound. of the following predefined values: div { elevation:higher; } below level above higher lower Declares the amount of time to pause after an element. Declares the amount of time to pause before an element. Shorthand proerty to set both pause values at once. Time in milliseconds (ms) or percentages. div { pause-after:100ms; } div { pause-after:20%; } Time in milliseconds (ms) or percentages. div { pause-before:100ms; } div { pause-before:20%; } Separate the values by a space in the div { pause:200ms 100ms; } following order: div { pause:100ms; } pause-before pause-after
pause-after
pause-before
pause
Nimbus Infocom
Aura Of Excellence In Computer Education
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
If only one pause value is declared, it is used for both before and after. pitch Declares the average speaking pitch of a voice. Frequencies in hertz (Hz) or the following predefined values: x-low low medium high x-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). div { pitch-range:50; } div { pitch-range:99; } div { pitch:120Hz; } div { pitch:high; }
play-during
URL value, followed by one or more div { playof the following keywords, separated during:url(music.wav); } by spaces: div { playduring:url(music.wav) mix repeat; } repeat Alternatley, one of the following keywords: auto none div { play-during:none; }
richness
Declares the richness of the Numeric values between 0 and 100 div { richness:50; } voice in spoken text. (lower values have less richness and higher values have more richness). div { richness:0; } Declares if/how text is spoken. normal none spell-out once always div { speak:none; } div { speak:spell-out; } th { speak-header:once; } th { speak-header:always; }
speak
speak-header
speak-numeral
code none
speech-rate
Declares the speech rate of A number indicating the number of spoken text. words per minute, or one of the following predefined values:
Nimbus Infocom
Aura Of Excellence In Computer Education
C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH
x-slow slow medium fast x-fast faster slower 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). Generic or specific voice family names. Numbers between 0 and 100, percentages, or one of the following predefined values: silent x-soft soft medium loud x-loud div { stress:50; } div { stress:0; } More Information div { volume:50; } div { volume:silent; }
voice-family volume
Declares the voice family of spoken text. Declares the median volume.