Introduction to CSS for beginners

CSS stands for Cascading Style Sheets.

It’s responsible for all the beauty on the screen: fonts, colors, backgrounds, text formatting, and even animation. Using CSS, you can change the position of HTML elements relative to each other or fix them at some point on the screen.

Inline Styles

Let’s start with the simplest approach. In the basic case, we can add a style attribute to any HTML tag and apply the styles we need inside it.

Let’s say we have a paragraph and we need to make the text color red. Here’s how you can do it:

<p style="color: red">This text is red</p>

This way of styling is called inline. It only applies to one tag. If we have other  tags, the color of the text inside them will not change.

To change the color of the text, we used the style attribute with the valuecolor:red. This attribute is called the style line. Inside it, you can specify many properties of styles, one of them is color.

Properties, like attributes, have two parts: name and value, which are separated by a colon (:). In this example, the name of the property is color, it is used to set the color of the text. The style value red indicates that the color should be red.

If we want the text color to turn green, we just need to change the property value to green:

<p style="color: green">This text is green</p>

— What if we need to change not only the text color but also the font size?

— To add multiple properties to the style line, you need to separate them with semicolons (;).

The font size can be changed using the CSS property font-size.

<p style="color: red; font-size: 16px;">This text is red. Its size is 16px.</p>

As with color, to change the font size, we specified the property name (font-size), and after the colon (:), we added the value 16px.

The font size does not have to be in pixels. For example, we can bind the font size of the nested tag to the font size of the parent tag. This can be done by specifying the font size, not in px, but %.

<p style="font-size: 16px;">
This is the parent paragraph. Font size - 16px;
  <b style="font-size: 50%;">This is a nested tag, font size is 50% of the parent. That is 8px.</b>
</p>

We have bound the font size for the text inside the  tag to the font size of the parent  tag. Accordingly, the text size inside the  tag will be 8px, half of 16px.

If the font size of the parent tag changes, it will affect the nested tag as well.

Highlighting inline elements

Text can be made bold not only with the  tag, but also with the css property font-weight. To do this, you need to set it to bold. Let’s improve on the previous example a bit:

<p style="font-size: 16px;">
This is the parent tag, its font size is 16 px;
  <span style="font-size: 50%; font-weight: bold">And this is a nested tag, the size of its font is specified in percentage and is equal to 50% of the parent</b>
</p>

— Oh, I don’t recall at the  tag.

— We really didn’t talk much about it before, as, without styles, this tag was not particularly interesting.

The  tag is great for highlighting pieces of text when using styles. By itself, it does not change the text (unlike  or ). But we can add any styles to it to format the text:

<p>
The beginning of the paragraph. Plain text.
  <span style = "font-size: 16px; font-weight: bold; color: blue">Highlighted text.</span>
  Continuation of the paragraph.
</p>