dev-resources.site
for different kinds of informations.
CSS basic 3 - Units, Text Styling
Syntax
selector {
property: value;
}
Every property used in CSS has a value type defining the set of values that are allowed for that property.
Units
Absolute units: cm, mm, px, etc
Relative units: em, rem, vw, vh, etc
Percentage: %
/* font size of h1 is 32px in default */
/* font size of p is 16px in default */
/* font size of div is 16x in default */
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
div {
font-size: 10px;
}
Absolute units
They are not relative to anything else and they are generally considered to always to be the same size.
px: pixels
pt: points
in: inches
cm/mm: centimeters/millimeters
Relative units
These units are relative to something else(relative to the size of the parent element's font)
The benefit of using these units is that with some careful planning, you can make it as the size of text or other elements scales relative to everything else on the page. It can be helpful building something responsive.
%: percentage - relative to the parent element.
em: relative to the font size of the parent.
rem:relative to the font size of the root element.
vw: 1% of the viewport's width.
vh: 1% of the viewport's height.
vmin: 1% of the viewport's smaller dimension.
vmax: 1% of the viewport's larger dimension.
em
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS units 가변 크기 단위</title>
<style>
html,
body {
font-size: 10px;
}
p {
/*
body(parent element of p) font size * 2
body font size: 10
2em = 20px (10 * 2 = 20px)
*/
font-size: 2em;
font-weight: 700;
}
div {
font-size: 2em;
}
.one {
/*
font size of root element: 10px
2rem = 10 * 2 = 20px
3rem = 10 * 3 = 30px
*/
font-size: 2rem;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Hello World</p>
<!-- em, %, rem, vw, vh -->
<!-- em: Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. -->
<!-- rem: Font size of the root element 2rem = 10px*2=20px -->
<!-- 2em
10px(parent-body)*2 = 20px -->
<div>
<!-- 2em
20px*2=40px -->
<div>
<!-- 2em
40px*2=80px -->
<div>
Hello World
</div>
<!-- 2rem
1rem = 10px(root-body)
10px*2 = 20px -->
<div class="one">
Hello World
</div>
</div>
</div>
</body>
</html>
%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { font-size: 30px; }
div { font-size: 50%; }
p { font-size: 110%; }
</style>
</head>
<body>
<!-- body의 크기인 30px을 따른다. -->
%의 처음 크기는 30px 입니다.
<div>
<!-- 부모 body의 크기인 30px에 div의 크기인 0.5을 곱한다. -->
<br>%의 크기는 30 * 0.5 = 15px 입니다.
</div>
<!-- 부모 body의 크기인 30px에 p 크기인 1.1을 곱한다. -->
<p>p의 크기는 30 * 1.1 = 33px 입니다.</p>
</body>
</html>
Border
Border property has values of these
border-width : style the thickness of border
border-style: style the shape of border
border-color: style the color of border
initial: set it to the initial value
inherit: set it as same as the value of parent's
Also you can write these all at once
border: 1px solid black
- Styling tip: It will apply top - right - bottom - left order.
border-color: black pink blue yellow;
Border radius
They property runds the corners of an elemen's outer border edge using px or %.
border-radius: 30px (all of the outer border)
border-radius: 25% 10% (top-left,bottom-right - top-right,bottom-left)
border-radius: 10% 30% 50% 70% (top-left - top-right -bottom-right bottom-left) ** this goes clockwise.
*other border properties
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Text styling
*line-height: sets the height of a line box. It's commonly used the to set the distance between lines of text.
/* Keyword value */
/* initial value of used font-family.(the initial value is different depending on each fonts) */
line-height: normal;
/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* line-height: 20px */
/* <percentage> values */
line-height: 34%;
letter-spacing
you can set the horizontal spacing between text characters using this. This value is added to the natural spacing between characters while rendering the text.
p {
/* Keyword value */
letter-spacing:normal;
/* <length> values */
letter-spacing:7px;
letter-spacing:0.5em;
letter-spacing:0.5px;
font-size:14px;
background-color:black;
color:white;
}
Text-align
/* Keyword values */
/* The same as left if direction is left-to-right and right if direction is right-to-left. */
text-align: start;
/* The same as right if direction is left-to-right and left if direction is right-to-left. */
text-align: end;
/* The inline contents are aligned to the left edge of the line box. */
text-align: left;
/* The inline contents are aligned to the right edge of the line box. */
text-align: right;
/* The inline contents are centered within the line box */
text-align: center;
/* The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. */
text-align: justify;
/* Same as justify, but also forces the last line to be justified. */
text-align: justify-all;
/* Similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value.*/
text-align: match-parent;
/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;
Text-indent
It sets the length of empty space that is put before lines of text block.
You can use mm, cm,, px, em, % for this.
text-indent: 5em;
text-indent: 50px;
text-indent: 5mm;
text-indent: 2cm;
/* <percentage> value
relative to the containing block width */
text-indent: 15%;
Text-decoration
text-decoration property sets the appearance of decorative lines on text.
p {
text-decoration: none;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;
}
/* However, some parts of lines can be invisible depending on the font. so it's not so recommended */
/* You can make span and give border to it instead! */
span{
border-bottom: 1px solid black;
}
/* This used a lot to remove initial style of a tag*/
a {
text-decoration:none;
}
Text-overflow(...)
This only apply when elements are block elements.(not applied to inline elements)
div p {
/*text-overflow: clip;*/
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Word-break
Featured ones: