This content originally appeared on DEV Community and was authored by Dahye Ji
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: %
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>
<head>
<meta charset="utf-8">
<title>font</title>
<style>
body { font-size: 30px; }
div { font-size: 0.8em; }
p { font-size: 1.2em; }
</style>
</head>
<body>
<!-- body의 크기인 30px을 따른다. -->
em의 처음 크기는 30px 입니다.
<div>
<!-- 부모 body의 크기인 30px에 div의 크기인 0.8을 곱한다. -->
<br>em의 크기는 30 * 0.8 = 24px 입니다.
<div>
<!-- 부모 body의 크기인 24px에 div의 크기인 0.8을 곱한다. -->
<br>em의 크기는 24 * 0.8 = 19.2px 입니다.
<div>
<!-- 부모 div의 크기인 19.2px에 div 크기인 0.8을 곱한다. -->
<br>em의 크기는 19.2 * 0.8 = 15.36px 입니다.
</div>
</div>
</div>
<!-- 부모 body의 크기인 30px에 p의 크기인 1.2을 곱한다. -->
<p>p의 크기는 30 * 1.2 = 36px 입니다.</p>
</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
https://developer.mozilla.org/ko/docs/Web/CSS/word-break
This content originally appeared on DEV Community and was authored by Dahye Ji
Dahye Ji | Sciencx (2021-11-06T14:59:18+00:00) CSS basic 3 – Units, Text Styling,. Retrieved from https://www.scien.cx/2021/11/06/css-basic-3-units-text-styling/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.