por There are many properties in CSS that help us define how our fonts will look on our web pages. In this post, we will show you some CSS font properties that will allow you to make the most of your fonts and stylize your web page.
font properties
Within the properties for fonts in CSS are the properties font, those that are dedicated to editing the characteristics of the source. Next, we show you how they work:
font-style: This font css property defines the style of the text. Within these properties for fonts in CSS there are normal stylesitalic and oblique Furthermore, this property has the quality of being inherited from the parent element.
font-variant: the property font-variant defines the variant of the letter. This property only has two variants: normal and small caps. The small-caps They are a variant in which all the letters appear to be capital letters but are reduced to the size of a lower case letter, which is known as small caps.
font-weight: This CSS font-weight function defines the weight of the font, that is, how thin or thick the font will look. Within this property there are the categories normal, bold or by number between 100 and 900.
font-size: This property defines the font size.
font-family: This property represents the font family, that is, the typeface we are using in the element.
font: this property is used as a shorthand for all the previous ones. We can write in our style sheet css font and then define the categories of the previous properties directly, without having to write the property one by one.
Other properties
In addition to the properties font, There are other properties for fonts in CSS that focus on factors such as their placement, spacing, and decoration. Below, we present the eight main ones:
text-decoration: As its name indicates, this property is responsible for establishing decorations in the text. There are four possible decorations in this property:
overline: creates a line above the text.
line-through: creates a horizontal line that crosses the text in the center.
underline: creates a line just below the text.
underline overline: We can also put the two decorations to have both the bottom line and the top line.
text-transform: This property controls the use of capital letters in text. In this property there are three categories:
uppercase: Used to make all text uppercase.
lowercase: Defines all text to be in lowercase.
capitalize: causes all words in the text to begin with a capital letter.
line-height: This property refers to the line height, which is different from the font height. Line height defines the spacing up and down the letter.
letter-spacing: determines the spacing between letters in a text.
word-spacing: determines the spacing between words in a text.
text-align: This property determines whether the text is right, left, center, or justified in space.
vertical-align: this property defines the vertical alignment of the text; that is, it determines its vertical position on the line. Within this property there are five options:
baseline: is the automatic position of the text.
text-top: It is an alignment above the center of the line.
His p: aligns the text completely to the top of the line.
text-bottom: Aligns the text below the center of the line.
sub: defines the position at the bottom of the line.
text-indent: This property determines the indent or the indentation of a text. This refers to the space before the first line of text that helps differentiate paragraphs. This space can be defined using the different units of measurement in CSS. In this post, you can learn what the units of measurement are in CSS. Note that this property accepts negative values; In these cases, the indentation will be made towards the left side of the space.
If you want to see how these properties work live, we recommend the w3schools page. In it, you can search for the CSS font properties that we have explained to you and edit their code directly. This will help you learn how to write them in code so that they have the effect you want.
Do you want to continue learning?
Now that you know what the properties are for fonts in CSS, it’s time to put this new knowledge into practice! If this doesn’t seem like enough for you and you want to continue learning until you become an expert, encourage yourself to continue learning in our intensive bootcamp Full Stack Web Development Bootcamp. Here you will learn much more about all the properties that HTML and CSS, among other languages, programs and tools, have to offer. Don’t miss it and sign up!