Category: CSS Reference

CSS page-break-inside Property

Avoid page break inside paragraphs, across pages (when printing): @media print { p {page-break-inside: avoid;} } Definition and Usage The page-break-inside property sets whether a page break is allowed inside a specified element. Note: You cannot use this property on absolutely positioned elements. Default value: auto Inherited: no Animatable: no. Read about animatable Version: CSS2 JavaScript syntax: object.style.pageBreakInside=”avoid” CSS Syntax page-break-inside: […]

CSS page-break-before Property

Always insert a page break before each <h1> element (when printing): @media print { h1 {page-break-before: always;} } Definition and Usage The page-break-before property sets whether a page break should occur BEFORE a specified element. Note: You cannot use this property on an empty <div> or on absolutely positioned elements. Default value: auto Inherited: no Animatable: no. Read about animatable Version: […]

CSS page-break-after Property

Always insert a page break after each <footer> element (when printing): @media print { footer {page-break-after: always;} } Definition and Usage The page-break-after property sets whether a page break should occur AFTER a specified element. Note: You cannot use this property on an empty <div> or on absolutely positioned elements. Default value: auto Inherited: no Animatable: no. Read about animatable Version: […]

CSS font Property

Specify all the font properties in one declaration: p.ex1 { font: 15px arial, sans-serif; } p.ex2 { font: italic bold 12px/30px Georgia, serif; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The font property is a shorthand for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties. The font-size and font-family values are […]

CSS font-family Property

Specify the font for a paragraph: p { font-family: “Times New Roman”, Georgia, Serif; } Try it Yourself » Definition and Usage The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. […]

CSS line-height Property

Set the line height in percent: p.small { line-height: 90%; }p.big { line-height: 200%; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The line-height property specifies the line height. Note: Negative values are not allowed. Default value: normal Inherited: yes Animatable: yes. Read about animatable – Try it Version: CSS1 JavaScript syntax: object.style.lineHeight=”30px” Try it CSS Syntax line-height: normal|number|length|initial|inherit; […]

CSS font-size Property

Set the font size for different HTML elements: h1 { font-size: 250%; }h2 { font-size: 200%; }p { font-size: 100%; } Try it Yourself » Definition and Usage The font-size property sets the size of a font. Default value: medium Inherited: yes Animatable: yes. Read about animatable – Try it Version: CSS1 JavaScript syntax: object.style.fontSize=”14px” Try it CSS Syntax font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; Property Values Value Description medium Sets […]

CSS font-weight Property

Set different font weight for three paragraphs: p.normal { font-weight: normal; }p.thick { font-weight: bold; }p.thicker { font-weight: 900; } Try it Yourself » Definition and Usage The font-weight property sets how thick or thin characters in text should be displayed. Default value: normal Inherited: yes Animatable: yes. Read about animatableTry it Version: CSS1 JavaScript syntax: object.style.fontWeight=”bold”Try it Browser Support The numbers in […]

CSS font-variant Property

Set a paragraph to a small-caps font: p.small { font-variant: small-caps; } Try it Yourself » Definition and Usage In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text. The font-variant property specifies whether or not […]

CSS font-style Property

Set different font styles for three paragraphs: p.normal { font-style: normal; }p.italic { font-style: italic; }p.oblique { font-style: oblique; } Try it Yourself » Definition and Usage The font-style property specifies the font style for a text. Default value: normal Inherited: yes Animatable: no. Read about animatable Version: CSS1 JavaScript syntax: object.style.fontStyle=”italic” Try it CSS Syntax font-style: normal|italic|oblique|initial|inherit; Property Values Value Description normal The […]

CSS font-stretch Property

Make the text in all <div> elements wider: div { font-stretch: expanded; } Try it Yourself » Definition and Usage The font-stretch property allows you to make text wider or narrower. Default value: normal Inherited: yes Animatable: yes. Read about animatable Version: CSS3 JavaScript syntax: object.style.fontStretch=”expanded” Syntax font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit; Property Values Value Description ultra-condensed Makes the text as narrow […]

CSS font-size-adjust Property

By specifying the font-size-adjust property, the browser will adjust the font size to be the same regardless of the font family (“verdana” has the aspect value 0.58) div { font-size-adjust: 0.58; } Try it Yourself » Definition and Usage The font-size-adjust property gives you better control of the font size when the first selected font is not […]

CSS font-kerning Property

Specify that font kerning is applied: div { font-kerning: normal; } Try it Yourself » Definition and Usage The font-kerning property controls the usage of the kerning information stored in a font. Tip: Kerning defines how letters are spaced. Note: For fonts that do not include kerning data, this property will have no visible effect. Default value: auto Inherited: […]

CSS margin-bottom Property

Set the bottom margin for a <p> element: p { margin-bottom: 2cm; } Try it Yourself » Definition and Usage The margin-bottom property sets the bottom margin of an element. Note: Negative values are allowed. Default value: 0 Inherited: no Animatable: yes, see individual properties. Read about animatable – Try it Version: CSS1 JavaScript syntax: object.style.marginBottom=”100px” Try it CSS Syntax margin-bottom: length|auto|initial|inherit; Property Values Value […]

CSS margin Property

Set all the four margins of a <p> element: p { margin: 2cm 4cm 3cm 4cm; } Try it Yourself » Definition and Usage The margin shorthand property sets all the margin properties in one declaration. This property can have from one to four values. Examples: margin:10px 5px 15px 20px; top margin is 10px right margin is […]

CSS left Property

Set the left edge of the absolute positioned <div> element 80px to the right of the left edge of its nearest positioned ancestor: div.absolute { position: absolute; left: 80px; width: 200px; height: 120px; border: 3px solid #8AC007; } Try it Yourself » Definition and Usage For absolutely positioned elements, the left property sets the left edge of an element to a […]

CSS min-height Property

Set the minimum height of a <p> element: p { min-height: 100px; } Try it Yourself » Definition and Usage The min-height property is used to set the minimum height of an element. This prevents the value of the height property from becoming smaller than min-height. Note: The value of the min-height property overrides both max-height and height. Default value: 0 […]

CSS max-height Property

Set the maximum height of a <p> element: p { max-height: 50px; } Try it Yourself » Definition and Usage The max-height property is used to set the maximum height of an element. This prevents the value of the height property from becoming larger than max-height. Note: The value of the max-height property overrides height. Default value: none Inherited: […]

CSS height Property

Set the height and width of a paragraph: p.ex { height: 100px; width: 100px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The height property sets the height of an element. Note: The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, […]

CSS float Property

Let an image float to the right: img  { float: right; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The float property specifies how an element should float. Note: Absolutely positioned elements ignores the float property! Note: Elements after a floating element will flow around it. To avoid this, use the clear property or the […]