Build better Website!

A design system is a foundation for crafting cohesive and visually appealing interfaces for mobile and web devices.


Unleash your creativity and productivity with this design system!

The CSS Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:

Margin
Border
Padding
Content

Example

Demonstration of the box model:

            
            div {
              width: 300px;
              border: 15px solid green;
              padding: 50px;
              margin: 20px;
            }
            
          

Display and Positioning

There are several CSS properties that can help you with the positioning of HTML elements. The most common are:

CSS Positioning

four types of positioning

Example

Demonstration of the display and positioning properties:

            
            div {
              display: inline-block;
              position: relative;
              float: left;
              clear: right;
            }
            
          

Colors

Colors are specified using predefined color names, RGB, HEX, HSL, RGBA, and HSLA values. The most common ways to specify colors are:

Color Names

Colors can be specified by using a color name. For example, "red", "blue", "green", etc.

HEX Value

Colors can be specified using a HEX value. For example, "#ff0000" is displayed as red.

RGB Value

Colors can be specified using an RGB value. For example, "rgb(255,0,0)" is displayed as red.

RGBA Value

Colors can be specified using an RGBA value. For example, "rgba(255,0,0,0.3)" is displayed as red with 30% opacity.

HSL Value

Colors can be specified using an HSL value. For example, "hsl(0,100%,50%)" is displayed as red.

HSLA Value

Colors can be specified using an HSLA value. For example, "hsla(0,100%,50%,0.3)" is displayed as red with 30% opacity.

Example

Demonstration of the color properties:

            
            div {
              background-color: red;
              color: #ffffff;
              border-color: rgb(255,0,0);
            }
            
          

Bootstrap Color Palette

.bg-primary #0d6efd
.bg-secondary #6c757d
.bg-success #198754
.bg-danger #dc3545
.bg-warning #ffc107
.bg-info #0dcaf0
.bg-light #f8f9fa
.bg-dark #212529
.bg-white #ffffff

Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The most common properties for typography are:

Example

Demonstration of the typography properties:

            
            p {
              font-family: Arial, sans-serif;
              font-size: 16px;
              font-style: italic;
              font-weight: bold;
              text-align: center;
              text-decoration: underline;
              text-transform: uppercase;
              line-height: 1.5;
              letter-spacing: 2px;
              word-spacing: 5px;
            }