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:
- Content - The content of the box, where text and images appear
- Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
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:
- display - Specifies the type of box used for an HTML element
- position - Specifies the type of positioning method used for an HTML element
- float - Specifies whether an element should float to the left, right, or none
- clear - Specifies what elements can float beside the cleared element and on which side
CSS 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:
- By color names
- By HEX value
- By RGB value
- By RGBA value
- By HSL value
- By HSLA value
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
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:
- font-family - Specifies the font family for text
- font-size - Specifies the font size for text
- font-style - Specifies the font style for text
- font-weight - Specifies the font weight for text
- text-align - Specifies the horizontal alignment of text
- text-decoration - Specifies the decoration added to text
- text-transform - Specifies the capitalization of text
- line-height - Specifies the line height
- letter-spacing - Specifies the space between characters
- word-spacing - Specifies the space between words
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;
}