Vous êtes sur la page 1sur 18

Nimbus Infocom

Aura Of Excellence In Computer Education


CSS Properties List A listing of the CSS properties Background Properties CSS Background Properties Property Description Possible Values

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH

Examples div { background-attachment:fixed; } div { background-attachment:scroll; }

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

Declares the URL values. background image of an element.

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.

div { background-repeat:repeat-x; } div { background-repeat:no-repeat; }

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

Topic : CSS Properties Notes By NAGESH KUMAR

Page 1 Contact No: 09928088743

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

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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

Declares the style of the top border.

none hidden dotted dashed solid double groove ridge inset outset

div { border-topstyle:solid; } div { border-topstyle:inset; }

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

Declares the style of the right border.

none hidden dotted dashed solid double groove ridge inset outset

div { border-rightstyle:solid; } div { border-rightstyle:inset; }

border-right-width

Declares the width of Lengths or the following predefined values: the right border. thin medium thick

div { border-rightwidth:2px; } div { border-rightwidth:thin; }

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

Topic : CSS Properties Notes By NAGESH KUMAR

Page 2 Contact No: 09928088743

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.

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH

green; } div { borderright:thick double #00FF00; }

Valid color names, RGB values, hexidecimal notation, div { borderbottom-color:green; or the predefined value transparent. } div { borderbottomcolor:#00FF00; }

border-bottom-style

Declares the style of the bottom border.

none hidden dotted dashed solid double groove ridge inset outset

div { borderbottom-style:solid; } div { borderbottom-style:inset; }

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

Declares the style of the left border.

none hidden dotted dashed solid double groove ridge inset outset

div { border-leftstyle:solid; } div { border-leftstyle:inset; }

border-left-width

Declares the width of Lengths or the following predefined values: the left border. thin medium

div { border-leftwidth:2px; } div { border-left-

Topic : CSS Properties Notes By NAGESH KUMAR

Page 3 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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.

width:thin; } div { borderleft:2px solid green; } div { borderleft:thick double #00FF00; }

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-

Topic : CSS Properties Notes By NAGESH KUMAR

Page 4 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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.

width:thin; } div { borderwidth:2px 4px; } div { borderwidth:2px 4px 5px; }

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

Declares if/how the element displays.

Topic : CSS Properties Notes By NAGESH KUMAR

Page 5 Contact No: 09928088743

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

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH

div { float:left; } div { float:right; } div { visibility:visible; } div { visibility:hidden; }

visibility

Declares the visibility of boxes generated visible by an element. hidden collapse

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

Declares how content that overflows the visible

div { overflow:hidden; }

Topic : CSS Properties Notes By NAGESH KUMAR

Page 6 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education
element's box is handled. hidden scroll auto

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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; }

vertical-align Declares the vertical alignment of an inline-level element or a table cell.

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.

div { z-index:2; } div { z-index: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

Topic : CSS Properties Notes By NAGESH KUMAR

Page 7 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education
font-family

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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

div { font-sizeadjust:0.54; } div { font-sizeadjust:0.46; }

div { fontstretch:narrower; } div { font-stretch:ultraexpanded; }

font-style

div { fontstyle:italic; } div { font-style:oblique; }

font-variant

Declares the font variant.

normal small-caps

div { fontvariant:normal; } div { font-variant:smallcaps; }

font-weight

Declares the font weight (lightness or boldness)

normal bold bolder lighter 100

div { font-weight:bolder; } div { font-weight:200; }

Topic : CSS Properties Notes By NAGESH KUMAR

Page 8 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education
200 300 400 500 600 700 800 900 font

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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

Topic : CSS Properties Notes By NAGESH KUMAR

Page 9 Contact No: 09928088743

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

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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; }

list-style-position Declares the position of the list marker.

ol { list-styleposition:inside; } ul { list-styleposition:outside; }

list-style-image list-style

Declares an image to be used URL values. as the list marker.

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%; }

Topic : CSS Properties Notes By NAGESH KUMAR

