Basic properties¶

There are plenty of CSS properties to style your documents. You can see them on the this website. The most popular of them will be described in this section.

Text coloring¶

In order to change the color of the text displayed on the page, we should use the color property. We can provide the value in one of the following ways:

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

The example below shows the above-described ways to color text:

.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 using the background-color property.

p {
    background-color: red;
}

The color can be defined in different ways, as it was presented above.

Border¶

If you want to style the border of a certain HTML element, you should use the properties from the border group. These are e.g .:

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

For example, to create a pixel-thick black border for each paragraph, we could use:

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

Some CSS properties can be abbreviated using the notation in which we enter the values of individual properties after a space. border is one of the properties that make this possible. We can write the code in the previous example as follows:

p {
    border: 1px solid black;
}

Text alignment¶

In order to align the text, we should use the text-align property, which can take one of four values:

right
left
center
justify

The following code centers the text in the paragraphs:

p {
    text-align: center;
}

Font weight¶

The font-weight property gives the weight of the typeface. They take 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 size
lighter	less than inherited

The example below shows how to change the font weight to the value 700:

p {
  font-weight: bold;
}

NOTE: The font may not be available in the nine weights.

Font size¶

Font-size is responsible for the font size, which can be given 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 write the text in italics:

p {
  font-style: italic;
}

Font type¶

The font-family property indicates the font type of the text. font-family usually contains a font list, each value separated by a comma. The font that will be 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 makes sense to declare a font family in a situation where neither is found. We can choose, for example:

serif - serif fonts used mainly 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 from which we can obtain a font is the [google fonts] website (https://fonts.google.com/). To do this, in the <head> section of the HTML code, use the obtained value <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;
}

Picture as background¶

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

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

List styling¶

Very often, when using lists in an HTML file, we want to remove or change the default styling provided by the browser. We can do this with the list-style property and the values it offers, e.g.none, circle andsquare.

ul {
    list-style: none;
  }