How to decorate text with CSS is released at once for beginners?

407

No matter how much CSS I write, I can’t decorate the text as I want.

Especially for those who have started to learn HTML and CSS, there are many people who have such troubles.

However, when creating a website, text decoration is indispensable and unavoidable.

In this article, I will explain how to decorate text with CSS in an easy-to-understand manner for beginners.

We will explain each property from basic decoration to application with code examples, so please read to the end.

By the time you’ve read all the way through, you should be able to decorate the text however you like .

Try to read while actually imitating the code.

Basic properties for styling text with CSS

First, let’s introduce the basic properties for styling text with CSS.

Here are seven things that are often used when creating a website.

Each property is something you’ll come across often when you start learning HTML and CSS.

It’s a property that comes up frequently no matter what kind of website you create, so make sure you understand what decorations you can implement , not just the name .

Simple code examples are also explained for each property, so please proceed with learning while actually coding.

Resize text with CSS

The CSS that changes the size of the text is the font-size property.

Let’s start with a simple code example.

CSS
h2{
  font-size: 20px;
}
p{
  font-size: 10px;
}

The font-size property is described as follows.

Character size is expressed in px, em, and rem.

px is absolute, em and rem are relative to the parent element or root.

Em and rem may be used when you are conscious of responsive design .

Change text color with CSS

The CSS that changes the color of the text is the color property .

Here is an example using the color property.

HTML
    <div class="container">
        <h2></h2>
        </p>
    </div>

CSS
h2{
  color: red;
}
p{
  color: rgb(255, 0, 0);
}

There are three main ways to specify the color type.

Color keywords describe colors in English.

However, since there are few colors that can be expressed, it is not often used when creating websites.

RGB determines the color by adjusting the ratio of red, green, and blue from 0 to 255.

RGB is described as follows.

RGB can be adjusted from 0 to 255, so you can express many colors.

To use hexadecimal numbers, write a hexadecimal number after #.

The hexadecimal method can express many colors like rgb.

Of the three ways to specify colors, hexadecimal numbers are used frequently.

Adjust character transparency with rgba

Use rgba if you want to adjust not only the type of color but also the transparency of the color.

The description method is as follows.

CSS
セレクタ{
color: rgba(255, 0, 0, 0.5);
}

You can specify the color with rgb and adjust the transparency of the color with a .

The transparency value is adjusted between 0 and 1, the closer to 0 the more transparent.

Change text thickness with CSS

To change the weight of text with CSS, use the font-weight property.

Let’s start with a simple code example.

CSS
.futoi{
  font-weight: bold;
}
.normal{
  font-weight: normal;
}

By setting the font-weight to bold, the characters are made bold.

You can set the following values ​​for font-weight:

value	effect
normal	initial value. normal thickness
bold	make text bold
lighter	Based on the parent element, it becomes thinner than the parent element
bolder	Based on the parent element, it becomes thicker than the parent element
1~1000	Normal is 400, bold is 700, and the thickness is the same. Values ​​that can be set differ depending on the type of font

If you just want to make the text bold, use bold.

If you need a fine thickness setting, use a value from 1 to 1000 to adjust.

However, when setting the thickness with numbers, it is important to understand that the values ​​that can be used are limited depending on the type of font .

Depending on the type of font specified in the font-family property, the numerical values ​​that can be used for weight differ, so care must be taken when selecting the type of font.

Specify text type with CSS

The way to set the type of text in CSS is to use the font-family property.

I will explain how to specify the type of text with the font-family property using code examples.

CSS
body{
font-family: Arial, Helvetica, sans-serif;
}

In the code above, the font-family property is written for the body tag in order to unify the fonts throughout the website.

Basically, the common method is to write the font-family property in the body tag .

Values ​​written in the font-family property are used in order from front to back.

Set multiple values ​​because the types of text that can be used differ depending on the browser and OS.

The above code will use Helvetica if Arial is not available.

Setting the font-family property is important for reproducing the design of the website.

Make sure you know what values ​​you are using.

Decorate a piece of text with HTML and CSS

If you want to decorate a part of the text, you need to devise your HTML and CSS descriptions.

Use the HTML span tag to decorate the part.

CSS
.red{
  color: red;
}

Enclose the text you want to decorate with span tags, give it a class name, and decorate it with CSS.

In addition to changing the color, various decorations such as underlining and changing the background are possible.

CSS
.red{
  color: red;
  border-bottom: 2px solid black;
  background-color: yellow;
}

Remember how to use the span tag, as it is necessary to decorate the text.

Underline text with CSS

The CSS property to underline text is border-bottom.

The border property is a property that draws a border on the top, bottom, left, and right, but if you add bottom, you can display only the underline .

Here’s a simple code example.

HTML
    <div class="container">
        <h2></h2>
        <p></span>
        </p>
    </div>

CSS
.sen{
  border-bottom: 2px solid black;
}

You can easily express an underline using the border-bottom property.

text-decoration can also underline text

The text-decoration property also allows for different underlines.

Here is a code example using the text-decoration property.

CSS
.sen{
  text-decoration: underline 2px pink;
}

As with the border property, you can specify the thickness and color of the line.

It is also possible to draw a wavy line with the text-decoration property.

CSS
.sen{
  text-decoration: wavy underline 2px green;
}

Just add wavy to the value of the text-decoration property to change it to a wavy line.

Both the border property and the text-decoration property can draw various lines, so please try them out.

Adjust line spacing with CSS

You can also adjust the line spacing of the text with CSS.

To adjust the line spacing of text, use the line-height property .

