CSS

Cascading Style Sheets

This webpage is styled using bootstrap and 30+ custom CSS entries.


Custom CSS:

1p {
2  padding-left: 2px;
3  padding-right: 2px
4}
5
6body {
7  background-color: #252839;
8  padding-top: 70px;
9  padding-bottom: 45px
10}
11
12.text-info {
13  text-align: right
14}
15
16footer {
17  position: fixed;
18  bottom: 0;
19  right: 0;
20  left: 0;
21  height: 55px;
22  background-color: #252839
23}

CSS Styles


There are hundreds of CSS properties that control font sizes, backgrounds, margins, padding, etc. Without CSS it would be almost impossible to style a website.

CSS can be applied 'inline' directly on HTML elements, however it is usually more efficient to use a CSS class to style multiple elements at once. Frameworks such as Bootstrap and Material UI are based on this principle.


CSS-in-JS:

CSS in JS such as react-jss provides a way for developers to manage styles using javascript. Javascript variables can be used to conditionally style components.

Preprocessors:

CSS extentions such as SASS provide extended syntax to manage styles. SASS isn't natively supported in browsers. It needs to be compiled to standard CSS for a browser to parse and use.