Basic properties¶

There are plenty of CSS features for styling documents. You can see them on this website. This section will describe the most popular ones.

Text coloring¶

To change the color of the text displayed on the page, we should use the color property. The value can be given in one of the following ways:

using one of the predefined colors, e.g. red, blue or yellow.
using the hexadecimal code, preceding the value with #, e.g. #FFFFFF represents white. The first two characters represent the red channel, the next two - green, the last two - blue.
by using the rgb function. It has 3 arguments. Each of them can have a value between 0 and 255 and represent channels respectively (red, green, blue).
by using the hsl function. It has 3 arguments:
- hue
- saturation
- lightness
using the hsla or rgba functions, which have an additional fourth argument for transparency. This value should be between 0 and 1.

The following example shows the above described text coloring methods:

.p1 {
    color: red;
}

.p2 {
    color: #FFFFFF;
}

.p3 {
    color: rgb(100, 23, 45);
}

.p4 {
    color: hsl(0, 100%, 50%);
 }

.p5 {
    color: rgba(100, 23, 45, 0.5);
}

.p6 {
    color: hsla(0, 100%, 50%, 0.5);
}

Background coloring¶

The background color can be changed with the background-color property.

p {
    background-color: red;
}

The color can be defined in various ways, as it is presented in above.

Border¶

If you want to style the border of an HTML element, you should use properties from the border group. These are, for example

border-style, which defines the border style (the type of line used, which can be dashed, continuous or dotted, for example).
border-width, which describes the thickness of the border.
border-color, which allows you to change the border color.

For example, to create a black border, with pixel thickness for each paragraph, we can use:

p {
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

Some CSS properties can be saved in a shorter form, using a record in which the values of individual properties are given after a space. The border is one of those properties that allows this mechanism. The code in the previous example can be written as follows:

p {
    border: 1px solid black;
}

Text Alignment¶

To align the text we should use the text-align property, which can take one of four values: * right * left * center * justify

The code below centers the text in the paragraphs:

p {
    text-align: center;
}

Font thickness¶

The font-weight property, gives the font thickness. It takes values from 100 to 900, in steps of 100. Some values have a name, e.g:

Name	Value
normal	400
bold	700
bolder	greater than the inherited amount
lighter	less than inherited

The following example shows how to change the font thickness to 700:

p {
  font-weight: bold;
}

NOTE: Your font may not be available in nine thicknesses.

Font size¶

font-sizeproperty is responsible for the size of a font, to which we can give a value in all units used in CSS.

p {
  font-size: 20px;
}

Font style¶

The font-style property is responsible for the font style. With this property, you can, for example, save the text in italic:

p {
  font-style: italic;
}

Font family¶

The font-family property indicates the type of font used for texts. The font-family property usually contains a font list where each successive value is separated by a comma. The font that is found first (in order, from the left) will be selected, i.e., we must remember, that the font available on one system may not be available on another. Finally, it is worth declaring a family of fonts if none is found. We can choose, for example:

serif - serif fonts, mainly used in printing
sans-serif - sans-serif fonts, mostly used for www.

p {
  font-family: "Times New Roman", sans-serif;
}

It is also possible to import the font from an external source. A popular place where we can get a font is the google fonts website. For this purpose, the <head> section of the HTML code should use the obtained value of <link>, e.g:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Then, this font can be used in a CSS file, e.g:

p {
  font-family: 'Roboto', sans-serif;
}

Image as background¶

We can also use a certain image as a background for an element. For this purpose, we use background-image and the function url, which contains a path to the image, e.g:

p {
    background-image: url('images/funny_cat.png');
}

List style¶

Very often, by using lists in an HTML file, we want to delete or change the default style offered by the browser. This can be done using the list-style property and values it offers, e.g. none, circle or square.

ul {
    list-style: none;
  }