<!DOCTYPE html>
<html>
<head>
<style>
button {
background: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
button:hover {
background: darkgreen; /* Changes color when hovered */
}
</style>
</head>
<body>
<button>Hover Me</button>
</body>
</html>
Explanation:
:hover applies style when the mouse is over the element.<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: lightblue;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
</style>
</head>
<body>
<div class="box">Box Model Example</div>
</body>
</html>
Explanation (Box Model):
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red; /* Thickness, style, color */
padding: 10px; /* Space inside border */
margin: 15px; /* Space outside border */
}
</style>
</head>
<body>
<div>This is a CSS border example.</div>
</body>
</html>
Explanation:
border: creates a border with thickness, style (solid, dashed, dotted), and color.padding: space inside border.margin: space outside border.<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, sans-serif; /* Sets font type */
font-size: 18px; /* Controls text size */
font-weight: bold; /* Makes text bold */
text-align: center; /* Aligns text in the middle */
}
</style>
</head>
<body>
<p>Styled Text Example</p>
</body>
</html>
Explanation:
font-family: changes font style.font-size: controls text size.font-weight: bold, normal, light.text-align: left, right, center, justify.<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray; /* Sets page background */
}
h2 {
background-color: yellow; /* Sets only heading background */
}
</style>
</head>
<body>
<h2>CSS Background Example</h2>
</body>
</html>
Explanation:
body) or specific elements (like h2).<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue; /* Changes heading text color */
}
p {
color: green; /* Changes paragraph text color */
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
<p>This is a CSS color example.</p>
</body>
</html>
Explanation:
color property sets the text color.This simple online pixel (PX) values to EM units converter tool calculate precise EM values from pixels for better CSS scaling and accessibility. In CSS, pixel and em are units used to define sizes for elements dimensions, fonts and layout structure.
Following is formula to convert pixel to em.
em = px / font-size
For example, if base font-size is 16px, then setting an element to 1.5 em will make it 24px ( 1.5 * 16 ). This way em units ensure responsiveness.
Following is a digital converter for converting pixel to em and vice-versaFont Size (px):Pixels:EM:
Note: Default font-size is 16px. So while converting the px to em, you need to select your base value (default is 16) for the pixel and use it in the formula to calculate.
To learn about units in CSS, checkout article on CSS measurement units.
Following table shows the corresponding em values to px values, considering the base pixel value as 16px:
| PX | EM |
|---|---|
| 5px | 0.3125em |
| 6px | 0.3750em |
| 7px | 0.4375em |
| 8px | 0.5000em |
| 9px | 0.5625em |
| 10px | 0.6250em |
| 11px | 0.6875em |
| 12px | 0.7500em |
| 13px | 0.8125em |
| 14px | 0.8750em |
| 15px | 0.9375em |
| 16px | 1.0000em |
| 17px | 1.0625em |
| 18px | 1.1250em |
| 19px | 1.1875em |
| 20px | 1.2500em |
CSS Units define the measurement system used to specify the values. CSS offers a number of different units for expressing length and measurement. CSS unit is used to specify the property size for a page element or its content.
There are a number of ways to specify and measure length in CSS. It is used to specify margins, padding, font size, width, height, border, etc.
For example – font-size: 50px, here number 50 has a suffix px i.e., pixel, it is a CSS measurement unit.
There should be no whitespace between the number and the unit. The unit can be left out when the value is 0.
Length units can be categorized into two types:
These units are categorized as fixed-length units, which means that lengths specified with absolute units maintain an exact, unchanged size on the screen.
These units prove to be very effective when the browser has comprehensive information about the properties of the screen, the printer being used, or other appropriate user agents.Height: 2pxHeight: 2cmHeight: 2inHeight: 2pt
The following table contains all the types of absolute units:
| Unit | Description | Equivalent value | Example |
|---|---|---|---|
| mm | Refers to millimeter, it is used to specify the measurements in millimeters. | 1mm = 1/10th of 1cm | font-size: 10mm; |
| cm | Refers to centimeter, it is used to specify the measurements in centimeters. | 1cm = 37.8px = 25.2/64in | font-size: 5cm; |
| Q | Refers to Quarter-millimeters, it is used to specify the measurements in centimeters. | 1Q = 1/40th of 1cm | font-size: 5Q; |
| in | Refers to inches, it is used to specify the measurement in inches. | 1in = 2.54cm = 96px | font-size: 1in; |
| pt | Refers to point, it is used to specify the measurements in points. | 1pt = 1/72 of 1in | font-size: 20pt; |
| pc | Refers to picas, it is used to specify the measurement in picas. | 1pc = 1/6th of 1in | width: 6pc; |
| px | Refers to pixels, it is used to specify the measurement in pixels. | 1px = 1/96th of 1in | font-size: 15px; |
Absolute units prove valuable for projects where responsiveness is not a priority. However, they are less beneficial for responsive websites because they do not adjust when screen dimensions change.
Here is an example of absolute units (mm, cm, in, Q) used for font sizes:
<html><head><style>.unit-mm { font-size: 5mm; } .unit-cm { font-size: 1cm; } .unit-inch { font-size: 0.5in; } .unit-quarter { font-size: 40Q; } </style></head><body><h1 class="unit-mm"> Font size 5mm </h1><h1 class="unit-cm"> Font size 1cm </h1><h1 class="unit-inch"> Font size 0.5inch </h1><h1 class="unit-quarter"> Font size 40Q </h1></body></html></pre>Relative Length Units
Relative length units are measured in relation to other elements or viewport of the screen.
Relative units are great for styling responsive websites because they can be adjusted proportionally based on window size or parent elements. These units define lengths relative to other length properties.Height: 3emHeight: 3exHeight: 3lhHeight: 3vh
The following table contains all the types of relative units:
Unit Description Example em Relative to the font-size of the element. font-size: 4em; ex Relative to the x-height of the current font. font-size: 4ex; ch Relative to width of the "0". font-size: 4ch; rem Relative to font-size of the root element. font-size: 2rem; lh It is relative to the line height of the element. font-size: 4lh; rlh It is relative to the line height of the root element. font-size: 4rlh; vh It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport. font-size: 4vh; vw It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport. width: 4vw; vmin It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport's smaller dimension. width: 4vmin; vmax It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport's larger dimension. width: 4vmax; vb It is relative to the size of the initial containing block in the direction of the root element's block axis. 1vb = 1% of containing block's size (block axis). font-size: 4vb; vi It is relative to the size of the initial containing block in the direction of the root element's inline axis. 1vb = 1% of containing block's size (inline axis). font-size: 4vi; svw, svh It is relative to the width and height of the smaller viewport. 1svw = 1% or 1/100 of the smaller viewport's width and 1svh = 1% or 1/100 of the smaller viewport's height. width: 40svw; height: 40svh; lvw, lvh It is relative to the width and height of the larger viewport. 1lvw = 1% or 1/100 of the larger viewport's width and 1lvh = 1% or 1/100 of the larger viewport's height. width: 40lvw; height: 40lvh; dvw, dvh It is relative to the width and height of the dynamic viewport. 1dvw = 1% or 1/100 of the dynamic viewport's width and 1dvh = 1% or 1/100 of the dynamic viewport's height. width: 40dvw; height: 40dvh; Example
Here is an example of relative units (em, rem, vw, vh, %) used for font sizes:
<html><head><style>.unit-em { font-size: 2em; } .unit-rem { font-size: 1.5rem; } .unit-vw { font-size: 5vw; } .unit-vh { font-size: 5vh; } .unit-percent { font-size: 150%; } </style></head><body><h1 class="unit-em">Font size 2em </h1><h1 class="unit-rem">Font size 1.5rem </h1><h1 class="unit-vw">Font size 5vw </h1><h1 class="unit-vh">Font size 5vh </h1><h1 class="unit-percent">Font size 150% </h1></body></html></pre>Units px (Pixel) and em (indicates size relative to the size of the font) are two of the measurement units of length. In order to convert px to em, try our free CSS - PX to EM Converter.
The following table shows the 16 color names that were introduced in HTML 3.2, to support the 16 colors that 8-bit graphics cards offered. Same set of color can be used in CSS −
| Color Name | Hex Value | Color | Show |
|---|---|---|---|
| aqua | #00ffff | Demo | |
| black | #000000 | Demo | |
| blue | #0000ff | Demo | |
| fuchsia | #ff00ff | Demo | |
| green | #008000 | Demo | |
| gray | #808080 | Demo | |
| lime | #00ff00 | Demo | |
| maroon | #800000 | Demo | |
| navy | #000080 | Demo | |
| olive | #808000 | Demo | |
| purple | #800080 | Demo | |
| red | #ff0000 | Demo | |
| silver | #c0c0c0 | Demo | |
| teal | #008080 | Demo | |
| white | #ffffff | Demo | |
| yellow | #ffff00 | Demo |
There are other colors, which are not part of HTML or XHTML but they are supported by most of the versions of IE or Netscape. These color names can be used in CSS as well.
| Color Name | Hex Value | Color | Show |
|---|---|---|---|
| aliceblue | #f0f8ff | Demo | |
| antiquewhite | #faebd7 | Demo | |
| aquamarine | #7fffd4 | Demo | |
| azure | #f0ffff | Demo | |
| beige | #f5f5dc | Demo | |
| bisque | #ffe4c4 | Demo | |
| blanchedalmond | #ffebcd | Demo | |
| blueviolet | #8a2be2 | Demo | |
| brown | #a52a2a | Demo | |
| burlywood | #deb887 | Demo | |
| cadetblue | #5f9ea0 | Demo | |
| chartreuse | #7fff00 | Demo | |
| chocolate | #d2691e | Demo | |
| coral | #ff7f50 | Demo | |
| cornflowerblue | #6495ed | Demo | |
| cornsilk | #fff8dc | Demo | |
| crimson | #dc143c | Demo | |
| cyan | #00ffff | Demo | |
| darkblue | #00008b | Demo | |
| darkcyan | #008b8b | Demo | |
| darkgoldenrod | #b8860b | Demo | |
| darkgray | #a9a9a9 | Demo | |
| darkgreen | #006400 | Demo | |
| darkkhaki | #bdb76b | Demo | |
| darkmagenta | #8b008b | Demo | |
| darkolivegreen | #556b2f | Demo | |
| darkorange | #ff8c00 | Demo | |
| darkorchid | #9932cc | Demo | |
| darkred | #8b0000 | Demo | |
| darksalmon | #e9967a | Demo | |
| darkseagreen | #8fbc8f | Demo | |
| darkslateblue | #483d8b | Demo | |
| darkslategray | #2f4f4f | Demo | |
| darkturquoise | #00ced1 | Demo | |
| darkviolet | #9400d3 | Demo | |
| deeppink | #ff1493 | Demo | |
| deepskyblue | #00bfff | Demo | |
| dimgray | #696969 | Demo | |
| dodgerblue | #1e90ff | Demo | |
| firebrick | #b22222 | Demo | |
| floralwhite | #fffaf0 | Demo | |
| forestgreen | #228b22 | Demo | |
| gainsboro | #dcdcdc | Demo | |
| ghostwhite | #f8f8ff | Demo | |
| gold | #ffd700 | Demo | |
| goldenrod | #daa520 | Demo | |
| gray | #808080 | Demo | |
| greenyellow | #adff2f | Demo | |
| honeydew | #f0fff0 | Demo | |
| hotpink | #ff69b4 | Demo | |
| indianred | #cd5c5c | Demo | |
| indigo | #4b0082 | Demo | |
| ivory | #fffff0 | Demo | |
| khaki | #f0e68c | Demo | |
| lavender | #e6e6fa | Demo | |
| lavenderblush | #fff0f5 | Demo | |
| lawngreen | #7cfc00 | Demo | |
| lemonchiffon | #fffacd | Demo | |
| lightblue | #add8e6 | Demo | |
| lightcoral | #f08080 | Demo | |
| lightcyan | #e0ffff | Demo | |
| lightgoldenrodyellow | #fafad2 | Demo | |
| lightgreen | #90ee90 | Demo | |
| lightgrey | #d3d3d3 | Demo | |
| lightpink | #ffb6c1 | Demo | |
| lightsalmon | #ffa07a | Demo | |
| lightseagreen | #20b2aa | Demo | |
| lightskyblue | #87cefa | Demo | |
| lightslategray | #778899 | Demo | |
| lightsteelblue | #b0c4de | Demo | |
| lightyellow | #ffffe0 | Demo | |
| limegreen | #32cd32 | Demo | |
| linen | #faf0e6 | Demo | |
| magenta | #ff00ff | Demo | |
| mediumblue | #0000cd | Demo | |
| mediumorchid | #ba55d3 | Demo | |
| mediumpurple | #9370db | Demo | |
| midnightblue | #191970 | Demo | |
| mistyrose | #ffe4e1 | Demo | |
| moccasin | #ffe4b5 | Demo | |
| oldlace | #fdf5e6 | Demo | |
| orange | #ffa500 | Demo | |
| orchid | #da70d6 | Demo | |
| peachpuff | #ffdab9 | Demo | |
| peru | #cd853f | Demo | |
| pink | #ffc0cb | Demo | |
| plum | #dda0dd | Demo | |
| purple | #800080 | Demo | |
| rosybrown | #bc8f8f | Demo | |
| royalblue | #4169e1 | Demo | |
| salmon | #fa8072 | Demo | |
| sandybrown | #f4a460 | Demo | |
| seagreen | #2e8b57 | Demo | |
| sienna | #a0522d | Demo | |
| skyblue | #87ceeb | Demo | |
| slateblue | #6a5acd | Demo | |
| steelblue | #4682b4 | Demo | |
| tan | #d2b48c | Demo | |
| thistle | #d8bfd8 | Demo | |
| tomato | #ff6347 | Demo | |
| violet | #ee82ee | Demo | |
| wheat | #f5deb3 | Demo | |
| whitesmoke | #f5f5f5 | Demo | |
| yellow | #ffff00 | Demo | |
| yellowgreen | #9acd32 | Demo |
This chapter is a CSS functions reference page and lists down each functions used in CSS. For detailed information about any function, visit respective function pages.
| Function | Description |
|---|---|
| acos() | CSS acos() function returns the inverse cosine of a value in the range -1 and 1. |
| asin() | CSS asin() function returns the inverse sine of a number between -1 and 1. |
| atan() | CSS atan() function returns the inverse tangent of a number between -infinity and infinity. |
| atan2() | CSS atan2() function returns the inverse tangent of two values between -infinity and infinity. |
| attr() | CSS attr() function returns the value of an attribute of the selected element. |
| blur() | CSS blur() function applies a Gaussian blur to the elements on which it is applied. |
| brightness() | CSS brightness() function sets the brightness of an element. |
| calc() | CSS calc() function performs calculations to determine CSS property values. |
| circle() | CSS circle() function defines a circle. |
| clamp() | CSS clamp() function sets a value for adjusting responsively between a minimum and maximum |
| color() | CSS color() function allows a color to be specified in a particular, specified color space. |
| color-mix() | CSS color-mix() function is used to mix two color values by a given amount. |
| conic-gradient() | CSS conic-gradient() is used to creates a conic gradient. |
| contrast() | CSS contrast() function sets the contrast of an element. |
| cos() | CSS cos() function returns the cosine of an angle. |
| counter() | CSS counter() function returns the current value of the counter. |
| counters() | CSS counters() function returns the current values of the nested and named counters. |
| cubic-bezier() | CSS cubic-bezier() function defines a custom cubic bezier curve for animations. |
| drop-shadow() | CSS drop-shadow() function applies a drop shadow effect to an image. |
| ellipse() | CSS ellipse() function is used to define an ellipse. |
| env() | CSS env() function adds a value to a user-defined environment variable in your CSS. |
| exp() | CSS exp() function returns the value of e raised to the power of a given number. |
| fit-content() | CSS fit-content() function resizes an element based on its content. |
| grayscale() | CSS grayscale() function sets the grayscale of an image. |
| hsl() / hsla() | CSS hsl() function defines a color using the Hue-Saturation-Lightness model, with an optional alpha that represents the opacity. |
| hue-rotate() | CSS hue-rotate() function rotates the hue of an element’s colors. |
| hwb() | CSS hwb() function defines a color using the Hue-Whiteness-Blackness model, with an optional alpha that represents the opacity. |
| hypot() | CSS hypot() function returns the square root of the sum of the squares of the numbers. |
| inset() | CSS inset() function defines a rectangle at the specified inset distances from each side of the reference box. |
| invert() | CSS invert() function inverts the colors of an element. |
| lab() | CSS lab() function expresses a color in CIE L*a*b color space. |
| lch() | CSS lch() function expresses a color in LCH(Lightness Chroma Hue) color space. |
| linear-gradient() | CSS linear-gradient() function is used to create a linear gradient. |
| log() | CSS log() function returns the natural logarithm (e) of a given number. |
| matrix() | CSS matrix() function defines a 2D transformation with homogeneous coordinates. |
| matrix3d() | CSS matrix3d() function defines a 3D transformation using a 4×4 matrix of 16 values. |
| max() | CSS max() function specify the largest (most positive) value from a list of comma-separated expressions. |
| min() | CSS min() function specify the lowest value from a list of comma-separated expressions. |
| minmax() | CSS minmax() function defines a size range for CSS grid columns or rows. |
| mod() | CSS mod() function calculates the modulus of two numbers when divided. |
| opacity() | CSS opacity() function function sets the transparency level of an element. |
| oklab() | CSS oklab() function expresses a color in the oklab color space. |
| oklch() | CSS oklch() function expresses a color in oklch color space. |
| perspective() | CSS perspective() function defines a perspective view for a 3D transformed element. |
| polygon() | CSS polygon() function is used to define a polygon. |
| pow() | CSS pow() function returns the value of a base raised to the power of a number. |
| radial-gradient() | CSS radial-gradient() function is used to create a radial gradient. |
| repeat() | CSS repeat() function is used for repeating columns or rows in a CSS grid. |
| repeating-conic-gradient() | CSS repeating-conic-gradient() repeats a conic gradient. |
| repeating-linear-gradient() | CSS repeating-linear-gradient() repeats a linear gradient. |
| repeating-radial-gradient() | CSS repeating-radial-gradient() repeats a radial gradient. |
| rgb() | CSS rgb() function sets the colors using the Red-Green-Blue model (RGB) value. |
| rotate() | CSS rotate() function defines a 2D rotation of an element. |
| rotate3d() | CSS rotate3d() function rotates an element around a fixed axis on the three-dimensional surface. |
| rotateX() | CSS rotateX() function rotates an element around the x-axis. |
| rotateY() | CSS rotateY() function rotates an element around the y-axis. |
| rotateZ() | CSS rotateZ() function rotates an element around the z-axis. |
| round() | CSS round() function returns a rounded number. |
| saturate() | CSS saturate() function sets the saturation level of an element. |
| scale() | CSS scale() function applies a scaling transformation to an element on the two-dimensional plane. |
| scale3d() | CSS scale3d() function applies a scaling transformation to an element on the three-dimensional plane. |
| scaleX() | CSS scaleX() function applies a scaling transformation to an element along the x-axis. |
| scaleY() | CSS scaleY() function applies a scaling transformation to an element along the y-axis. |
| scaleZ() | CSS scaleZ() function applies a scaling transformation to an element along the z-axis. |
| sepia() | CSS sepia() function applies and sets a sepia (warm, yellowish/brownish) effect to an element. |
| sin() | CSS sin() function calculates the sine of a given number and returns a result in the range -1 to 1. |
| skew() | CSS skew() function specifies a transformation that slants an element on the 2D plane. |
| skewX() | CSS skewX() function specifies a transformation that slants an element horizontally on the 2D plane. |
| skewY() | CSS skewY() function specifies a transformation that slants an element vertically on the 2D plane. |
| sqrt() | CSS sqrt() function returns the square root of a given number. |
| tan() | CSS tan() function returns the tangent of a number. |
| translate() | Re-positions an element along the x- and y-axis |
| translateX() | CSS translateX() function translates, or moves, an element horizontally along the X-axis. |
| translateY() | CSS translateY() function translates, or moves, an element vertically along the Y-axis. |
| url() | CSS url() function is used to include a file in the HTML document. |
| var() | CSS var() function is used to insert the value of a custom property. |