CSS

CSS is an acronym for Cascading Style Sheets. As a presentation language, CSS is used to style elements of an HTML document. CSS handles styling and presentation issues such as the colour, font, and position of an HTML element.

Consider the CSS as contained in the following string:

css.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const css = `.box{
    background: black;
    font: 14px "Lucida Console";
    position: fixed;
}
.box .head{
    background: lime;
    color: black;
    display: flex;
    justify-content: space-between;
}
.box .title{
}
.box .close{
}
.box .body{
    color: lime;
}`;

The above CSS code defines various components that make up our dialog box. First is the overall box itself. The box is sub-divided into various components: the head and the body. The head is further sub-divided into the title and the button to close the box. Here’s an explanation of our box’s components.

  • The block .box declares the default styling of the overall box itself. By default, the background of the box is declared to be black. If you want a different colour for the background, feel free to browse the list of named colours and choose a colour you like. The text of the box has a default font size of 14 pixels and using Lucida Console as the font family. Here is a list of common font families. We want the position of the box to be fixed. A benefit of having a fixed position for our box is that its position does not change when we scroll (either horizontally or vertically) through an HTML document. You can override one or more default styles of the box in the declaration of one or more components of the box. Below, we show how to override various default stylings.
  • The block .box .head is for styling the head of the box. The head is made up of 2 components: the block .box .title for styling the title and the block .box .close for styling the button to close the box. For now, the styling of .box .head is the default styling for .box .title and .box .close, hence we leave the declarations of the latter 2 sub-components empty. In the head of the box, we override the default background colour by declaring the background colour of the head to be lime. The foreground color of the text is black. The display of the head is declared as flex, meaning we want to use a flexible layout for the head. The property justify-content is used to control the spacing of the sub-components in the head. For now, we use space-between to insert as much whitespace as possible between the sub-components. The head of the box has 2 sub-components. Therefore justify-content: space-between; means that the left and right sub-components are positioned to the left-most and right-most, respectively, of the head.
  • The styling of the body of the box is declared in the block .box .body. We want the foreground color of text in the body to be lime.