- Animation
- Background image
- Border color
- Border radius
- Border width
- Borders
- Box model
- Box shadow
- Class attribute
- Clip path
- Color
- Comment
- Display property
- First-child selector
- Flexbox
- Font family
- Font size
- Font style
- Font weight
- Gradient
- Grid layout
- Height
- Linking a style sheet
- Margin
- Media query
- N-th-child selector
- Overflow property
- Padding
- Pixels
- Position property
- Pseudo-classes
- Pseudo-elements
- Rounding an image
- Selectors
- Specificity
- Text align
- Transition property
- Units
- Variable
- Width
- Z-index
CSS
Pixels in CSS
We measure the height and width of an element in pixels, like 50px. Pixels are tiny points that make up what you see on a screen.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Two different theories</h3>
<img class="round" src="https://mimo.app/r/earth.png">
<img class="flat" src="https://mimo.app/r/earth.png">
</body>
.flat {
height: 50px;
width: 100px;
}
.round {
height: 100px;
width: 100px;
}