Styling text

This translation is incomplete. Please help translate this article from English

CSS 기초가 어느 정도 완성되었다면,  여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 폰트와 볼드체, 이탤릭체, 줄 띄어쓰기, 단어 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링의 기초를 배웁니다. 여러분의 페이지에 커스텀 폰트를 설정하고 리스트와 링크를 꾸며줌으로써 이 모듈을 끝마칩니다. 


Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Thimble.


This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

Fundamental text and font styling
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
Styling lists
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
Styling links
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
Web fonts
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.


The following assessments will test your understanding of the text styling techniques covered in the guides above.

Typesetting a community school homepage
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.