Page 10 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education
margin-bottom Declares the bottom Lengths, percentages, and the predefined value auto. margin for the element.

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH

div { marginbottom:5px; } div { marginbottom:15%; }

margin-left

Declares the left margin for the element.

Lengths, percentages, and the predefined value auto.

div { marginleft:5px; } div { marginleft:15%; }

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 { outlinestyle:solid; } div { outlinestyle:inset; }

outline-width Declares the width of the outline.

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):

Topic : CSS Properties Notes By NAGESH KUMAR

Page 11 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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; }

Examples div { paddingtop:5px; } div { paddingtop:15%; }

padding-right

Declares the right padding for the element.

Lengths, percentages, and the predefined value auto.

div { paddingright:5px; } div { paddingright:15%; }

padding-bottom Declares the bottom Lengths, percentages, and the predefined value auto. padding for the element.

div { paddingbottom:5px; } div { paddingbottom:15%; }

padding-left

Declares the left padding for the element.

Lengths, percentages, and the predefined value auto.

div { paddingleft:5px; } div { paddingleft:15%; }

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 { padding:5px 12px 4px 7px; } div { padding:5px; }

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; }

Topic : CSS Properties Notes By NAGESH KUMAR

Page 12 Contact No: 09928088743

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

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH

@page { orphans:2; } More Information More Information

page-break-before Declares a page break.

More Information

page-break-inside size

Declares a page break. Declares the size and orientation of a page box.

More Information More Information

@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; }

border-collapse Declares the way borders are displayed.

caption-side

Declares where the table caption is displayed in relation to the table.

empty-cells

Declares the way empty cells are displayed (if border-collapse is

show hide

Topic : CSS Properties Notes By NAGESH KUMAR

Page 13 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education
separate).

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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

div { direction:ltr; } div { direction:rtl; }

line-height

Declares the distance between Numbers, percentages, lengths, and the lines. predefined value of normal.

div { lineheight:normal; } div { line-height:2em; } div { line-height:125%; }

letter-spacing

Declares the amount of space A length (in addition to the default between text characters. space) or the predefined value of normal.

div { letterspacing:normal; } div { letterspacing:5px; } div { letter-spacing:-1px; }

Topic : CSS Properties Notes By NAGESH KUMAR

Page 14 Contact No: 09928088743

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

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH

div { text-align:center; } div { text-align:right; } td { text-align:"."; }

div { textdecoration:none; } div { textdecoration:underline; } div { text-indent:12px; } div { text-indent:2%; }

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:green 2px 2px 7px; }

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

Declares how white space is handled in an element.

word-spacing

Declares the space between words in the text.

A length (in addition to the default space) or the predefined value of normal.

Other Properties Other CSS Properties Property Description Possible Values Examples

Topic : CSS Properties Notes By NAGESH KUMAR

Page 15 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education
azimuth

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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

Declares an audio cue to play before an element.

URL values and the predefined value div { cuebefore:url(sound.wav); } none. div { cue-before:none; }

cue

Shorthand proerty to set both cue values at once.

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

Topic : CSS Properties Notes By NAGESH KUMAR

Page 16 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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

Declares a background sound to be played while the current element is spoken.

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

Declares how often table header cells are spoken.

speak-numeral

Declares how numerals are digits continuous spoken.

div { speaknumeral:digits; } div { speaknumeral:continuous; }

speak-punctuation Declares how punctuation is spoken.

code none

div { speakpunctuation:code; } div { speakpunctuation: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:

div { speech-rate:50; } div { speech-rate:medium; }

Topic : CSS Properties Notes By NAGESH KUMAR

Page 17 Contact No: 09928088743

Nimbus Infocom
Aura Of Excellence In Computer Education

7, Daan Bari Jawahar Nagar Kota (Rajasthan)


Mobile No. : 09928088743

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.

Topic : CSS Properties Notes By NAGESH KUMAR

Page 18 Contact No: 09928088743

Vous aimerez peut-être aussi