First, let’s look at a code example using the line-height property.

The line spacing adjusted by the line-height property is a number that matches the character size.

In the code above, the value of the line-height property is 2, so it’s twice the font size.

Therefore, the line spacing between characters is 14px, which is the same as the character size.

Other values ​​for the line-height property are px, em, and %.

Experience how the line spacing changes while actually coding.

Decorating Text with CSS [Advanced Edition]

There are many more ways to style text with CSS than the basics.

In this article, we will cover the basics of how to decorate text, and then introduce how to apply and decorate it.

The following five properties decorate the introduced text.

I will explain how each CSS property decorates the text with code examples.

Please copy and paste and learn while changing the code.

Make text italic with CSS

The font-style property is responsible for changing the appearance of the text to italic .

The following table summarizes the values ​​that can be specified for the font-style property.

value	effect
normal	Initial value. It does not change the appearance of the text.
italic	Changed to italic.
oblique	changed to italic.

The font-style property is used when you want your text to appear slanted.

Please understand that depending on the type of font specified in font-family, some fonts can be specified with italic or oblique and some cannot.

If you want to tilt Japanese text, there is no difference between italic and oblique display.

Here is a code example using the font-style property.

CSS
.ita{
  font-style: italic;
}
.obl{
  font-style: oblique;
}

There is little difference between italic and oblique display.

Remember that you can change the font to italic with the font-style property.

Insert text with CSS only

Instead of writing text in HTML, you can insert text using only CSS by using CSS pseudo-elements.

This can be used, for example, when you want to add characters after the new article title in the menu.

Here’s a simple code example.

CSS
p::after{
  content: ;
  color: red;
}

You can also add text using pseudo-elements before the text written in HTML.

HTML
    <div class="container">
        <h2></h2>
        <p>
        </p>
    </div>

CSS
p::before{
  content: 
  color: red;
  padding-right: 10px;
}

The before and after pseudo-elements, as their names suggest, allow you to add text and images before and after them.

Pseudo-elements are convenient properties because you can fine-tune the position where you want to add text and images by making good use of properties such as the position property.

Add shadow to text with CSS

Text written in HTML can also be shaded with CSS.

The property that shadows the text is the text-shadow property .

Introduce the text-shadow property with a simple code example.

CSS
p{
  font-size: 20px;
  text-shadow: 2px 3px 3px black;
}

Set the value of the text-shadow property as follows:

If you want a shadow directly below the text, set the x-axis shadow position to 0px.

The shadow spread spreads out as the value increases.

You can specify negative values ​​for the shadow position on the x and y axes, so use negative values ​​if you want the shadow to appear above or to the left.

border text with css

By using the text-shadow property, it is also possible to frame the text .

This time, I will introduce an example of bordering text using the text-shadow property.

HTML
    <div class="container">
        <h2>テキストを縁取る</h2>
    </div>

CSS
h2{
  font-size: 35px;
  color: white;
  text-shadow:
  2px 2px 1px #ff0000, -2px -2px 1px #ff0000,
  -2px 2px 1px #ff0000,  2px -2px 1px #ff0000,
   2px 0px 1px #ff0000, -2px  0px 1px #ff0000,
   0px 2px 1px #ff0000,  0px -2px 1px #ff0000;;
}

By specifying the text-shadow property for each of the top, bottom, left, right, top left, top right, bottom right, and bottom left, you can frame the text.

By setting the shadow spread to 1px, the corner shadows of the text are smoothed out.

The text-shadow property allows for various decorations simply by changing the value.

Please adjust each value and code while verifying what kind of shadow it will be.

Adjust text position with CSS

Use the text-align property to align text horizontally with CSS .

You can align text left, center, or right within a block element.

HTML
    <div class="container">
        <p class="left">
        <p class="center">>
        <p class="right"

CSS
.container{
  width: 200px;
  height: 100px;
  background-color: chartreuse;
}
.left{
  text-align: left;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}

Alignment can be changed simply by specifying left, center, and right values ​​for the text-align property.

It is sometimes used, especially when creating buttons, where text is often centered.

center text vertically and horizontally

There are many cases where you want the text to be centered vertically and horizontally of the block element, not just centered horizontally.

There are many ways to center text vertically and horizontally in a block, but here I will show you how to use the flex property .

HTML
    <div class="container">
        <p class="center">
    </div>

CSS
.container{
  width: 200px;
  height: 100px;
  background-color: chartreuse;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

I enabled flexbox by writing flex on the parent element.

The text is centered using justify-content and align-items.

There are other methods such as using line-height and using position.

Please use them according to the situation at that time.

Adjust letter spacing of text with CSS

The CSS that adjusts the letter spacing of text is the letter-spacing property .

Character spacing is also a necessary decoration for designing easy-to-read sentences.

Just adding a little space between letters makes it easier to read.

Here is a code example using the letter-spacing property.

HTML
    <div class="container">
        <p class="no">
        <p class="ari">
    </div>

CSS
.container{
  width: 300px;
}
.ari{
  letter-spacing: 3px;
}

Just a little space between letters can make a big difference.

In order to faithfully reproduce the design, we must make good use of the letter-spacing property.

summary

I showed you how to style text with CSS.

There are many ways to decorate text other than the properties mentioned in the article.

Furthermore, by using each property in combination, the range of expression can be expanded.

In order to expand the range of expression, you must first master the basics of decorating text .

Practice coding the properties introduced in this article over and over again.

If you are unable to progress in learning HTML and CSS and are worried about your future programming career, please come to DMM WEB CAMP for free counseling.