DEV Community

Dahye Ji
Dahye Ji

Posted on

CSS basic 3 - Units, Text Styling

Syntax

selector {
 property: value;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

%

<!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>
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode
  • Styling tip: It will apply top - right - bottom - left order.
border-color: black pink blue yellow; 
Enter fullscreen mode Exit fullscreen mode

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%;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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%;
Enter fullscreen mode Exit fullscreen mode

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;
 }   
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Word-break

https://developer.mozilla.org/ko/docs/Web/CSS/word-break

Discussion (0)