CSS Reference

Basic Syntax

selector {
    property: value;
}

Selectors

This is a blue paragraph.

This is a highlighted paragraph.

This is a nested paragraph.

Item 1
Item 2
Item 3

/* Element selector */
p {
    color: blue;
}

/* Class selector */
.highlight {
    background-color: yellow;
}

/* ID selector */
#header {
    font-size: 24px;
}

/* Descendant selector */
div p {
    margin: 10px;
}

/* Child selector */
ul > li {
    list-style: none;
}

Backgrounds

/* Background properties */
body {
  background-color: #C0FFEE;
}

.background-image-example {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-image: url('image.jpg');
}

.background-gradient-example {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-image: linear-gradient(mediumslateblue, darkslateblue);
}

Text and Fonts

This is a paragraph.

/* Font properties */
.style-1 {
  font-family: 'Comic Sans MS', cursive;
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.5;
}

/* Text properties */
style-2 {
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 1px;
  word-spacing: 2px;
}

Box Model

Padding adds space inside the element. Margin adds space outside the element.

The light blue background area is the padding. The red border is the border. The light green border is the margin around the element.

.example-box {
  background-color: #C0FFEE;
  border: 1px solid black;
  border-radius: 5px;
  border-width: 2px;
  border-style: dashed;
  border-color: darkgreen;
  margin-bottom: 10px;
}

.example-box p {
  padding: 10px;
  margin: 10px;
  border: 1px dashed red;
  border-radius: 5px;
  border-width: 2px;
  background-color: lightblue;
}

Layout

This is position: absolute

Flex Item 1

Flex Item 2

Flex Item 3

.example-box {
  position: relative;
  height: 100px;
  width: 100%;
  background-color: lightblue;
}
.example-box p {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
}
.flex-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.flex-item {
  width: 100%;
  text-align: center;
  background-color: lightblue;
  border: 1px dashed darkgreen;
}

Responsive Design

In CSS, you can use media queries to change the layout of your page based on the size of the screen. You can also use viewport units to make your page responsive.

/* Media Queries */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }
}

/* Viewport Units */
width: 100vw;
height: 100vh;
font-size: 2vw;