- !important
- Animation
- Background image
- Blur() function
- Border color
- Border radius
- Border width
- Borders
- Box model
- Box shadow
- Class attribute
- Clip path
- Color
- Comment
- Cursor
- Display property
- First-child selector
- Flexbox
- Font family
- Font size
- Font style
- Font weight
- Gap
- Gradient
- Grid layout
- Height
- ID selector
- Letter spacing
- Linking a style sheet
- Margin
- Media query
- Minmax() function
- N-th-child selector
- Object fit
- Opacity
- Outline
- Overflow property
- Padding
- Pixels
- Pointer events
- Position property
- Pseudo-classes
- Pseudo-elements
- Rotate
- Rounding an image
- Scale()
- Selectors
- Specificity
- Text align
- Text shadow
- Text wrap
- Transition property
- Translate() property
- Units
- Variable
- white-space
- 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;
}