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>
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.
Pixels (px) are a fixed unit of measurement, which represent the exact number of dots on a screen. It does not adapt to other elements on the page or user display settings.
Em units (em) are relative units based on the font size of the element or its parent element. It is used in responsive and flexible layouts. One em unit is equal to current font-size.
Pixel to Em Conversion Formula
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.
Pixel to Em Converter
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.
Benefits of Using EM Units
Responsive Scaling: Em units are based on fontsize of parent, So any adjustments to the base fontsize will automatically resize all em based elements.
Consistent Proportionality: When we set entire layout in em units, changing base font will proportionally adjust all the sizes in page.
User Accessibility: Some visually impaired user may increase font-size in browser settings for better visibility, in this cases our layout defined in em units will also scale accordingly.
To learn about units in CSS, checkout article on CSS measurement units.
CSS PX to EM Conversion Table
Following table shows the corresponding em values to px values, considering the base pixel value as 16px:
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
Length units can be categorized into two types:
Absolute units: Fixed unit lengths that does not depend on screen width.
Relative units: Responsive unit lengths that changes according to screen width.
Absolute Length Units
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.
Example
Here is an example of absolute units (mm, cm, in, Q) used for font sizes:
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:
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.