The CSS Box Model
CSS Box Model Definitions
- Margin - The margin area extends the border area to create an empty area, which is used to seperate itself. The margin size can be determined by the margin-top, margin-bottom, margin-left, and margin-right properties. It can also be defined by using the margin property. It is the first part of the CSS Box Model.
- Border - The border area extends the padding area to include the padding area's border. The thickness can be determined by border-width and the border properties. It is the second part of the CSS Box Model.
- Padding - The padding area extends the content area to include the content area's padding. The thickness of the padding can be determined using padding-top, padding-bottom, padding-right, and padding-left properties, or by the shorten padding property in the CSS file. It is the third part of the CSS Box Model.
- Content - The content area is where the webpage's text, image, and or video would be placed. The dimensions are the content width and the content height. It is the final part of the CSS Box Model.
The Padding Property
1. The padding area extends the content area to include the content
area's padding.
Padding is 40px
Padding is 40px
2. The thickness of the padding can be determined using padding-top,
padding-bottom, padding-right, and padding-left properties...
Padding is top/bottom: 60px, and left/right: 20px
Padding is top/bottom: 60px, and left/right: 20px
3. or it can be the shorten padding property.
Padding is top: 15px, bottom: 40px, right: 140px, and left: 100px,
Padding is top: 15px, bottom: 40px, right: 140px, and left: 100px,
The Margin Property
1. The margin area extends the border area to create an empty area,
which is used to seperate itself.
2. The margin size can be determined by the margin-top,
margin-bottom, margin-left, and margin-right properties.
3. It can also be defined by using the margin property.
Hover Property
The hover selector is used to select elements when your mouse cursor
is over them.
It can be used on anything, not just links.
If the :link, and :visited selectors are used, the :hover selector
must come after them to be effective!
Color Contrast
| Text | Background Color | Text Color | Contrast Ratio | Rating |
|---|---|---|---|---|
|
1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora placeat iste quae iure perspiciatis, modi, id aliquid animi a qui consectetur voluptatibus vero aperiam nemo laborum. Molestias quos fuga numquam. |
#BF2B2B | #FFFFF | 5.84 | AA |
|
2. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora placeat iste quae iure perspiciatis, modi, id aliquid animi a qui consectetur voluptatibus vero aperiam nemo laborum. Molestias quos fuga numquam. |
#FFC2C2 | #828282 | 2.52 | None |
|
3. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora placeat iste quae iure perspiciatis, modi, id aliquid animi a qui consectetur voluptatibus vero aperiam nemo laborum. Molestias quos fuga numquam. |
#FF8E24 | #8AFFEB | 1.92 | None |
|
4. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora placeat iste quae iure perspiciatis, modi, id aliquid animi a qui consectetur voluptatibus vero aperiam nemo laborum. Molestias quos fuga numquam. |
#94FFB9 | #65B5B | 5.05 | AA |
|
5. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora placeat iste quae iure perspiciatis, modi, id aliquid animi a qui consectetur voluptatibus vero aperiam nemo laborum. Molestias quos fuga numquam. |
#0E0E15 | #D6BDEF | 11.33 | AAA |
|
6. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempora placeat iste quae iure perspiciatis, modi, id aliquid animi a qui consectetur voluptatibus vero aperiam nemo laborum. Molestias quos fuga numquam. |
#FDFDED | #E2B22C | 1.92 | None |
Position
Relative Position - The element is positioned relative to its
orginial position.
Absolute Position - The element is positioned relative to the
nearest ancestor. If no position ancestors are available, it uses
the document's body and scrolls with webpage.
Fixed Position - The element is relative to the viewport, it stays
in the same place even if the user scrolling through the webpage.
Shadow On Text
- Horizontal Property -
- The h-shadow sets the shadow distance going horizontally on text. It is listed first.
- Vertical Property -
- The v-shadow sets the shadow distance going vertically on text. It is listed second.
- Blur Property -
- The blur-radius sets the blur radius on text. It is listed third.